a barchart component for Derby demonstrating a common pattern with d3.js
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
README.md
index.html
index.js
package.json

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.