Here is a link to the jsfiddle

http://jsfiddle.net/jaimem/RPGPL/2/

Now the graph shows red color for all the circles.Is dere a way to show random colors on the circles.

Here is the d3.js 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();

}