Example d3 Bar chart Derby component. also see: d-barchart-vanilla d-d3-barchart
<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>
model.set("_page.data", [ { value: 1 }, { value: 10 } ]);
Optional data
model.set("_page.margins", {top: 0, right: 20, bottom: 0, left: 20 });
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.