https://github.com/derbyjs/d-d3-barchart

a barchart component for Derby demonstrating a common pattern with d3.js
https://github.com/derbyjs/d-d3-barchart

Last synced: 5 days ago
JSON representation

a barchart component for Derby demonstrating a common pattern with d3.js

• Host: GitHub
• URL: https://github.com/derbyjs/d-d3-barchart
• Owner: derbyjs
• Created: 2014-04-06T20:59:26.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-01-12T06:32:59.000Z (almost 9 years ago)
• Last Synced: 2024-10-03T07:10:08.585Z (about 1 month ago)
• Language: JavaScript
• Size: 2.93 KB
• Stars: 1
• Watchers: 8
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-derby - d-d3-barchart - Barchart component for Derby demonstrating a common pattern with d3.js (Components)

README

        
d-d3-barchart

==================

Example d3 Bar chart Derby component.

see also:

[d-barchart-vanilla](http://github.com/derbyjs/d-barchart-vanilla)

[d-barchart](http://github.com/derbyjs/d-d3-barchart)

# Usage

[Example usage](http://github.com/derbyjs/derby-examples/tree/master/charts)

## In your template

```

```

some optional arguments

```

```

## 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.