d3panels: D3-based graphic panels
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.)