A library of d3-based graphic panels, written in CoffeeScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
test chrpanelframe: if one chr, x-axis scale as positions May 18, 2017
d3panels.min.css revisions to deal with change to d3-tip Jun 25, 2015
d3panels.min.js Using babel to transpile to ES5; update to d3panels 1.4.8 Mar 5, 2018
package.json Using babel to transpile to ES5; update to d3panels 1.4.8 Mar 5, 2018


d3panels: D3-based graphic panels

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 4.

There are other libraries with similar goals that are of more general use (e.g., C3.js and d3.Chart; 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 http://kbroman.org/d3panels.


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


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]})

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]})


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/master/d3panels.js"></script>
<link rel=stylesheet type="text/css" href="https://rawgit.com/kbroman/d3panels/master/d3panels.css">

You'll also want to link to D3.js and d3-tip:

<script charset="utf-8" type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/Caged/d3-tip/master/index.js"></script>

For a couple of panels (curvechart and scatterplot) you may need to link to colorbrewer.js:

<script type="text/javascript" src="https://rawgit.com/mbostock/d3/master/lib/colorbrewer/colorbrewer.js"></script>


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 dependencies (d3, d3-tip, and colorbrewer:

yarn install

Finally, run make to create the compiled javascript code.



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