PPM CO2/year

_.md

[ Launch: PPM CO2/year ] 3b242f127391f8314e4c by poezn

config.json

{"description":"PPM CO2/year","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data_yearly.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data_monthly.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data_yearly.tsv":{"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},"data_yearly.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"content.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data_monthly.csv":{"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/WZMxXPv.png"}

content.svg

data_monthly.csv

data_yearly.csv

inlet.js

var data_raw = tb["data_yearly"];
var data_raw_monthly = tb["data_monthly"];

var data = _.map(data_raw, function(d, i) {
  return {
    "dt": new Date(d.year, 0, 1),
    "ppm": parseFloat(d.ppm)
  }
});

var dataMonthly = _.map(data_raw_monthly, function(d, i) {
  return {
    "dt": new Date(d.year, d.month, 1),
    "ppm": parseFloat(d.average),
    "ppm-trend": parseFloat(d.trend)
  }
});

var w = 500,
    h = 235;

var gChart = g.select("#chart");

var scaleX = d3.time.scale()
.domain(d3.extent(data, function(d) { return d.dt; }))
.range([0, w]);

var scaleY = d3.scale.linear()
.domain(d3.extent(data, function(d) { return d.ppm; }))
.range([h, 0]);

var line = d3.svg.line()
.x(function(d, i) { return scaleX(d.dt); })
.y(function(d, i) { return scaleY(d.ppm); })

var lineTrend = d3.svg.line()
.x(function(d, i) { return scaleX(d.dt); })
.y(function(d, i) { return scaleY(d["ppm-trend"]); })

gChart.append("path")
.datum(dataMonthly)
.attr({
  "class": "ppm",
  "d": line
});

gChart.append("path")
.datum(dataMonthly)
.attr({
  "class": "ppm trend",
  "d": lineTrend
});

var axisX = d3.svg.axis()
.scale(scaleX)
.ticks(5);

var axisY = d3.svg.axis()
.scale(scaleY)
.orient("left")
.ticks(6);

gChart.select(".axis.x")
.call(axisX);

gChart.select(".axis.y")
.call(axisY);

styles.css

#display {
  background-color: #FFFFFF;
}

#chart path {
  fill: none;
  stroke-width: 2px;
  stroke: #e8e8e8;
}

#chart path.trend {
  stroke: #888888;
}

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