Example d3 Bar chart Derby component. see also: d-barchart-vanilla d-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 });
We let d3 handle the DOM manipulation to take advantage of its transition API. We also render the DOM elements with Derby in an unbound template block so that the initial bar chart gets rendered on the server. d3's selection API finds the existing elements and binds it's data to them.