A library of d3-based graphic panels, written in CoffeeScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
doc
src
test chrpanelframe: if one chr, x-axis scale as positions May 18, 2017
.babelrc
.gitignore
.npmignore
License.md
Makefile
NEWS.md
ReadMe.md
d3panels.css
d3panels.js
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-lock.json
package.json Using babel to transpile to ES5; update to d3panels 1.4.8 Mar 5, 2018
yarn.lock

ReadMe.md

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.

Documentation

For documentation, see https://github.com/kbroman/d3panels/tree/master/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/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>

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

yarn install

Finally, run make to create the compiled javascript code.

make

License

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