mmm donuts

mmm donuts

by nancynancy

HTML

<pre id="data">
key,value,category
Glazed,132,A
Jelly,71,B
Holes,337,B
Sprinkles,93,C
Crumb,78,C
Chocolate,43,A
Coconut,20,B
Cream,16,C
Cruller,30,B
Éclair,8,A
Fritter,17,C
Bearclaw,21,B
</pre>

CSS

body,html{
	margin: 0;
	padding: 0;
	font-family: "Arial", sans-serif;
	font-size: 0.95em;
	text-align: center;
	background-color:#A080AD;
}
#chart{
	background-color: #F5F2EB;
	border: 1px solid #CCC;
}

.axis path,
.axis line{
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}
.gridline path,
.gridline line{
	fill: none;
	stroke: #ccc;
	shape-rendering: crispEdges;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  opacity: 0.2;
}
pre {
  display:none;
  }

JavaScript

var data = d3.csv.parse(d3.select("pre#data").text());
var w = 500;
var h = 350;
var margin = {
    top: 60,
    bottom: 80,
    left: 100,
    right: 80
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;

var x = d3.scale.ordinal()
		.domain(data.map(function(entry){
			return entry.key;
		}))
		.rangeBands([0, width]);
var y = d3.scale.linear()
		.domain([0, 350])
		.range([height, 0]);
var ordinalColorScale = d3.scale.category10();
var xAxis = d3.svg.axis()
			.scale(x)
			.orient("bottom");
var yAxis = d3.svg.axis()
			.scale(y)
			.orient("left");
var yGridlines = d3.svg.axis()
				.scale(y)
				.tickSize(-width,0,0)
				.tickFormat("")
				.orient("left");
var svg = d3.select("body").append("svg")
			.attr("id", "chart")
			.attr("width", w)
			.attr("height", h);
var chart = svg.append("g")
			.classed("display", true)
			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var controls = d3.select("body")
									.append("div")
                  .attr("id", "controls");
var sort_btn = controls.append("button")
										.html("Sort: Ascending")
                    .attr("state", 0);
function plot(params){
	this.append("g")
		.call(yGridlines)
		.classed("gridline", true)
		.attr("transform", "translate(0,0)")
	this.selectAll(".bar")
		.data(params.data)
		.enter()
			.append("rect")
			.classed("bar", true)
			.attr("x", function(d,i){
				return x(d.key);
			})
			.attr("y", function(d,i){
				return y(d.value);
			})
			.attr("height", function(d,i){
				return height - y(d.value);
			})
			.attr("width", function(d){
				return x.rangeBand();
			})
			.style("fill", function(d) {
      return ordinalColorScale(d.category);
      });

	this.selectAll(".bar-label")
		.data(params.data)
		.enter()
			.append("text")
			.classed("bar-label", true)
			.attr("x", function(d,i){
				return x(d.key) + (x.rangeBand()/2)
			})          
			.attr("dx", 0)
			.attr("y", function(d,i){
				return...