All examples By author By category About

dhoboy

Full window Github gist

Beijing Air Quality 3

Beijing Air Quality Data recorded at the US Embassy in Beijing over the past 8 years and fed into Mike's Calendar block.

Data is from US State Department and is not fully validated or verified.

This example has a different mouseover interaction than Beijing Air Quality 2

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
  shape-rendering: crispEdges;
  width: 1375px;
}

.day {
  fill: #f0f0f0;
  stroke: #ccc;
}

.month {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}

.yearLabel {
  font-size: 18px;
}

.tooltip {
  width: 350px;
  background-color: #f7f7f7;
  padding: 3px 12px;
  font-family: sans-serif;
  border: 1px solid #bbbbbb;
  box-shadow: 1px 1px 4px #bbbbbb;
}

.info {
  font-size: 12px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke: #a6cee3;
  stroke-width: 2px;
  stroke-linecap: round;
}

h5 {
  font-size: 18px;
  margin-left: 10px;
}
</style>
<body>
<h5>Concentration of Particluate Matter less than 2.5 micrometers in diameter</h5>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
/* namespacing */
var m = { l: {top: 10, right: 25, bottom: 35, left: 35}, c: 14 }; // margin
var c = { width: 960, height: 136, cellSize: 17, format: d3.time.format("%x") }; // calendars
var l = { width: 350 - m.l.left - m.l.right, height: 200 - m.l.top - m.l.bottom }; // linegraph

var color = d3.scale.threshold()
    .domain([51, 101, 151, 201, 301])
    .range(["#1a9850", "#fee08b", "#f46d43", "#d73027", "#a50026", "#67001f"]);

var getYear = d3.time.format("%Y"); // getYear(new Date("datestring")) => 2008, etc
var getMonth = d3.time.format("%m");
var getDay = d3.time.format("%d");

l.x = d3.scale.linear() // x is hours in the day
  .domain([0, 23])
  .range([0, l.width]);

l.y = d3.scale.linear() // y is value
  .domain([0, 1000])
  .range([l.height, 0]);

l.line = d3.svg.line()
  .x(function(d) { return l.x(d.hour) })
  .y(function(d) { return l.y(d.value) })
  .interpolate("linear");

l.xAxis = d3.svg.axis()
  .scale(l.x)
  .orient("bottom")
  .ticks(24);

l.yAxis = d3.svg.axis()
  .scale(l.y)
  .orient("left")
  .ticks(10);

var calendars = d3.select("body").selectAll("svg")
    .data(d3.range(2008, 2016))
  .enter().append("svg")
    .attr("width", c.width)
    .attr("height", c.height + m.c)
  .append("g")
    .attr("transform", "translate(" + ((c.width - c.cellSize * 53) / 2) + "," + (c.height - c.cellSize * 7 - 1) + ")");

calendars.append("text")
    .attr("transform", "translate(-6," + c.cellSize * 3.5 + ")rotate(-90)")
    .attr("class", "yearLabel")
    .style("text-anchor", "middle")
    .text(function(d) { return d; });

calendars.selectAll(".month")
    .data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
  .enter().append("path")
    .attr("class", "month")
    .attr("d", monthPath);

var tooltip = d3.select("body")
    .append("div")
      .attr("class", "tooltip")
      .style("position", "absolute")
      .style("z-index", "10")
      .style("visibility", "hidden");

var tooltipInfo = tooltip.append("pre")
    .attr("class", "info");

var tooltipGraph = tooltip.append("svg")
      .attr("width", l.width + m.l.right + m.l.left)
      .attr("height", l.height + m.l.top + m.l.bottom)
    .append("g")
      .attr("transform", "translate(" + m.l.left + "," + m.l.top + ")");

tooltipGraph.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + l.height + ")")
  .call(l.xAxis)
  .append("text")
    .attr("transform", "translate(312, 32)")
    .style("text-anchor", "end")
    .text("Hour of the day");

tooltipGraph.append("g")
  .attr("class", "y axis")
  .call(l.yAxis)
  .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("PM2.5");

var data = {}, remaining = 8; // parallel loading csv code from here: https://groups.google.com/forum/#!msg/d3-js/3Y9VHkOOdCM/YnmOPopWUxQJ
d3.csv("/d/4c8f05129838a63ec90930f8c46262f0/Beijing_2008_HourlyPM2.5_created20140325.csv", function(data_2008) {
  data.yr_2008 = data_2008;
  if (!--remaining) draw();
})

d3.csv("/d/4c8f05129838a63ec90930f8c46262f0/Beijing_2009_HourlyPM25_created20140709.csv", function(data_2009) {
  data.yr_2009 = data_2009;
  if (!--remaining) draw();
})

