D3 Bullet Chart

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

!Bullet chart preview

Installing

npm install --save d3 d3-bullet

API Reference

$3

Constructs a new default bullet generator.

$3

For example:

``html

`

`js
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);
`

$3

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`

$3

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``