Bullet Charts
Layout inspired by Stephen Few. Implementation based on work by Clint Ivy, Jamie Love of N-Squared Software and Jason Davies. The “update” button randomizes the values slightly to demonstrate transitions.
Source Code
1 var w = 960,
2 h = 50,
3 m = [5, 40, 20, 120]; // top right bottom left
4
5 var chart = d3.chart.bullet()
6 .width(w - m[1] - m[3])
7 .height(h - m[0] - m[2]);
8
9 d3.json("bullets.json", function(data) {
10
11 var vis = d3.select("#chart").selectAll("svg")
12 .data(data)
13 .enter().append("svg:svg")
14 .attr("class", "bullet")
15 .attr("width", w)
16 .attr("height", h)
17 .append("svg:g")
18 .attr("transform", "translate(" + m[3] + "," + m[0] + ")")
19 .call(chart);
20
21 var title = vis.append("svg:g")
22 .attr("text-anchor", "end")
23 .attr("transform", "translate(-6," + (h - m[0] - m[2]) / 2 + ")");
24
25 title.append("svg:text")
26 .attr("class", "title")
27 .text(function(d) { return d.title; });
28
29 title.append("svg:text")
30 .attr("class", "subtitle")
31 .attr("dy", "1em")
32 .text(function(d) { return d.subtitle; });
33
34 chart.duration(1000);
35 window.transition = function() {
36 vis.map(randomize).call(chart);
37 };
38 });
39
40 function randomize(d) {
41 if (!d.randomizer) d.randomizer = randomizer(d);
42 d.ranges = d.ranges.map(d.randomizer);
43 d.markers = d.markers.map(d.randomizer);
44 d.measures = d.measures.map(d.randomizer);
45 return d;
46 }
47
48 function randomizer(d) {
49 var k = d3.max(d.ranges) * .2;
50 return function(d) {
51 return Math.max(0, d + k * (Math.random() - .5));
52 };
53 }