jgoodall/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .circle {
    fill: steelblue;
    stroke: '#fff';
  }
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 500
  , height = 500
  , margin = {top: 25, right: 50, bottom: 25, left: 50}

// first number will be plotted on the x axis
// second number will be plotted on the y axis
// third number will be used as the radius
var dataset = [
                [ 5,     20,   12],
                [ 480,   90,   11],
                [ 250,   50,   13],
                [ 100,   33,   11],
                [ 330,   95,   17],
                [ 410,   12,   15],
                [ 475,   44,   13],
                [ 25,    67,   11],
                [ 600,   81,   12],
                [ 85,    21,   11],
                [ 120,   39,   12],
                [ 220,   88,   16]
              ];

// append the svg to the body of the page and set the width and height
// append a 'g' element to group the circles together and 'translate'
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// bind the data and set the x, y, and radius of each point
var dot = svg.selectAll("circle")
    .data(dataset)
  .enter().append("circle")
    .attr({
      "class": "circle"
    , "cx": function(d) { return d[0]; }
    , "cy": function(d) { return d[1]; }
    , "r": function(d) { return d[2] / 2; }
    });

</script>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.circle {
	fill: steelblue;
	stroke: '#fff';
	}
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var width = 500
	, height = 500
	, margin = {top: 25, right: 50, bottom: 25, left: 50}

	// first number will be plotted on the x axis
	// second number will be plotted on the y axis
	// third number will be used as the radius
	var dataset = [
	[ 5, 20, 12],
	[ 480, 90, 11],
	[ 250, 50, 13],
	[ 100, 33, 11],
	[ 330, 95, 17],
	[ 410, 12, 15],
	[ 475, 44, 13],
	[ 25, 67, 11],
	[ 600, 81, 12],
	[ 85, 21, 11],
	[ 120, 39, 12],
	[ 220, 88, 16]
	];

	// append the svg to the body of the page and set the width and height
	// append a 'g' element to group the circles together and 'translate'
	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// bind the data and set the x, y, and radius of each point
	var dot = svg.selectAll("circle")
	.data(dataset)
	.enter().append("circle")
	.attr({
	"class": "circle"
	, "cx": function(d) { return d[0]; }
	, "cy": function(d) { return d[1]; }
	, "r": function(d) { return d[2] / 2; }
	});

	</script>
	</body>