Skip to content
A library of d3-based graphic panels, written in CoffeeScript
CoffeeScript HTML R CSS Makefile
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
d3panels.css revisions to deal with change to d3-tip Jun 25, 2015
yarn.lock 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); 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


For documentation, see


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("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=""></script>
<link rel=stylesheet type="text/css" href="">

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

<script charset="utf-8" type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

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

<script type="text/javascript" src=""></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.)

You can’t perform that action at this time.