schanges

_.md

[ Launch: schanges ] 7223700 by kevinwestern

config.json

{"description":"schanges","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/1gqhBLj.png","inline-console":false}

inlet.js

var years = [2010, 2011, 2012, 2013];
var salary = [80000, 88000, 100000, 105000];
var multiplier = [1, 1.2, 1.3, 1.1];

var margin = {top: 28, right: 20, bottom: 30, left: 100};
var width = 316 - margin.left - margin.right;
var height = 156 - margin.top - margin.bottom;

var BAR_WIDTH = 10;

var normalizedSalaries = salary.map(function(s) { return s / 1000; });

var data = [];
for (var i = 0; i < years.length; i++) {
  data.push({
    year: years[i],
    salary: normalizedSalaries[i],
    multiplier: multiplier[i]
  }); 
}

var sortedMultipler = [].concat(multiplier);
sortedMultipler.sort();




var yMin = d3.min(normalizedSalaries);
var yMax = d3.max(normalizedSalaries);
var yMedian = yMax / 2;

var xScale = d3.scale.ordinal().domain(years).rangeRoundBands([0, width], 0.412);
var yScale = d3.scale.linear().domain([0, yMax]).range([height, 0]);
var multiplierYScale = d3.scale.ordinal().domain(sortedMultipler).rangeRoundBands([height, 0]);

var xAxis = d3.svg.axis().scale(xScale).orient('bottom').tickValues(years).tickFormat(d3.format('d')).tickSize(0);
var yAxis = d3.svg.axis().scale(yScale).orient('right').tickValues([0, yMedian, yMax]).tickSize(0);
var mulitplierAxis = d3.svg.axis().scale(multiplierYScale).orient('left').tickSize(0).ticks(5);

var line = d3.svg.line().
	x(function(d){ return xScale(d.year) + xScale.rangeBand() / 2; }).
	y(function(d){ return multiplierYScale(d.multiplier); });

var svg = d3.select('svg').append('g').
    attr('width', width + margin.left + margin.right).
    attr('height', height + margin.top + margin.bottom).
    attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');


svg.selectAll('rect').
  data(data).
  enter().
  append('rect').
  attr('class', 'column').
  attr('width', xScale.rangeBand()).
  attr('height', function(d) {
    return height - yScale(d.salary);
  }).
  attr('x', function(d) {
    return xScale(d.year);
  }).
  attr('y', function(d) {
    return yScale(d.salary);  
  });

svg.append('path').
    datum(data).
	attr('class', 'line').
	attr('d', line);

svg.append('g').
    attr('class', 'axis xaxis').
    attr('transform', 'translate(0, ' + height + ')').
    call(xAxis);

svg.append('g').
    attr('class', 'axis yaxis').
    attr('transform', 'translate(' + width + ', 0)').
    call(yAxis).
    append('text').
    text('USD (THOUSANDS)').
    attr("transform", "rotate(-90) translate(0,40)").
	attr('x', -height / 2).
    style("text-anchor", "middle");

svg.append('g').
    attr('class', 'axis yaxis multiplier').
    attr('transform', 'translate(0, 0)').
    call(mulitplierAxis).
    append('text').
    text('multiplier').
    attr('transform', 'rotate(-90) translate(0, -30)').
    attr('x', -height / 2).
    style('text-anchor', 'middle');

style.css

.axis path,
.axis line {
  fill: none;
  shape-rendering: crispEdges;
  stroke: #B9B9C9;
}


.xaxis line, .xaxis path {

}

.yaxis path {
 fill: none;
 stroke: none;
}

.yaxis.multiplier text {
 fill: #0077DB;
}

rect.column {
 fill: #ccc; 
}

.axis text {
 font-size: 12px;
 fill: gray;
}

.line {
 fill: none;
 stroke: #0077DB;
 stroke-width: 1.5px;
}

body {
 background-color: white 
}