Skip to content
Gordon Woodhull edited this page Apr 15, 2019 · 9 revisions

What "shape" (or format) of data is each chart expecting?

Every chart takes the output of group.all(), i.e. an array of {key,value} pairs. However, the interpretation of the key can vary, and some charts take multiple groups.

Bubble chart and bubble overlay

By default, X and Y are driven by the keyAccessor and valueAccessor, respectively. However, these can be overridden to give bubbles a different identity function if they should move position in response to filters.

Scatter plot and heatmap

The key is an array of X and Y coordinates. This does not allow symbols/cells to change position. (#621, #702). But it seems to be necessary to implement 2D brushing for the scatter plot, since a filter can only look at the key.

Sometimes people stick the color in a third element of the key array because it's easier to create a custom key than a custom value. This works because dc.filters.RangedTwoDimensionalFilter ignores any extra dimensions in the key, but technically it makes more sense to reduce multiple values.

Bar chart and line chart

The key is the X value and the value is the Y value (by default). When these charts are brushed in X, the dimension key needs to encode X discretely or continuously. Stacking introduces extra groups which all must have the same keys.

There are two alternative grouped bar proposals. One takes over the stacking data (stacking and grouping are mutually exclusive) and the other takes over the composite data (grouped+stacked is allowed, composite bar charts are not). There may be yet another data model for this.

Composite chart

All bets are off since the dimension and group can be specified independently for each child chart. However, in order for brushing to work, the keys must be consistent across charts, because the composite will tell each child chart to filter on its RangedFilter.

Even though any coordinate grid chart is a valid child of a composite, only 1D continuous ranged filtering is supported.

Series chart

The key/value array has bins for each X value in each child chart; typically this means that the key will include the ID of the child chart and the X value. The array is partitioned by seriesAccessor using d3.nest, and each child chart is passed a fake group containing only the items in that series.

Row chart, pie chart

The data is a flat array, where keyAccessor returns an ordinal key, and valueAccessor returns a value. The array is sorted and sliced in order to implement capping.

Box plot

Each key is an X value (ordinal or linear depending on the X scale); each value is an array of values, which d3-box sorts and computes quantiles on.

Geo Choropleth

The data is ordinal key, numeric value.

Not related to data shape, but a curious thing about this chart is that it binds the geojson to the chart and keeps the group data hidden as an auxiliary data structure.

Sunburst chart

The keys are arrays (or can be converted to arrays using keyAccessor) specifying the path down the tree to the slice; the values drive the relative size of the slices, which aggregate back up the tree.

Select menu, checkbox menu

Standard categorical data like a pie chart or row chart (but no capping).

Data table, data grid

These usually use rows from dimension.top() instead of aggregated data, although they can also work with Crossfilter groups. The section (aka "group") function partitions the data.

Data count

Reads crossfilter.size() and groupAll.value() and displays the two numbers.

Number display

Displays value from groupAll.value() or the top bin of a group.