Pink Bar Chart

A chart that was built utilizing conventional margins. This graph was built by referencing http://bl.ocks.org/mbostock/3885304 as well as http://chimera.labs.oreilly.com/books/1230000000345/ch09.html#_round_bands_are_all_the_range_these_days. I will further improve functionality as I learn more about the d3 api.

by Blake Dietz

JavaScript

var margin = {top: 20, right: 20, bottom: 30, left: 40};           
			var width = 600 - margin.left - margin.right;
			var height= 500 - margin.top  - margin.bottom;
			var w = width;
			var h = height;

			var dataset = [
			    {"val":5, "key":"a"},
			    {"val":10,"key":"b"},
			    {"val":13,"key":"c"},
			    {"val":19,"key":"d"},
			    {"val":21,"key":"e"},
			    {"val":25,"key":"f"},
			    {"val":22,"key":"g"},
			    {"val":18,"key":"h"},
			    {"val":15,"key":"i"},
			    {"val":13,"key":"j"},
			    {"val":11,"key":"k"},
			    {"val":12,"key":"l"},
			    {"val":15,"key":"m"},
			    {"val":20,"key":"n"},
			    {"val":18,"key":"o"},
			    {"val":17,"key":"p"},
			    {"val":16,"key":"q"},
			    {"val":18,"key":"r"},
			    {"val":23,"key":"s"},
			    {"val":25,"key":"t"}
			];

			var xScale = d3.scale.ordinal()
			    .domain(dataset.map(function (d) {return d.key; }))
			    .rangeRoundBands([margin.left, width], 0.40);

			var xAxis = d3.svg.axis().scale(xScale).orient("bottom");

			var yScale = d3.scale.linear()
			    .domain([0, d3.max(dataset, function(d) {return d.val; })])
			    .range([h,0]);

			var yAxis = d3.svg.axis().scale(yScale).orient("left");



			//Create SVG element
			var svg = d3.select("body")
			    .append("svg")
			    .attr("width", w + margin.right + margin.left)
			    .attr("height", h + margin.top + margin.bottom);

			//Create bars
			svg.selectAll("rect")
			    .data(dataset)
			.enter().append("rect")
			    .attr("x", function(d, i) {
			        return xScale(d.key);
			    })
			    .attr("y", function(d) {
			        return yScale(d.val);
			    })
			    .attr("width", xScale.rangeBand())
			    .attr("height", function(d) {
			        return h - yScale(d.val);
			    });



			// Add the x axis labels to the graph
			var gx = svg.append("g")
			    .attr("class", "x axis")
			    .attr("transform", "translate(0,"+ h +")")
			    .call(xAxis);
			// Add the yAxis to the graph 
			var gy =...