d3 - data driven document

application.route.js

import Route from 'ember-route';
import { setProperties } from 'ember-metal/set';

export default Route.extend({
  activate() {
    document.body.classList.add('standard');
  },
  
  setupController(controller) {
    this._super(...arguments);
    setProperties(controller, {
      name: 'data driven document',
      version: d3.version
    });
  }
});

application.template.hbs

<header class="container-fluid">
  <h1>d3 - {{name}}</h1>
  <h3>version: {{version}}</h3>
</header>

<hr>

<main class="container-fluid">
	{{outlet}}
</main>

helpers.scale.js

import Helper from 'ember-helper';
import { capitalize } from 'ember-string';

export function scale(
	args, {type = "Linear", domain, range, clamp, invert = false}
) {
  let value = args[0];
  type = capitalize(type);
  
  if ("Time" === type) {
    if (!(value instanceof Date)) {
    	domain = [new Date(domain[0]), new Date(domain[1])];
    	value = new Date(value);
    }
  };
  
  const scaler = d3[`scale${type}`]()
  	.domain(domain)
  	.range(range);
  
  if (clamp) scaler.clamp(clamp);
  
  if (invert) {
    if ("Quantize" === type) {
      return scaler.invertExtent(value);
    }
    return scaler.invert(value);
  }

  return scaler(value);
}

export default Helper.helper(scale);

index.route.js

import Route from 'ember-route';

export default Route.extend({
  model() {
    return {
      name: 'demo',
      data: [
        { name: 'Alice', score: 96 },
        { name: 'Billy', score: 83 },
        { name: 'Cindy', score: 91 },
        { name: 'David', score: 96 },
        { name: 'Emily', score: 88 }
      ]
    }
  }
});

index.template.hbs

<div class="card">
  <header class="card-header">{{model.name}}</header>
  <div class="card-content">
    <div class="inner">
    	{{ui-chart model.data}}
    </div>
  </div>
</div>

styles.app.css

*, *::before, &::after {
  box-sizing: border-box;
}

.bar {
  height: 2rem;
  fill: skyblue;
  stroke: black;
  stroke-width: 1;
}

twiddle.json

{
  "version": "0.10.5",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js",
    "hack": "//cdnjs.cloudflare.com/ajax/libs/hack/0.7.7/hack.css",
    "standard": "//cdnjs.cloudflare.com/ajax/libs/hack/0.7.7/standard.css",
    "d3": "//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.js",
    "ember": "2.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {
    "ember-composable-helpers": "*",
    "ember-route-action-helper": "*",
    "ember-truth-helpers": "*"
  }
}

ui-chart.component.js

import Component from 'ember-component';
import get from 'ember-metal/get';

export default Component.extend({
  tagName: 'section',
  classNames: 'chart',
  
  width: '100%',
  height: '200',
  
  didInsertElement() {
    this.chart = d3.select(this.element)
    	.append('svg')
      	.attr('width', get(this, 'width'))
      	.attr('height', get(this, 'height'))
    		.selectAll('g')
    	.data(get(this, 'model'))
    	.enter()
    		.append('g')
    		.attr('transform', (d, i) => `translate(0, ${32 * i})`)
    
    // this.update.exit().remove();
    
    this.chart
      .append('rect')
      .text(d => d.name)
    	.attr('class', 'bar')
    	.style('width', d => d.score)
    
    this.chart
    	.append('text')
    	.text(d => d.name)
    	.attr('y', 18)
  }
}).reopenClass({ positionalParams: ['model'] });