Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: 🗒️ improve data structure sections #29

Merged
merged 11 commits into from
Nov 6, 2024
Prev Previous commit
Next Next commit
docs: 📝 add examples for grouped bar chart
lloydrichards committed Oct 28, 2024
commit d37df834ffd937d314433ae0f65dcca004477c84
23 changes: 22 additions & 1 deletion docs/bar-chart-grouped/README.md
Original file line number Diff line number Diff line change
@@ -4,10 +4,31 @@

### Data structure

This chart requires a set of subsets, where each subset is a group of data objects to be displayed as a bar.
This chart requires an array of arrays, grouped by the desired dimension. Each group should be an array of objects, where each object represents a bar in the group.

```code
const data = [
[
{ category: "A", value: 10 },
{ category: "B", value: 20 },
{ category: "C", value: 30 },
],
[
{ category: "A", value: 15 },
{ category: "B", value: 25 },
{ category: "C", value: 35 },
],
];
```

### Configuration

In order to construct a grouped bar chart, we can use the `sszvis.cascade()` function to group the data by the desired dimension. The data is then mapped to the grouped data structure.

```code
state.groupedData = sszvis.cascade().arrayBy(xAcc).apply(state.data);
```

#### `groupedBars.groupScale(scale)`

This should be a scale function for determining the correct group offset of a member of a group. This function is passed the group member, and should return a value for the group offset which is the same for all members of the group. The within-group offset (which is different for each member) is then added to this group offset in order to position the bars individually within the group. So, for instance, if the groups are based on the "city" property, the groupScale should return the same value for all data objects with "city = Zurich".