i3d3

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

Requirements:

Examples

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.

Background

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):

DONE

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.