Air Quality Calendars

Based on Daniel Overstreet's China Air Quality Canvas.

Official State Department color recommendations have been replaced with selected colors from ColorBrewer's RdYlGn diverging scale. Data is not fully validated or verified.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    overflow: hidden;
    margin: 24px 12px;
    font-size: 14px;
    font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  #container {
    display: flex;
  }
  .section {
    display: flex;
    flex-direction: column;
    margin-right: 10px;
  }
  .title {
    width: 100%;
    margin: 12px auto;
    text-align: center;
    font-size: 18px;
  }
  .yearLabel {
    margin-right: 10px;
    color: #666;
  }
  .beijingYear, .chengduYear, .guangzhouYear, .shanghaiYear, .shenyangYear {
    display: flex;
  }
  #beijing .title {
    margin-left: 20px;
  }
  #key {
    display: flex;
    justify-content: space-between;
    margin: 32px;
  }
  .keyEntry span {
    margin: 0 0 0 26px;
    color: #666;
  }
  .keyEntry canvas {
    position: absolute;
    margin-top: -1px;
  }
</style>
<body>
<div id="container">
  <div id="beijing" class="section"></div>
  <div id="chengdu" class="section"></div>
  <div id="guangzhou" class="section"></div>
  <div id="shanghai" class="section"></div>
  <div id="shenyang" class="section"></div>
</div>
<div id="key"></div>
<script src="https://d3js.org/d3.v3.js"></script>
<script>

var cellSize = 3;
var canvasWidth = 160;
var canvasHeight = 34;

var format = d3.time.format("%x");
var color = d3.scale.linear()
  .domain([18, 45, 91, 141, 191, 291, Infinity])
  .range(["#1a9850", "#d9ef8b", "#fee08b", "#fc8d59", "#d73027", "#a50026", "#a50026"]);

var colorMap = d3.scale.ordinal()
  .range(["#1a9850", "#d9ef8b", "#fee08b", "#fc8d59", "#d73027", "#a50026"]);

var cities = ['beijing', 'chengdu', 'guangzhou', 'shanghai', 'shenyang'];
var data = {}; 
var remaining = 30; 
var datasets = ["beijing2008", "beijing2009", "beijing2010", "beijing2011", "beijing2012",
                "beijing2013", "beijing2014", "beijing2015", "beijing2016", "chengdu2012",
                "chengdu2013", "chengdu2014", "chengdu2015", "chengdu2016", "guangzhou2011",
                "guangzhou2012", "guangzhou2013", "guangzhou2014", "guangzhou2015", "guangzhou2016", "shanghai2011", "shanghai2012", "shanghai2013", "shanghai2014", "shanghai2015", "shanghai2016", "shenyang2013", "shenyang2014", "shenyang2015", "shenyang2016"];

(function loadData() {
  datasets.forEach(function(dataset) {
    d3.csv("/d/499741034a2edb844ba3171aa73298d2/" + dataset + ".csv", function(err, d) {
      if (!err) {
        data[dataset] = d;
        --remaining;
      }
      if (!remaining) draw();
    }); 
  }); 
})();

