D3 Bullet Chart

D3 port of https://github.com/d3/d3-plugins/tree/master/bullet

Installing

npm install --save d3 d3-bullet

API Reference

d3.bullet()

Constructs a new default bullet generator.

bullet(data)

For example:

<div id="bullet-chart"></div>

const margin = { top: 5, right: 40, bottom: 20, left: 120 };
const width = 960 - margin.left - margin.right;
const height = 50 - margin.top - margin.bottom;

const data = [
  { 'title': 'Revenue', 'subtitle': 'US$, in thousands', 'ranges': [150, 225, 300], 'measures': [220, 270], 'markers': [250] },
  { 'title': 'Profit', 'subtitle': '%', 'ranges': [20, 25, 30], 'measures': [21, 23], 'markers': [26] },
  { 'title': 'Order Size', 'subtitle': 'US$, average', 'ranges': [350, 500, 600], 'measures': [100, 320], 'markers': [550] },
  { 'title': 'New Customers', 'subtitle': 'count', 'ranges': [1400, 2000, 2500], 'measures': [1000, 1650], 'markers': [2100] },
  { 'title': 'Satisfaction', 'subtitle': 'out of 5', 'ranges': [3.5, 4.25, 5], 'measures': [3.2, 4.7], 'markers': [4.4] }
];

const chart = d3.bullet()
  .width(width)
  .height(height);

const svg = d3.select('#bullet-chart')
  .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);

const title = svg.append('g')
  .style('text-anchor', 'end')
  .attr('transform', `translate(-6,${height / 2})`);

title.append('text')
  .attr('class', 'title')
  .text((d) => d.title);

title.append('text')
  .attr('class', 'subtitle')
  .attr('dy', '1em')
  .text(({ subtitle }) => subtitle);

bullet.width([width])

If width is specified, sets the width and returns this bullet generator. If width is not specified, returns the current width, which defaults to: 300

bullet.height([height])

If width is specified, sets the width and returns this bullet generator. If width is not specified, returns the current width, which defaults to: 30