D3 Examples - Bullet Chart

Bullet Chart

Designed by Stephen Few, a bullet chart “provides a rich display of data in a small space.” A variation on a bar chart, bullet charts compare a given quantitative measure (such as profit or revenue) against qualitative ranges (e.g., poor, satisfactory, good) and related markers (e.g., the same measure a year ago). Layout inspired by Stephen Few. Implementation by Mike Bostock 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.

xxxxxxxxxx
 
<!DOCTYPE html>
<!-- <meta charset="utf-8"> -->
<style>
​
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  padding-top: 40px;
  position: relative;
  width: 960px;
}
​
​
.bullet { font: 15px sans-serif; } /* xaxis values attributes */
.bullet .range.s0 { fill: #00a144; } /* Green Range (Good Value) */
.bullet .range.s1 { fill: #edac1a; } /* Yellow Range (Okay Value) */
.bullet .range.s2 { fill: #d91b1b; } /* Red Range (Poor Value) */
.bullet .measure.s0 { fill: #8379b8; } /* Purple Range (Actual Value) */
.bullet .measure1{ fill: #000000;font-weight: bold; font-size: 14px; } /* Measure value at the end of the purple range ie 99% */
.bullet .title { font-size: 14px; font-weight: bold; } /* Title attributes */
.bullet .subtitle { fill: #999; } /* Subtitle attributes */
​
</style>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="bullet.js"></script>
<script>
​
var margin = {top: 15, right: 40, bottom: 30, left: 80}, //Define the size of the area we are working in
    width = 315 - margin.left - margin.right, //defines width of the rectangles
    height = 80 - margin.top - margin.bottom; //defines height of the rectangles
​
var chart = d3.bullet() //Defining the chart size
    .width(width)
    .height(height);
​
d3.json("bullets.json", function(data) { //This function draws/creats the chart
  var svg = d3.select("body").selectAll("svg")
      .data(data)
    .enter().append("svg")
      .attr("class", "bullet")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(chart);
​
  var title = svg.append("g")
        .style("text-anchor", "middle")
                .attr("transform", "translate(105," + height / 150 + ")"); //positions the subtitle on the xaxis and yaxis
​
  
  
  title.append("text")
      .attr("class", "title")
      .text(function(d) { return d.title; }); //Adds the title text
​
  
  title.append("text")
      .attr("class", "subtitle")
      .attr("dy", "1.5em") //positions the subtitle on the yaxis
        .attr("dx", "-7.2em") //positions the subtitle on the xaxis
        .style("text-anchor", "end")
      .text(function(d) { return d.subtitle; }); //Adds the subtitle text
});
</script>
​
    