D3 Sandbox

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: '{placeholder}',
      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({
});

index.template.hbs

<p>Here we go</p>

styles.app.css

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

strong {
  color: red;
  font-size: 1.2rem;
}

@media screen and (max-width: 768px) {
	.grid {
  	flex-direction: row;
    justify-content: space-between;
	}
}

.grid > .form-group {
  width: 49%;
}

.grid > .form-group.full {
  width: 100%;
}

.form-group > label {
  font-weight: bold;
  user-select: none;
}

.form-group > .help {
  position: relative;
  top: -33px;
  left: 27px;
}

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": "*"
  }
}