$ bower install d3 –save
$ ember g component d3-code

The bower command will install D3 and save it to the bower.json file. The component will end up holding all our D3 code.

// ember-cli-build.js
/*jshint node:true*/
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
    var app = new EmberApp(defaults, {
      // Add options here
});

app.import('bower_components/d3/d3.js');
return app.toTree();
};

This file is where we can add all our third-party libraries. To add D3, we have to add the app.import statement pointing to the directory where the D3 library is. At this point, D3 will be available to use anywhere in the application.

<div id='holder'></div>

This will be our placeholder for the animation we'll be creating later.

// app/components/d3-code.js
import Ember from 'ember';

export default Ember.Component.extend({
    didInsertElement() {

      let svgContainer = d3.select('#holder').append('svg').attr('width',700)
      .attr('height',700);


      svgContainer.append('circle').attr('cx',250)
      .attr('cy',250)
      .attr('r', 100)
      .transition()
      .attr('cx',500)
      .attr('cy',450)
      .duration(2000)
      .style('fill','red');

    }
});

This component's purpose is to use D3 to create a new svg tag and a new circle object in it. To accomplish this, we want to render it on screen after the component loads. Ember.js views (components) have didInsertElement, willInsertElement, and willDestroyElement hooks. These all correspond to different points in the component's application life cycle.

The willInsertElement hook takes place after the view has rendered but before it has been inserted into the DOM. The didInsertElement hook occurs after the view has been inserted into the DOM. It's the most useful hook to use when dealing with third-party libraries such as D3. The willDestroyElement hook is called before the element is removed from the DOM. This is a good place to put code that removes event handlers that you might have added.

The svgContainer variable creates the svg tag and appends it to the div holder we created earlier. The circle variable appends the circle tag that will be animated.

// app/templates/application.hbs

{{d3-code}}

This adds the component to the application template so that it can be rendered.

The circle will move from the top left-hand side corner to the bottom right-hand side corner after the page loads. This occurs after the component is completely rendered on screen.