d3.csv("/d/4c8f05129838a63ec90930f8c46262f0/Beijing_2010_HourlyPM25_created20140709.csv", function(data_2010) {
  data.yr_2010 = data_2010;
  if (!--remaining) draw();
})

d3.csv("/d/4c8f05129838a63ec90930f8c46262f0/Beijing_2011_HourlyPM25_created20140709.csv", function(data_2011) {
  data.yr_2011 = data_2011;
  if (!--remaining) draw();
})

d3.csv("/d/4c8f05129838a63ec90930f8c46262f0/Beijing_2012_HourlyPM2.5_created20140325.csv", function(data_2012) {
  data.yr_2012 = data_2012;
  if (!--remaining) draw();
})

d3.csv("/d/4c8f05129838a63ec90930f8c46262f0/Beijing_2013_HourlyPM2.5_created20140325.csv", function(data_2013) {
  data.yr_2013 = data_2013;
  if (!--remaining) draw();
})

d3.csv("/d/4c8f05129838a63ec90930f8c46262f0/Beijing_2014_HourlyPM25_created20150203.csv", function(data_2014) {
  data.yr_2014 = data_2014;
  if (!--remaining) draw();
})

d3.csv("/d/4c8f05129838a63ec90930f8c46262f0/Beijing_2015_HourlyPM25_created20160201.csv", function(data_2015) {
  data.yr_2015 = data_2015;
  if (!--remaining) draw();
})

function draw() {
  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";
    });
  });

var flatData = d3.merge(data.map(function(d) { return d.value; }));

var key = { "#1a9850": "Good", "#fee08b": "Moderate", "#f46d43": "Unhealthy for sensitive groups",
              "#d73027": "Unhealthy", "#a50026": "Very Unhealthy", "#67001f": "Hazardous" };

var calBounds = { "cal2008": { top: 100 }, "cal2015": { top: 1165 } };

d3.keys(calBounds).forEach(function(cal) {
    calBounds[cal].bottom = calBounds[cal].top + 114;
  });

rect
    .style("fill", function(d) { // d here is the date sring for each day
      if (dailyAvg[d] && dailyAvg[d] !== "N/A") {
        return color(dailyAvg[d]);
      }
    })
    .on("mouseover", function(d) {
      tooltipInfo.text("")
      var reading = d3.round(dailyAvg[d], 2) + " µg/cu PM2.5" + "\nAir Quality: " + key[color(dailyAvg[d])]; // valid 24 hour average

if (dailyAvg[d] == "N/A") { // incomplete reading for the day, still can graph something on the hour by hour breakdown
        reading = "Data Incomplete\nAir Quality: Data Incomplete";
      }

if (!dailyAvg[d]) {
        reading = "No Data\nAir Quality: No Data";
      }

tooltipInfo.text(
        "Date: " + d + "\nReading: " + reading
      );

var day = new Date(d);
      var yearKey = "yr_" + getYear(day);

var dayData = data.filter(function(d) {
        return d.key == yearKey;
      });

dayData = dayData[0].value.filter(function(d) {
        var date = new Date(d["Date (LST)"].split(" ")[0]);
        return (getDay(date) == getDay(day)-1 && getMonth(date) == getMonth(day));
      }).map(function(d) {
        return { hour: +d.Hour, value: +d.Value };
      });

tooltip.select(".line").remove();

tooltipGraph.append("path")
        .datum(dayData)
        .attr("class", "line")
        .attr("d", l.line);

return tooltip.style("visibility", "visible");
    })
    .on("mousemove", function() {
      var y = d3.event.pageY;
      var currentCal = "";

d3.keys(calBounds).forEach(function(cal) {
        if (y >= calBounds[cal].top && y <= calBounds[cal].bottom) {
          currentCal = cal;
        }
      });

calendars.selectAll(".month").on("mouseover", function() {
      return tooltip.style("visibility", "visible")
    })
}

function monthPath(t0) {
  var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
      d0 = t0.getDay(), w0 = d3.time.weekOfYear(t0),
      d1 = t1.getDay(), w1 = d3.time.weekOfYear(t1);

return "M" + (w0 + 1) * c.cellSize + "," + d0 * c.cellSize
      + "H" + w0 * c.cellSize + "V" + 7 * c.cellSize
      + "H" + w1 * c.cellSize + "V" + (d1 + 1) * c.cellSize
      + "H" + (w1 + 1) * c.cellSize + "V" + 0
      + "H" + (w0 + 1) * c.cellSize + "Z";
}

</script>

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