coal retirement US

_.md

[ Launch: Tributary inlet ] e70ab6dfaf90b9900ff9 by poezn

config.json

{"description":"coal retirement US","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"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},"styles.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,"ajax-caching":true,"inline-console":true,"thumbnail":"http://i.imgur.com/OFDdi1f.png"}

data.json

[{"450ppm":330.72519,"60years":0.0,"40years":0.0,"mats":0.0,"existing":330.72519,"reductions":0.0},{"450ppm":325.72454125,"60years":0.8190875,"40years":3.5,"mats":7.5,"existing":318.9061025,"reductions":0.0},{"450ppm":320.7238925,"60years":1.638175,"40years":7.0,"mats":15.0,"existing":307.087015,"reductions":0.0},{"450ppm":315.72324375,"60years":2.4572625,"40years":10.5,"mats":22.5,"existing":295.2679275,"reductions":0.0},{"450ppm":310.722595,"60years":3.27635,"40years":14.0,"mats":30.0,"existing":283.44884,"reductions":0.0},{"450ppm":305.72194625,"60years":4.0954375,"40years":17.5,"mats":37.5,"existing":271.6297525,"reductions":0.0},{"450ppm":300.7212975,"60years":4.914525,"40years":21.0,"mats":45.0,"existing":259.810665,"reductions":0.0},{"450ppm":295.72064875,"60years":5.7336125,"40years":24.5,"mats":52.5,"existing":247.9915775,"reductions":0.0},{"450ppm":290.72,"60years":6.5527,"40years":28.0,"mats":60.0,"existing":236.17249,"reductions":0.0},{"450ppm":276.9286,"60years":8.69359,"40years":32.46554,"mats":60.0,"existing":229.56606,"reductions":0.0},{"450ppm":263.1372,"60years":10.83448,"40years":36.93108,"mats":60.0,"existing":222.95963,"reductions":0.0},{"450ppm":249.3458,"60years":12.97537,"40years":41.39662,"mats":60.0,"existing":216.3532,"reductions":0.0},{"450ppm":235.5544,"60years":15.11626,"40years":45.86216,"mats":60.0,"existing":209.74677,"reductions":0.0},{"450ppm":221.763,"60years":17.25715,"40years":50.3277,"mats":60.0,"existing":203.14034,"reductions":0.0},{"450ppm":207.9716,"60years":21.688966,"40years":51.05677,"mats":60.0,"existing":193.073472,"reductions":4.905982},{"450ppm":194.1802,"60years":26.120782,"40years":51.78584,"mats":60.0,"existing":183.006604,"reductions":9.811964},{"450ppm":180.3888,"60years":30.552598,"40years":52.51491,"mats":60.0,"existing":172.939736,"reductions":14.717946},{"450ppm":166.5974,"60years":34.984414,"40years":53.24398,"mats":60.0,"existing":162.872868,"reductions":19.623928},{"450ppm":152.806,"60years":39.41623,"40years":53.97305,"mats":60.0,"existing":152.806,"reductions":24.52991},{"450ppm":153.048,"60years":49.28113,"40years":54.01877,"mats":60.0,"existing":147.801362,"reductions":19.623928},{"450ppm":153.29,"60years":59.14603,"40years":54.06449,"mats":60.0,"existing":142.796724,"reductions":14.717946},{"450ppm":153.532,"60years":69.01093,"40years":54.11021,"mats":60.0,"existing":137.792086,"reductions":9.811964},{"450ppm":153.774,"60years":78.87583,"40years":54.15593,"mats":60.0,"existing":132.787448,"reductions":4.905982},{"450ppm":154.016,"60years":88.74073,"40years":54.20165,"mats":60.0,"existing":127.78281,"reductions":0.0}]

inlet.js

var rawData = tb.data;

var w = 400,
    h = 200;

var data = [
  _.pluck(rawData, "existing"),
  _.pluck(rawData, "reductions"),
  _.pluck(rawData, "mats"),
  _.pluck(rawData, "40years"),
  _.pluck(rawData, "60years")
];

var scaleX = d3.scale.ordinal()
.domain(d3.range(24))
.rangeBands([0, w], 0.05);

var scaleY = d3.scale.linear()
.domain([0, 330])
.range([0, h]);

var colors = ["#e0e0e0", "#e2b45e", "#bcdb78", "#739cbb", "#bb63bc"];

var layers = _.map(data, function(series) {
  return _.map(series, function(d, i) {
    return {x: i, y: scaleY(d)};
  })
});

var stack = d3.layout.stack()
      .offset("zero")

var g = g.append("g")
.attr({
  "transform": "translate(50, 50)"
});

var gLayers = g.selectAll("g")
.data(stack(layers))
.enter().append("g")
.attr({
  "fill": function(d, i) {
    return colors[i];
  }
});

gLayers.selectAll("rect")
.data(function(d) {
	return d;
})
.enter().append("rect")
.attr({
  "transform": function(d) {
    var tx = scaleX(d.x),
        ty = h - d.y0 - d.y
    return "translate(" + [tx, ty].join(" ") + ")"
  },
  "height": function(d) {
    return d.y
  },
  "width": scaleX.rangeBand
})

var line = d3.svg.line()
.x(function(d, i) { return scaleX(d.idx) + 10; })
.y(function(d, i) { return h - scaleY(d.value); })

g.append("path")
.datum(_.pluck(rawData, "450ppm"))
.attr({
  "d": line,
  "fill": "none",
  "stroke": "#000",
  "stroke-width": 1
});

var _450ppm = _.pluck(rawData, "450ppm");
var data450ppm = _.map([0, 3, 8, 13, 18, 23], function(d) {
  return {idx: d, value: _450ppm[d]}
});

g.append("path")
.datum(data450ppm)
.attr({
  "d": line,
  "fill": "none",
  "stroke": "#969696",
  "stroke-width": 3
})

g.selectAll("circle")
.data(data450ppm)
.enter().append("circle")
.attr({
  "cx": function(d, i) {
    return scaleX(d.idx) + 8
  },
  "cy": function(d) {
    return h - scaleY(d.value)
  },
  "r": 5,
  "fill": "#838383",
  "stroke-width": 2,
  "stroke": "#FFF"
})

styles.css

#display {
background-color: #FFF;
}