function draw() {
  // turn into array to filter out invalid readings
  data = d3.entries(data);
  
  data.forEach(function(dataset) {
    dataset.value = dataset.value.filter(function(d) { // only want valid readings
      return d["QC Name"] == "Valid" && d["Value"] != "-999";
    });
  });

// turn back into object for daily averages
  data = data.reduce(function(prev, next) {
    prev[next.key] = next.value;
    return prev;
  }, {});
  
  var dailyAvg = {};
  cities.forEach(function(city) {
    d3.range(2008,2017).forEach(function(year) { 
      if (data[city + year]) {
        dailyAvg[city + year] = d3.nest()
          .key(function(d) {
            return format(new Date(d.Year, d.Month - 1, d.Day));
          })
          .rollup(function(hourlyReadings) {
            if (hourlyReadings.length != 24) {
              return "N/A";
            }
            return d3.sum(hourlyReadings, function(d) { return +d.Value; }) / 24;
          })
        .map(data[city + year])  
      } else {
        dailyAvg[city + year] = "No Data";
      }
    });
  });

d3.select("div#beijing").append("div").attr("class", "title").text("beijing");

var beijingDivs = d3.select("div#beijing").selectAll(".beijingYear")
    .data(d3.keys(dailyAvg).filter(function(d) { return /beijing/.test(d)}))
    .enter()
    .append("div")
    .attr("class", "beijingYear");
  
  beijingDivs.append("div") 
    .attr("class", "yearLabel")
    .text(function(d) { 
      return /\d{4}/.exec(d)[0]; 
    })

beijingDivs.append("canvas")
    .attr("width", canvasWidth)
    .attr("height", canvasHeight)
    .attr("id", function(d) { return d; });
  
  d3.select("div#chengdu").append("div").attr("class", "title").text("chengdu");

var chengduDivs = d3.select("div#chengdu").selectAll(".chengduYear")
    .data(d3.keys(dailyAvg).filter(function(d) { return /chengdu/.test(d)}))
    .enter()
    .append("div")
    .attr("class", "chengduYear")
    .append("canvas")
    .attr("width", canvasWidth)
    .attr("height", canvasHeight)
    .attr("id", function(d) { return d; });

d3.select("div#guangzhou").append("div").attr("class", "title").text("guangzhou");
  
  var guangzhouDivs = d3.select("div#guangzhou").selectAll(".guangzhouYear")
    .data(d3.keys(dailyAvg).filter(function(d) { return /guangzhou/.test(d)}))
    .enter()
    .append("div")
    .attr("class", "guangzhouYear")
    .append("canvas")
    .attr("width", canvasWidth)
    .attr("height", canvasHeight)
    .attr("id", function(d) { return d; });

d3.select("div#shanghai").append("div").attr("class", "title").attr("class", "title").text("shanghai");
  
  var shanghaiDivs = d3.select("div#shanghai").selectAll(".shanghaiYear")
    .data(d3.keys(dailyAvg).filter(function(d) { return /shanghai/.test(d)}))
    .enter()
    .append("div")
    .attr("class", "shanghaiYear")
    .append("canvas")
    .attr("width", canvasWidth)
    .attr("height", canvasHeight)
    .attr("id", function(d) { return d; });

d3.select("div#shenyang").append("div").attr("class", "title").text("shenyang");
  
  var shenyangDivs = d3.select("div#shenyang").selectAll(".shenyangYear")
    .data(d3.keys(dailyAvg).filter(function(d) { return /shenyang/.test(d)}))
    .enter()
    .append("div")
    .attr("class", "shenyangYear")
    .append("canvas")
    .attr("width", canvasWidth)
    .attr("height", canvasHeight)
    .attr("id", function(d) { return d; });

var categoryMap = { "good": "good", "moderate": "moderate", "sensitive": "unhealthy for sensitive groups", "unhealthy": "unhealthy", "very": "very unhealthy", "hazardous": "hazardous" };

["good", "moderate", "sensitive", "unhealthy", "very", "hazardous"].forEach(colorMap);

var keyEntries = d3.select("#key").selectAll(".keyEntry")
    .data(["good", "moderate", "sensitive", "unhealthy", "very", "hazardous"])
    .enter()
    .append("div")
    .attr("class", "keyEntry");

keyEntries.append("canvas")
    .attr("width", 20)
    .attr("height", 20)
    .attr("id", function(d) { return d; });

keyEntries.append("span")
    .text(function(d) { return categoryMap[d]; });

var keyCtx = {};
  
  d3.keys(categoryMap).forEach(function(k) {
    keyCtx[k] = document.getElementById(k).getContext("2d");
    drawKey(k, keyCtx[k]);
  });

function drawKey(key, ctx) {
    ctx.fillStyle = colorMap(key);
    ctx.fillRect(0,0,20,20);
  }
}
</script>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js