Skip to content
[Deprecated] Ember DC - Multi-Dimensional charts, graphs, maps, data-table with crossfilter and d3.js (dc.js)
JavaScript CSS
Latest commit c968e00 Aug 19, 2014 @andrewreedy Merge pull request #2 from gunn/master
Register version, remove moment.js dependency.

Ember DC (dc.js)


Ember DC - Multi-Dimensional charts built to work natively with crossfilter rendered with d3.js (dc.js)

Ember Component Wrappers for dc.js

(still working on abstracting all of the classes, will add more detailed examples / api instructions when I'm finished) If you'd like to help check out the master dc.js api docs to read more about the mixins and charts.

Haven't had an ember project recently so didn't finish this please feel free to continue wrapping dc and submit pull requests



Install via bower (optional)

bower install --save ember-dc

Include ember-dc.js in your project (this step is up to you)

Then extend your Ember app with Jquery or your favorite object extension function

App = $.extend(App, EmberDC);

Now you can use the EmberDCMixin and components. Please refer to the example app for more detail.


  • Responsive Charts
  • Multiple Line Chart
  • Bar Chart
  • Bubble Chart
  • Coordinate Grid Chart
  • Data Table
  • Heat Map
  • Number Display
  • Pie Chart
  • Row Chart
  • Scatter Plot
  • Stackable Chart
  • Geo Choropleth Chart (Map)

If you want more features than this provides, file an issue. Feature requests/contributions are welcome.

Example usage

Components (templates)

// Line Chart Example

// Pie Chart Example

// Geo Choropleth Chart Example (US Map)

// Row Chart


App.IndexController = Ember.ArrayController.extend(EmberDCMixin, {

   * @property metrics
   * @type {Array}
   * Computed Metrics
  metrics: [
    {value:'sighting',       label: 'Sightings'}

  startDate: moment().subtract('years', 50).toDate(),
  endDate: moment().subtract('years', 4).toDate(),

   * @method _createDimensions
   * Create the defined dimensions from the controller.
   * @return {void}
   * @private
  _createDimensions: function() {
    var self = this;

    var content = Ember.get(this, 'content');

    content.forEach(function(d, i) { = moment(d.sighted, 'YYYYMMDD').toDate();

    d3.json("us-states.json", function (statesJson) {
      self.set('usStates', statesJson);

    // Date Dimension
    this.set('', this._crossfilter.dimension(function(d) { return; }));
    this.set('dimensions.state', this._crossfilter.dimension(function (d) { return d.state; }));
    this.set('dimensions.daysOfWeek', this._crossfilter.dimension(function (d) {
      var day =;
      var name=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
      return day+"."+name[day];

   * @method _createGroups
   * Create the defined groups from the controller.
   * @return {void}
   * @private
  _createGroups: function() {
    this.set('groups.all', this._crossfilter.groupAll());
    this.set('groups.daysOfWeek', this.get('dimensions.daysOfWeek').group());
    this.set('groups.dateComposite', this.get('').group(d3.time.month).reduce(
      function(p, v){
          return {
            sighting: p.sighting+1
      function(p, v){
        return {
          sighting: p.sighting-1
      function(){return {sighting:0};}

    this.set('groups.state', this.get('dimensions.state').group());


Building Ember DC For Development

Ember DC uses node.js and gulp as a build system, These two libraries will need to be installed before building.

To build Ember DC, clone the repository, and run npm install to install build dependencies and gulp to build the library.

Builds of Ember DC will be placed in the root directory

Building Example App

Navigate to the example-app directory.

Run bower install to install the dependencies.

Run gulp to build the example app.

Run node server.js to start the server.

Open http://localhost:3001 in the browser.

Something went wrong with that request. Please try again.