@cwi/d3-bullet/README.md

D3 bullet chart

# D3 Bullet Chart

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

![Bullet chart preview](preview.png)

## Installing

`npm install --save d3 d3-bullet`

## API Reference

### d3.<b>bullet</b>()

Constructs a new default [bullet generator](#_bullet).

### <i>bullet</i>(<i>data</i>)

For example:

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

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

### <i>bullet</i>.<b>width</b>([<i>width</i>])

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

### <i>bullet</i>.<b>height</b>([<i>height</i>])

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