title: random colors for circles in d3.js graph
body: <p>Here is a link to the jsfiddle</p>
  
  <pre><code>http://jsfiddle.net/jaimem/RPGPL/2/
  </code></pre>
  
  <p>Now the graph shows red color for all the circles.Is dere a way to show random colors on the circles.</p>
  
  <p>Here is the d3.js code</p>
  
  <pre><code> var data = [{ "count": "202", "year": "1590"},
                    { "count": "215", "year": "1592"},
                    { "count": "179", "year": "1593"}, 
                    { "count": "199", "year": "1594"},
                    { "count": "134", "year": "1595"},
                    { "count": "176", "year": "1596"},
                    { "count": "172", "year": "1597"},
                    { "count": "161", "year": "1598"},
                    { "count": "199", "year": "1599"},
                    { "count": "181", "year": "1600"},
                    { "count": "157", "year": "1602"},
                    { "count": "179", "year": "1603"},
                    { "count": "150", "year": "1606"},
                    { "count": "187", "year": "1607"},
                    { "count": "133", "year": "1608"},
                    { "count": "190", "year": "1609"},
                    { "count": "175", "year": "1610"},
                    { "count": "91", "year": "1611"},
                    { "count": "150", "year": "1612"} ];
  
  
  
  function ShowGraph(data) {
  d3.selectAll('.axis').remove();
  var vis = d3.select("#visualisation").append('svg'),
      WIDTH = 500,
      HEIGHT = 500,
      MARGINS = {
          top: 20,
          right: 20,
          bottom: 20,
          left: 30
      },
                  xRange = d3.scale
                         .linear()
                         .domain([
                            d3.min(data, function(d){ return parseInt(d.year, 10);}),
                            d3.max(data, function(d){ return parseInt(d.year, 10);})
                          ])
                         .range([MARGINS.left, WIDTH - MARGINS.right]),
              yRange = d3.scale
                         .linear()
                         .domain([
                            d3.min(data, function(d){ return parseInt(d.count, 10);}),
                            d3.max(data, function(d){ return parseInt(d.count, 10);})
                          ])
                         .range([HEIGHT - MARGINS.top, MARGINS.bottom]),
  
      xAxis = d3.svg.axis() // generate an axis
      .scale(xRange) // set the range of the axis
      .tickSize(5) // height of the ticks
      .tickSubdivide(true), // display ticks between text labels
      yAxis = d3.svg.axis() // generate an axis
      .scale(yRange) // set the range of the axis
      .tickSize(5) // width of the ticks
      .orient("left") // have the text labels on the left hand side
      .tickSubdivide(true); // display ticks between text labels
  var transition = vis.transition().duration(1000).ease("exp-in-out");
  
  transition.select(".x.axis").call(xAxis);
  transition.select(".y.axis").call(yAxis);
  
  
  
  
  vis.append("svg:g") // add a container for the axis
  .attr("class", "x axis") // add some classes so we can style it
  .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") // move it into position
  .call(xAxis); // finally, add the axis to the visualisation
  
  vis.append("svg:g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + (MARGINS.left) + ",0)")
      .call(yAxis);
  
  
  var circles = vis.selectAll("circle").data(data)
  circles.enter()
      .append("svg:circle")
      .attr("cx", function (d) {
      return xRange(d.year);
  })
      .attr("cy", function (d) {
      return yRange(d.count);
  })
      .style("fill", "red")
  
  circles.transition().duration(1000)
      .attr("cx", function (d) {
      return xRange(d.year);
  })
      .attr("cy", function (d) {
      return yRange(d.count);
  })
      .attr("r", 10)
  
  circles.exit()
      .transition().duration(1000)
      .attr("r", 10)
      .remove();
  }
  </code></pre>