<body role="document">
  <center><div id="chart"> </div></center>
</body>
/*********** STEP 1 ************
Create an svg canvas to draw on*/
var HEIGHT = 600;
var WIDTH = 600;
var svg = d3.select('#chart')
  .append('svg')
    .attr('height', HEIGHT)
    .attr('width', WIDTH);

/*********** STEP 3 ************
We can draw circles based on data*/

var DATA = [100, 300, 400, 500];

var circle = svg.selectAll('circle').data(DATA);
circle.enter()
  .append('circle')
    .attr('r', 25)
    .attr('cx', function(datum) {return datum;}) // this function maps the data to a x-position on the screen
    .attr('cy', 25)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js