C3

c3-chart.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  width: 600,
  height: 300,
  data: [ 30, 10, 5, 8, 15, 10 ],
  color: 'red',
  yScale: function() {
  	return d3.scale.linear()
    	.domain([0, d3.max(this.props.data)])
      .range([0, this.props.height]);
  },
  
  xScale: function() {
		return d3.scale.ordinal()
      .domain(d3.range(this.get('data.length')))
      .rangeRoundBands([0, this.get('width')], 0.05); 
  },
  
  d3Data: Ember.computed('data.[]', function() {
    return this.get('data').map((point, index) => {

    	return {
        point,
        color: this.get('color'),
      	width: this.get('xScale').rangeBand(),
      	height: this.get('yScale')(point),
        x: this.get('xScale')(index),
      	y: this.get('height') - this.get('yScale')(point),
      }
    })
  }),
});

c3-chart.template.hbs

I AM A CHART
<svg width={{width}} height={{height}}>
	{{#each d3Data as |point i|}}
  	{{point.point}}
  {{/each}}
</svg>

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  init() {
    console.log(d3)
  },
});

templates.application.hbs

<h1>C3PO</h1>
<br>
<br>
{{c3-chart}}
<br>
<br>

twiddle.json

{
  "version": "0.11.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "d3":"https://d3js.org/d3.v4.min.js",
    "ember": "2.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2"
  },
  "addons": {}
}