patrickberkeley

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['color'],
  color: null
});

patrickberkeley

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['color'],
  color: 'red'
});

patrickberkeley

import DS from 'ember-data';
export default DS.FixtureAdapter.extend();

patrickberkeley

    App.ApplicationView = Ember.View.extend({
      classNames: ['app'], // Static classes here.
      classNameBindings: ['classForPath'], // Your dynamic path here.
      classForPath: (function() {
        var currentPath = this.get('controller.currentPath') || '';
        currentPath = Ember.String.decamelize(currentPath);
        currentPath = currentPath.split('.').join('-');
        return currentPath;
      }).property('controller.currentPath')
    });

patrickberkeley

this.get('controller.target.location.location.pathname');

patrickberkeley

# Wrapper for mocking AJAX requests with Mockjax - https://github.com/appendto/jquery-mockjax
#
# Arguments:
#
# url         - String, endpoint for request you want to capture
# response    - Object, response you expect to be returned from the endpoint
# opts        - Object (optional)
# opts.type   - String, the HTTP request type. Default 'GET'
# opts.status - Integer, the HTTP response status code. Default 200
# opts.data   - Object, data object passed with request. Default null

patrickberkeley

document.write('<div id="ember-testing-container"><div id="ember-testing"></div></div>')

App.rootElement = '#ember-testing'

App.ApplicationAdapter = DS.FixtureAdapter.extend()

App.setupForTesting()
App.injectTestHelpers()

window.exists = (selector) ->

patrickberkeley

This grouped bar chart is constructed from a CSV file storing the populations of different states by age group. The chart employs conventional margins and a number of D3 features:

• d3.csv - load and parse data
• d3.scale.ordinal - x-position encoding and color encoding
• d3.scale.linear - y-position encoding
• d3.format - SI prefix formatting (e.g., “10M” for 10,000,000)
• d3.max - compute domains
• d3.keys - compute column names
• d3.svg.axis - display axes

patrickberkeley

This simple line chart is constructed from a TSV file storing the closing value of AAPL stock over the last few years. The chart employs conventional margins and a number of D3 features:

• d3.json - load and parse data
• d3.time.format - parse dates
• d3.time.scale - x-position encoding
• d3.scale.linear - y-position encoding
• d3.extent - compute domains
• d3.svg.axis - display axes
• d3.svg.line - display line shape

patrickberkeley

A variation of the example bar chart using a slightly more D.R.Y. style. The visual encoding is represented by two functions and their composition:

• The value accessor returns the value (or property) to encode for a given data object.
• The scale maps this value to a visual display encoding, such as a pixel position.
• The map function represents the composition value ○ scale, mapping from data to display.

Inspired by Andrew Winterman’s post, Tooling for the Lazy Programmer: DRYing up D3.