Awesome

D2B: Data to DashBoards

A reusable d3-based chart library.

Installing

If you use NPM, npm install d2b. Otherwise, you can download the latest build here or install it via CDN.

API Reference

You can see the d2b API references here.

Optional Dependencies

font awesome icons: Many of the charts use this icon set.
d3-sankey: Used by the d2b sankey chart and sankey svg. If using NPM this dependency will automatically be included.
d3-interpolate-path: Used by the d2b v > 0.0.41 line svg and area svg for smoother interpolation. This dependency is optional, by default d3's path interpolation will be used. If installing with NPM this dependency will automatically be included.

Examples

You can try out many d2b live code examples here.

If you are using Vue.js there is a vue-d2b plugin that makes using d2b even easier.

<figure><figcaption style = 'text-align:center;'>d2b.chartAxis()</figcaption><img src="./docs/gifs/chart-axis.gif" alt="Axis Chart" width = '100%'/></figure> <figure><figcaption style = 'text-align:center;'>d2b.chartSunburst()</figcaption><img src="./docs/gifs/chart-sunburst.gif" alt="Sunburst Chart" width = '100%'/></figure> <figure><figcaption style = 'text-align:center;'>d2b.chartSankey()</figcaption><img src="./docs/gifs/chart-sankey.gif" alt="Sankey Chart" width = '100%'/></figure> <figure><figcaption style = 'text-align:center;'>d2b.chartPie()</figcaption><img src="./docs/gifs/chart-pie.gif" alt="Pie Chart" width = '100%'/></figure>

Some examples of mix and match d2b.chartAxis() generators.

<figure><figcaption style = 'text-align:center;'>d2b.svgBoxPlot()</figcaption><img src="./docs/gifs/box-plot-svg-transition.gif" alt="Svg Box Plot" width = '100%'/></figure> <figure><figcaption style = 'text-align:center;'>d2b.svgBubblePack()</figcaption><img src="./docs/gifs/bubble-pack-svg-transition.gif" alt="Svg Bubble Pack" width = '100%'/></figure> <figure><figcaption style = 'text-align:center;'>d2b.svgArea()</figcaption><img src="./docs/gifs/area-svg-transition.gif" alt="Svg Area" width = '100%'/></figure> <figure><figcaption style = 'text-align:center;'>d2b.svgLine()</figcaption><img src="./docs/gifs/line-svg-transition.gif" alt="Svg Line" width = '100%'/></figure> <figure><figcaption style = 'text-align:center;'>d2b.svgScatter()</figcaption><img src="./docs/gifs/scatter-svg-transition.gif" alt="Svg Scatter" width = '100%'/></figure> <figure><figcaption style = 'text-align:center;'>d2b.svgBar()</figcaption><img src="./docs/gifs/bar-svg-transition.gif" alt="Svg Bar" width = '100%'/></figure>