a barchart component for Derby built without d3.js to illustrate a pattern
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Latest commit a841ba0 Jan 12, 2016
Failed to load latest commit information.
.gitignore initial commit Apr 6, 2014
README.md codeparty => derbyjs Jan 12, 2016
index.html initial commit Apr 6, 2014
index.js initial commit Apr 6, 2014
package.json codeparty => derbyjs Jan 12, 2016



Example Bar chart Derby component built in vanilla JS (with no d3) to illustrate the difference. see also: d-barchart d-d3-barchart


Example 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. We don't use any d3 to both show a more bare-bones Derby example, as well as show what d3 makes more convenient regarding laying out data.