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 }
Copyright © 2011 Mike Bostock
Fork me on GitHub