ReadMe.md

d3panels documentation

This subdirectory contains Markdown documents describing each of the panel functions in d3panels.

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

Blank panels (used by other panel functions)

• panelframe
• chrpanelframe
• chr2dpanelframe

Basic panels

• dotchart
• scatterplot
• cichart
• heatmap
• curvechart
• histchart
• trichart
• add_curves
• add_points

LOD curve panels

• lodchart
• lodheatmap
• lod2dheatmap
• add_lodcurve

Control panels

• slider
• double_slider

Other panels

• mapchart
• crosstab

Utility functions

d3panels also contains some additional utility functions plus CSS code used by the panels. These are not documented.

• panelutil.coffee contains various utility functions
• panelutil.css contains CSS used by the panels

For snapshots and live tests, see https://kbroman.org/d3panels.

Links

To use the code, you need link to d3panels.js and d3panels.css (or to d3panels.min.js and d3panels.min.css):

<script type="text/javascript" src="https://rawgit.com/kbroman/d3panels/main/d3panels.js"></script>
<link rel=stylesheet type="text/css" href="https://rawgit.com/kbroman/d3panels/main/d3panels.css">

You also need to link to D3.js.

<script charset="utf-8" type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>