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

a barchart component for Derby built without d3.js to illustrate a pattern
https://github.com/derbyjs/d-barchart-vanilla

Last synced: about 1 month ago
JSON representation

a barchart component for Derby built without d3.js to illustrate a pattern

• Host: GitHub
• URL: https://github.com/derbyjs/d-barchart-vanilla
• Owner: derbyjs
• Created: 2014-04-06T21:01:41.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-01-12T06:31:51.000Z (almost 9 years ago)
• Last Synced: 2024-10-05T18:18:09.814Z (2 months ago)
• Language: JavaScript
• Size: 1.95 KB
• Stars: 1
• Watchers: 9
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-derby - d-barchart-vanilla - Barchart component for Derby built without d3.js to illustrate a pattern (Components)

README

        
d-barchart-vanilla

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

Example Bar chart Derby component built in vanilla JS (with no d3) to illustrate the difference.

see also:

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

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

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.