d3

Version:

A small, free JavaScript library for manipulating documents based on data.

mbostock.github.com/d3/

mbostock/d3

102 lines (96 loc) • 14.4 kB

HTML

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>d3.js ~ Bullet Charts</title> <script type="text/javascript" src="../d3.js?1.12.0"></script> <style type="text/css"> @import url("../style.css?1.10.0"); @import url("../syntax.css?1.6.0"); </style> </head> <body> <div class="body"> <div class="content"> <div class="topbar"> <a href="../">Overview</a> <a href="../ex/">Examples</a> <a href="../api/">Documentation</a> <a href="http://github.com/mbostock/d3/archives/master">Download</a> </div> <div class="sidebar"> <h1>d3.js</h1> </div> <h1 id='bullet_charts'>Bullet Charts</h1> <div class='gallery' id='chart'> <button class='first last' onclick='transition()'> Update </button> </div><link href='button.css' rel='stylesheet' type='text/css' /><link href='bullet.css' rel='stylesheet' type='text/css' /><script src='../d3.chart.js?1.12.0' type='text/javascript'> </script><script src='bullet.js' type='text/javascript'> </script> Layout inspired by <a href='http://www.perceptualedge.com/articles/misc/Bullet_Graph_Design_Spec.pdf'>Stephen Few</a>. Implementation based on work by <a href='http://projects.instantcognition.com/protovis/bulletchart/'>Clint Ivy</a>, Jamie Love of <a href='http://www.nsquaredsoftware.com/'>N-Squared Software</a> and <a href='http://www.jasondavies.com/'>Jason Davies</a>. The “update” button randomizes the values slightly to demonstrate transitions. <h3 id='source_code'>Source Code</h3> <div class='highlight'><pre><code class='js'> 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 } </code></pre> </div> </div> <div class="foot">Copyright © 2011 <a href="http://bost.ocks.org/mike">Mike Bostock</a></div> </div> </div> <a href="http://github.com/mbostock/d3"><img style="position:absolute;top:0;right:0;border:0;" width="149" height="149" src="../forkme.png" alt="Fork me on GitHub" /></a> </body> </html>