Home

Awesome

d3panels: D3-based graphic panels

NPM badge zenodo DOI

Karl W Broman

This is a set of D3-based graphic panels, to be combined into larger multi-panel charts. They were developed for the R/qtlcharts package.

Note that d3panels uses D3 version 7. (It should also work with version 6.)

There are other libraries with similar goals that are of more general use (e.g., C3.js); see this list of javascript chart libraries), but I wanted charts that were a bit less general and flexible, but rather more specific to my particular applications (and style).

For snapshots and live tests, see https://kbroman.org/d3panels.

Documentation

For documentation, see https://github.com/kbroman/d3panels/tree/main/doc.

Usage

All of the functions are called as d3panels.blah(). And for each chart, you first call the chart function with a set of options, like this:

mychart = d3panels.lodchart({height:600, width:800})

And then you call the function that's created with some selection and the data:

mychart(d3.select("div#chart"), mydata)

There are three exceptions to this: add_lodcurve, add_curves, and add_points. For these functions, you first need to call another function that creates a panel (for example, lodchart or chrpanelframe in the case of add_lodcurve, or panelframe in the case of add_curves or add_points). You then use the chart function created by that first call in place of a selection. For example:

myframe = d3panels.panelframe({xlim:[0,100],ylim:[0,100]})
myframe(d3.select("body"))

addpts = d3panels.add_points()
addpts(myframe, {x:[5,10,25,50,75,90], y:[8,12,50,30,80,90], group:[1,1,1,2,2,3]})

Links

You'll need to link to the d3panels.js and d3panels.css files (or to d3panels.min.js and d3panels.min.css):

<script type="text/javascript" src="https://rawgit.com/kbroman/d3panels/main/d3panels.js"></script>
<link rel=stylesheet type="text/css" href="https://rawgit.com/kbroman/d3panels/main/d3panels.css">

You'll also want to link to D3.js:

<script charset="utf-8" type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>

Build

To build the javascript (and CSS) files from the coffeescript source, you first need to install npm.

Then use npm to install yarn, coffeescript, uglify-js uglifycss, and babel-core

npm install -g yarn coffeescript uglifycss uglify-js babel-core

Then install the dependency, d3:

yarn install

Finally, run make to create the compiled javascript code.

make

License

Licensed under the MIT license. (More information here.)