Skip to content

Instantly share code, notes, and snippets.

@poezn
Last active August 29, 2015 14:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save poezn/fb5cdd01a933a180f3bf to your computer and use it in GitHub Desktop.
Save poezn/fb5cdd01a933a180f3bf to your computer and use it in GitHub Desktop.
coal retirement EU
{"description":"coal retirement EU","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/RVVpRkT.png"}
[{"450ppm":182.1034,"60years":0.0,"40years":0.0,"lcpd":0.0,"existing":182.1034,"reductions":0.0},{"450ppm":179.7759625,"60years":0.24937375,"40years":2.6875,"lcpd":1.1875,"existing":177.97902625,"reductions":0.0},{"450ppm":177.448525,"60years":0.4987475,"40years":5.375,"lcpd":2.375,"existing":173.8546525,"reductions":0.0},{"450ppm":175.1210875,"60years":0.74812125,"40years":8.0625,"lcpd":3.5625,"existing":169.73027875,"reductions":0.0},{"450ppm":172.79365,"60years":0.997495,"40years":10.75,"lcpd":4.75,"existing":165.605905,"reductions":0.0},{"450ppm":170.4662125,"60years":1.24686875,"40years":13.4375,"lcpd":5.9375,"existing":161.48153125,"reductions":0.0},{"450ppm":168.138775,"60years":1.4962425,"40years":16.125,"lcpd":7.125,"existing":157.3571575,"reductions":0.0},{"450ppm":165.8113375,"60years":1.74561625,"40years":18.8125,"lcpd":8.3125,"existing":153.23278375,"reductions":0.0},{"450ppm":163.4839,"60years":1.99499,"40years":21.5,"lcpd":9.5,"existing":149.10841,"reductions":0.0},{"450ppm":155.95335,"60years":2.65079,"40years":22.038408,"lcpd":9.5,"existing":144.452958,"reductions":3.461244},{"450ppm":148.4228,"60years":3.30659,"40years":22.576816,"lcpd":9.5,"existing":139.797506,"reductions":6.922488},{"450ppm":140.89225,"60years":3.96239,"40years":23.115224,"lcpd":9.5,"existing":135.142054,"reductions":10.383732},{"450ppm":133.3617,"60years":4.61819,"40years":23.653632,"lcpd":9.5,"existing":130.486602,"reductions":13.844976},{"450ppm":125.83115,"60years":5.27399,"40years":24.19204,"lcpd":9.5,"existing":125.83115,"reductions":17.30622},{"450ppm":118.3006,"60years":8.39417,"40years":24.584852,"lcpd":9.5,"existing":118.3006,"reductions":21.323778},{"450ppm":110.77005,"60years":11.51435,"40years":24.977664,"lcpd":9.5,"existing":110.77005,"reductions":25.341336},{"450ppm":103.2395,"60years":14.63453,"40years":25.370476,"lcpd":9.5,"existing":103.2395,"reductions":29.358894},{"450ppm":95.70895,"60years":17.75471,"40years":25.763288,"lcpd":9.5,"existing":95.70895,"reductions":33.376452},{"450ppm":88.1784,"60years":20.87489,"40years":26.1561,"lcpd":9.5,"existing":88.1784,"reductions":37.39401},{"450ppm":84.23736,"60years":25.21229,"40years":26.33731,"lcpd":9.5,"existing":84.23736,"reductions":36.81644},{"450ppm":80.29632,"60years":29.54969,"40years":26.51852,"lcpd":9.5,"existing":80.29632,"reductions":36.23887},{"450ppm":76.35528,"60years":33.88709,"40years":26.69973,"lcpd":9.5,"existing":76.35528,"reductions":35.6613},{"450ppm":72.41424,"60years":38.22449,"40years":26.88094,"lcpd":9.5,"existing":72.41424,"reductions":35.08373},{"450ppm":68.4732,"60years":42.56189,"40years":27.06215,"lcpd":9.5,"existing":68.4732,"reductions":34.50616}]
var rawData = tb.data;
var w = 400,
h = 200;
var data = [
_.pluck(rawData, "existing"),
_.pluck(rawData, "reductions"),
_.pluck(rawData, "lcpd"),
_.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, 182])
.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"
})
#display {
background-color: #FFF;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment