BubbleChart

A bubble chart written in d3.js

by Blake Dietz

JavaScript

var dataset = 	d3.range(100,300,10).map(function(datum)
                       {
                           var dataBundle = {}
                           dataBundle.x = datum * Math.random() + 20;
                           dataBundle.y = datum * Math.random() + 20;
                           return dataBundle;
                       })		
	var radius = 5; //px
	var xMin = 1.975000;
	var xMax = 314.191667;
	var yMin = -77.729574;
	var yMax = 1866.263313;

	var margin = {top:20,right: 20, bottom:20,left:20};
	var width  = 650 - margin.left - margin.right ;
	var height = 450 - margin.top - margin.bottom;

	var xScale = d3.scale.linear().domain([0 ,xMax]).range([margin.left, width]);
	var yScale = d3.scale.linear().domain([yMin, yMax]).range([height, 0]);

	var xAxis  = d3.svg.axis().scale(xScale).orient("bottom").ticks(3).tickSize(-height);
	var yAxis  = d3.svg.axis().scale(yScale).orient("left").ticks(5).tickSize(-width);

	var svg    = d3.select("body").append("svg")
		.attr("height",height + margin.top + margin.bottom)
		.attr("width",width + margin.left + margin.right)
	.append("g")
		.attr("transform","translate(" + margin.left + "," + margin.top +")");

	var gy = svg.append("g")
		.attr("class", "y axis")
		.attr("transform","translate(" + margin.left + ", 0)")
		.call(yAxis);

	var gx = svg.append("g")
		.attr("class","x axis") 
		.attr("transform","translate(0," + height +")")
		.call(xAxis);

	svg.selectAll("circle").data(dataset).enter().append("circle")
		.attr("cx",function(d)
		{
			return xScale(d.x);
		})
		.attr("cy",function(d)
		{
			return yScale(d.y);
		})
		// TODO attr and styling to...