A set of AngularJS directives that provides a declarative syntax for building common charts using D3.
AngularD3 is available via Bower as angularD3
bower install angularD3
AngularD3 is available via NPM as angular_d3
npm install angular_d3
This provides an AngularJS module called ad3
which in turn provides a
declarative HTML syntax for using D3 with AngularJS. The syntax has been
inspired in part by Radian however
at the time of starting this Radian was not available as an OSS project.
The goals of AngularD3 are:
d3Chart
directive which provides d3ChartController
analagously to ngFormController
The overall goal of this project is to create a basic set of D3
directives that are sufficiently complete for flexible
charts of most common types. To start: Bar, Line, Area, Pie, Arc. Additional
chart elements, can be added either to enhance existing chart types or to create
new ones simply by requiring d3ChartController
.
AngularD3 is designed to provide enough flexibility to allow you to extend it with custom directives to do anything you could conceive of with D3 with no limitations, but still provide a convenient set of default functionality. Creating most simple graphs should be built in, while unlimited customization is still possible with relative ease.
If you have ideas and are interested in lending a hand, please open an issue, submit a pull request or just ping me @chrismnicola. This could be the beginning of beautiful friendship.
The directives are meant to be used to compost charts like so:
<d3-data src="https://github.com/WealthBar/angular-d3/raw/master/data/data.csv" data="line" columns="year, savings, total, optimal"></d3-data>
<d3-data src="https://github.com/WealthBar/angular-d3/raw/master/data/donutData.csv" data="pie" columns="age,population"></d3-data>
<div d3-chart data="line" margin="{ top: 20, right: 30, bottom: 40, left: 20 }">
<d3-axis name="year" label="Year" extent="true" orientation="bottom" ticks="5"></d3-axis>
<d3-axis name="savings" label="Deposits" orientation="left" ticks="5"></d3-axis>
<d3-axis name="total" label="Savings" orientation="right" ticks="5"></d3-axis>
<d3-line x="year" y="optimal" yscale="total"></d3-line>
<d3-area x="year" y="total"></d3-area>
<d3-bars x="year" y="savings"></d3-bars>
</div>
The d3-chart
directive will first append <svg class="d3"><g></g></svg>
to
itself and then each inner directives will attach their own elements, using D3,
from there. The d3ChartController
provides access to its root <g></g>
element via
getChart()
so that child directives can append themselves.
The d3-data
directive provides a way of declaratively binding data, but this
is entirely optional and it simply is a convenient way to bind a CSV data from
any url directly to your current scope.
Documentation will be forthcoming as things develop but for now you will have to rely on a quick reading of the code.
This project uses NPM and Webpack. To run it clone this repo and run:
npm install
npm start
You can build a minified angularD3.js
which will be saved in /dist
by running
npm run-script build
You can also update the docs which will be saved in /docs
by running
npm run-script docs
If you have any other ideas for me, or feel like contributing to help add any of this missing functionality, I encourage you to submit a pull request.
Angular-D3 is free software under the MIT licence and may be redistributed under the terms specified in the MIT-LICENSE file.