ember-visualizations

Basic Ember.js visualizations built in D3.

View the Project on GitHub cmeiklejohn/ember-visualizations

Ember Visualizations

Ember Visualizations provides basic integration between Ember.js and D3 for common graphs and charts.

Ember Visualizations is currently under development. Use at your own risk. And, as always, contributions are greatly appreciated!

Examples

Currently, Ember Visualizations supports generation of responsive Time Series and Histogram visualizations. Special thanks to Mike Bostock for the examples I took from his collection of D3 gists.

Basic Histogram

Setup a basic histogram with a set width and height with a custom formatter for the x-axis. Margins default to zero, so axis labels are not visible.

Histogram with Responsive SVG

Setup a basic histogram inside of a container, binding the width of the rendered SVG to the outer container to allow it to grow with the container preserving the original aspect ratio.

Time Series

Setup a basic line graph inside of a container, binding the width of the rendered SVG to the outer container to allow it to grow with the container preserving the original aspect ratio.

Building Ember Visualizations.

  1. Run rake to build.

Testing

Setup

  1. Install Ruby 1.9.2+.

  2. Install Bundler: gem install bundler

  3. Run bundle inside the project root to install the gem dependencies.

In Your Browser

  1. To start the development server, run bundle exec rackup.

  2. Then visit: http://localhost:9292/tests/index.html?package=all.

From the CLI

  1. Install phantomjs from http://phantomjs.org

  2. Run bundle exec rake test.

  3. (Mac OS X Only) Run bundle exec rake autotest to automatically re-run tests when any files are changed.

Documentation

Preview API documenation

Build API documentation