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

example barchart component built with derby + some d3.js
https://github.com/derbyjs/d-barchart

Last synced: 5 days ago
JSON representation

example barchart component built with derby + some d3.js

• Host: GitHub
• URL: https://github.com/derbyjs/d-barchart
• Owner: derbyjs
• Created: 2014-04-06T20:58:18.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-01-12T06:31:12.000Z (almost 9 years ago)
• Last Synced: 2024-08-08T20:55:00.128Z (3 months ago)
• Language: JavaScript
• Size: 1.95 KB
• Stars: 0
• Watchers: 9
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-derby - d-barchart - Example barchart component built with derby + some d3.js (Components)

README

        
d-barchart

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

Example d3 Bar chart Derby component.

also see:

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

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

# Usage

[Example usage](http://github.com/derbyjs/derby-examples/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

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.

The benefit here is we get server-side rendering and readable templates that react to changes in the data. The trade-off is that we lose d3's transitions because we don't use the selection api.