Skip to content
Angular, D3 dashboard
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
test
.bowerrc
.editorconfig
.gitattributes
.gitignore
.jshintrc
.travis.yml
Gemfile
Gruntfile.js
README.md
bower.json
karma-e2e.conf.js
karma.conf.js
package.json

README.md

AngularJS Dashboard with D3JS

This is a simple implementation of D3JS in an Angular app. It's not meant to be a finished product, but just an example of how you might integrate the two.

The data is just made up, meant to model traffic to an app or website.

Usage

This project is scaffolded from Yeoman using generator-angular, so any standard grunt commands are available.

npm install && bower install
grunt serve

Notes

Data

All the data is provided as flat JSON files, so you can see how you might query an actual API. A finished app would probably not use a JSON file to serve data! On the other hand, all the models in Angular return promise objects, which is how I'd normally return data.

Styles

The basic styles are provided by Twitter Bootstrap. Since this project isn't really concerned with styles, I didn't spend a great deal of time on that. However, any custom styles written are in atomic design layout with BEM naming system.

Facebook Integration

I'd planned to do a more thorough Facebook integration, but ultimately moved on to other work. You can probably just ignore anything FB related. The plan was to allow sharing of links to a FB wall.

Sources

This project makes use of several other projects, notably

  1. AngularJS & D3JS (of course!)
  2. Angular UI Bootstrap directives
  3. AngularJS NVD3 directives
  4. Angular EasyFB
You can’t perform that action at this time.