a barchart component for Derby demonstrating a common pattern with d3.js
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Latest commit 46e5089 Jan 12, 2016
Permalink
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

README.md

d-d3-barchart

Example d3 Bar chart Derby component. see also: d-barchart-vanilla d-barchart

Usage

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

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.