Chart with d3.js

by Anders Kitson

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

JavaScript

var svg = d3.select("body").append("svg");

var w = 500;
var h = 50;

svg.attr("width", w)
  .attr("height", h);

var dataset = [];
for (var i = 0; i < 25; i++){
  var newNumber = ~~(Math.random() * 10);
  dataset.push(newNumber);
}

console.log(dataset);

var circles = svg.selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle");

  circles.attr("cx", function(d, i){
    return (i * 50) + 25;
  })
  .attr("cy", h/2)
  .attr("r", function(d) {
    return d;
  });