d-barchart
Example d3 Bar chart Derby component.
also see:
d-barchart-vanilla
d-d3-barchart
Usage
In your template
<view name="d-barchart" data={{_page.data}} width=300 height=200></view>
some optional arguments
<view name="d-barchart" data={{_page.data}} margins={{_page.margins}}></view>
Your data
model.set("_page.data", [ { value: 1 }, { value: 10 } ]);
Optional data
model.set("_page.margins", {top: 0, right: 20, bottom: 0, left: 20 });
Implementation pattern
In this example we take advantage of derby's bindings to associate our data with the DOM.
We use the layout pattern where we transform input data into layout data, and then render the layout data.
The benefit here is we get server-side rendering and readable templates that react to changes in the data. The trade-off is that we lose d3's transitions because we don't use the selection api.