D3-based plotting and histogramming library
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



D3-based histogramming and plotting library (for use in IceCube and other projects). This is a work in progress.


  1. D3
  2. Underscore.js


The following examples were all created from this HTML:

Example output

The HTML is pretty self-explanatory and serves as API documentation for the time being :-).

NOTE: you must use or adapt the styling rules in style.css or your graphs will look hideously ugly. Again, example.html shows one way to do it.


We looked around at quite a few JavaScript plotting libraries which might meet our requirements, which are (watch this space for updated status as the project progresses):


  • High graphical signal/noise ratio
  • Histograms / bar graphs based on provided array of bin heights
  • Set color, transparency of histogram
  • Scatter plots
  • Line graphs
  • Display X and Y axes, with labels
  • Multiple graphs/histograms per plot
  • Add rectangular highlights to X-ranges under plot
  • Draw horizontal, vertical and other lines on top of plots
  • Add text to plot in either data or display units
  • Wrap everything in an object to avoid namespace pollution
  • Time series X-axes
  • Log / linear y-axes
  • Two-sided error bars for points and histograms
  • Allow addition of titles to plots
  • Zooming / panning, with selective zoom on either access by holding shift key

Not done, in order of priority

  • Minor (unlabled) gridline for X (or T) axes
  • Axis-free representations (sparklines)
  • Exporting plot graphic (either SVG or PDF would be OK)
  • Show (x,y) plot coordinates of mouse [?]
  • Optional grids in chart backgrounds
  • Ability to “reset” the plot (if, for example, zoomed beyond recognition)
  • Exporting data from plot

None of the canned plotting / graphing packages we looked at were quite what we wanted; D3.js does not provide these directly but is sufficiently powerful, flexible and fast to provide a foundation to allow us to implement these ourselves.

Use with the Bower package manager

You can use Bower to pull down i3d3's dependencies. Just run bower install.

To update Bower with a new version, first update bower.json, then:

git tag <version>
git push --tags





John Jacobsen