Tributary inlet

_.md

[ Launch: Tributary inlet ] 7251821 by kevinwestern

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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},"style.css":{"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/0OzDu3v.png"}

inlet.js

var svg = d3.select('svg').attr('width', 650).attr('height', 450).append('g');

var data = [{
  quarter: "Q1 2011",
  multiplier: 2,
  bonus: 25000
}, {
  quarter: "Q2 2011",
  multiplier: 4,
  bonus: 35000
}, {
  quarter: "Q3 2011",
  multiplier: 4.2,
  bonus: 30000
}, {
  quarter: "Q4 2011",
  multiplier: 2.5,
  bonus: 28500
}, {
  quarter: "Q1 2012",
  multiplier: 5,
  bonus: 41000
}];

var multipierData = data.map(function(d) {
  return { quarter: d.quarter, multiplier: d.multiplier };
});

var bonusData = data.map(function(d) {
  return { quarter: d.quarter, bonus: d.bonus };
});

var multiplierScale = d3.scale.linear().domain([2, 5]).range([400, 0]);
var bonusScale = d3.scale.linear().domain([12000, 41000]).range([400, 0]);
var xScale = d3.scale.ordinal().domain(data.map(function(d){ return d.quarter; })).rangeBands([0, 600]);
var line = d3.svg.line().
    x(function(d) { return xScale(d.quarter) + barWidth / 2; }).
    y(function(d) { return multiplierScale(d.multiplier); });
var barWidth = 10;

svg.selectAll('rect.bonus').data(bonusData).enter().append('rect').
  attr('x', function(d) {
    return xScale(d.quarter);
  }).
  attr('fill', 'red').
  attr('class', 'bonus').
  attr('y', function(d) {
    return bonusScale(d.bonus);
  }).attr('height', function(d) {
    return 400 - bonusScale(d.bonus);
  }).
  attr('width', barWidth);

svg.append('path').datum(multipierData).
  attr('class', 'multiplier-line').
  attr('d', line);

svg.selectAll('circle').data(multipierData).enter().append('circle').
  attr('cx', function(d){ return xScale(d.quarter) + barWidth / 2; }).
  attr('cy', function(d){ return multiplierScale(d.multiplier); }).
  attr('r', 5)

style.css

.multiplier-line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}