Bath Air Quality Dashboard

README.md

Air Quality Dashboard using data from Bath Hacked Data Store.

The dashboard looks at average NO2 and PM10 readings over two complete years of data - 2015 and 2016 - from four different air sensors.

Report on Sensor Data Errors can be found here.

GIST includes 7 files:

• air_vis.py - python file which wrangles data into required format
• all_data.csv - chart data initally formatted to fit adapted Peter Cook circular heat map also used for line chart
• stats.csv - separate calculations for DEFRA bar charts
• index.html
• air_final.js - main javascript code
• air_plots.js - separate code for three chart types
• air.css

Final working example with images can be found here

air.css

body{
  font-family: sans-serif;
  font-size: 12px;
}

table{
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  border-spacing: 0px;
}


input[name="station"] {
    display:none;
}
input[name="station"]:checked + label {
    color: blue;
}

input[name="station"]:disabled + label {
    color: lightgrey;
}


.small_text,#pollutant_text {
  font-size: 14px;
}

#stations{
  width: 280px;
  padding: 5px;
}


#input{
  padding: 5px;
  width: 300px;
}
#title{
  font-size: 24px;
  padding: 10px;
  background-color: #303030;
  color: white;
}

#how{
  font-size: 20px;
  text-align: center;
  padding: 10px;
  background-color: #D0D0D0;
  color: black;
}

#aqi{
  width:100%;
  padding: 10px;

}
#minmax{
  width:100px;
  padding: 10px;

}
.aqi_img{
  font-size: 12px;
  text-align: center;
}


.NO2,.PM10,.weather,.parking {
  fill: none;
  stroke-width: 1.5px;
}


#max svg, #limit svg {
  font-family: sans-serif;
  font-size: 10px;
	width: 250px;
	height: 85px;
  align-items: center;
  fill: grey;

}

#max, #limit{
  background-color: white;
}

#labellimit,#labelmax,#aqi_title{
  font-size: 14px;
  background-color: white;
  padding: 10px;
  text-align: left;

}


#pie svg,#greypie svg{
  font-family: sans-serif;
  font-size: 10px;
	width: 290px;
	height: 290px;
}

#greypie,#minmax_td {
  background-color: #F0F0F0;

}
#pie{
  background-color: white;
}

#scale{
  font-size: 20px;
  text-align: center;
  padding: 10px;
  background-color: #585858;
  color: white;
}

#line svg{
  font-family: sans-serif;
  font-size: 10px;
	width: 800px;
	height: 200px;
}


.how_charts{
  background-color: white;
}

#influencers {
  font-size: 20px;
  text-align: center;
  padding: 10px;
  color: white;
  background-color: #909090;
}

.x_axis text, .z_axis text, .y_axis text {
    font-family: sans-serif;
    font-size: 10px;
  }

.x_axis path, .y_axis path,
.x_axis line, .y_axis line,.air_axis line{
    fill: none;
    stroke: #000;
    shape-rendering: geometricPrecision;
}

.z_axis line, .z_axis path {
    fill: none;
    stroke: deepskyblue;
    stroke-width: 2px;
    shape-rendering: crispEdges;
}

.m_axis line, .m_axis path {
    fill: none;
    stroke: grey;
    opacity: 0.8;
    stroke-width: 1px;
    stroke-dasharray: 2,2;
    shape-rendering: crispEdges;
}

.z_axis text, .z_axis tick { display: none; }

.y_axis tick {display: none; }

.weather_axis tick, .weather_axis text, .weather_axis path {display: none; }

.parking_axis tick, .parking_axis text, .parking_axis path {display: none; }

.y_axis path { display: none; }

.x_axis tick, .y_axis tick {
  text-align: left;
  stroke: grey;
	stroke-width: 0.3px;
}



.small_tooltip{
    visibility: hidden;
    position: absolute;
    text-align: left;
    padding: 3px;
    background: white;
    pointer-events: none;
    font-size: 10px;
    width: 50px;
    height: 10px;
}


.tooltip{
    visibility: hidden;
    position: absolute;
    text-align: left;
    padding: 3px;
    background: white;
    pointer-events: none;
    width: 105px;
    font-size: 10px;
    height: 10px;
}

air_final.js

d3.csv("all_data.csv", function(error, data) {
  d3.csv('stats.csv', function(error, stats) {

  if (error) throw error;

  //pollutant description text

  NO2_text = "<br>Nitrogen dioxide (NO2) is of concern to public health" +
  " in high concentrations. Combustion emissions (NOx) oxidise in the" +
    " atmosphere to form NO2.";

  PM10_text = "<br>Particulate matter (PM10) less than or equal to 10 micrometers (microns) " +
   "which in high concentrations are of concern to public health."


 //1. Code to make input/radio buttons responsive - functions first

 function change_buttons(what,text){
     //disables or enables Guildhall and London Road Aurn depending on current pollutant_text
     //sets the pollutant description text
     document.querySelector('input[name="station"]#lra').disabled = what;
     document.querySelector('input[name="station"]#guild').disabled = what;
     document.getElementById('pollutant_text').innerHTML = text;
 }

   function set_stations(){
     //calls change_buttons depending on current pollutant
     if(current_pollutant=='PM10'){
        change_buttons(true,PM10_text)
      } else{
        change_buttons(false,NO2_text)
      }
   }

   function set_vars(){
     //resets current_pollutant, station, time_type - used every time an input is changed
     current_pollutant = document.querySelector('input[name="pollutant"]:checked').value
     station = document.querySelector('input[name="station"]:checked').value
     time_type = document.querySelector('input[name="time"]:checked').value
   }

   //function for the line checkboxes - selects or deselects lines.
   function line_opacity(){
     var boxes = document.querySelectorAll('input[name="line"]');
     for (i = 0; i < boxes.length; ++i) {
         if (boxes[i].checked == true){
           d3.selectAll("." + boxes[i].value).attr('opacity',1)
         } else{
           d3.selectAll("." + boxes[i].value).attr('opacity',0.2)
         }

       }
   }

   //Station Radio Button
    d3.selectAll('input[name="station"]')
    .on('change', function() {
      set_map();
      set_vars();
      draw_charts();
    })

    //Time Radio Button - Years or Weeks
    d3.selectAll('input[name="time"]')
    .on('change', function() {
      set_vars();
      draw_charts()
    })

    //Pollutant Radio Button
    d3.selectAll('input[name="pollutant"]')
    .on('change', function() {
      set_vars();
      //alert and action to stop user clicking PM10 when Guildhall or London Road Aurn selected
      if ((station == 'guildhall' | station == 'londonrdaurn') & (current_pollutant == 'PM10')){
        window.alert('There is no PM10 data for the selected station');
        document.querySelector('input[name="pollutant"]#NO2').checked = true;
        current_pollutant = 'NO2'
      }
      set_stations()
      draw_charts()
      set_map()
    });

    //Line Checkboxes
    d3.selectAll('input[name="line"]')
    .on('change', function() {
      line_opacity();

    });

    //2. Define Map co-ordinates, text strings and function

    markers = {guildhall: "51.3822189160466,-2.35903402755172",
    londonrdaurn: "51.3911037707408,-2.35406675237005", windsorbridge:"51.3822463964832,-2.3816082523437",
    londonrdenc: "51.3911430437405,-2.35463418737194"}

    PM10_markers = {windsorbridge:"51.3822463964832,-2.3816082523437",
    londonrdenc: "51.3911430437405,-2.35463418737194"}

    urll = "https://maps.googleapis.com/maps/api/staticmap?"
    marker_text = "markers=color:blue%7Csize:mid%7C"
    urlr = "center=51.3866434,-2.3672184&zoom=13&size=290x140&key=AIzaSyBbtg5sbWajRdAL4RbZsXYrOZwSB_yXYRI"

    function set_map(){

      if (station == "all"){
          src = urll
          //different 'alls' depending on the pollutant
          if (current_pollutant == 'PM10'){
            for (m in PM10_markers){
              src = src + marker_text + PM10_markers[m] + "&"
            }
          }else{
            for (m in markers){
              src = src + marker_text + markers[m] + "&"
            }
          }
          src = src + urlr

      }else{
        //otherwise just one marker.
        src = urll + marker_text + markers[station] + "&" + urlr
      }
      d3.select('#map')[0][0].src = src;
    }

    //3. Define and set key input variables
    var current_pollutant = document.querySelector('input[name="pollutant"]:checked').value;
    var station = document.querySelector('input[name="station"]:checked').value;
    var time_type = document.querySelector('input[name="time"]:checked').value;

    //4. Set the map (default ALL and NO2) and draw the charts.
    set_map()
    draw_charts()



   function draw_charts(){

       //1. Pie charts: filter data
       var filtered_pie = data.filter(function(d) {
           return d.station==station &&
           d.pollutant==current_pollutant && d.timing==time_type
           && d.type=='air';
        ;});

        //then draw
        plot_pie('#pie', current_pollutant,filtered_pie,time_type)
        plot_pie('#greypie', 'grey',filtered_pie,time_type)

       //2. Bar charts filter data
       var filtered_bar = stats.filter(function(d){
         return d.station==station && d.pollutant==current_pollutant
       });

      //then draw
      plot_gauge('#',current_pollutant,filtered_bar,'max')
      plot_gauge('#',current_pollutant,filtered_bar,'limit')


       //3. Line charts: filter data -  different for air v weather/parking
       var filtered_line = data.filter(function(d) {
           if (d.type =='air'){
             return d.station==station && d.timing==time_type;
           } else{
             return d.timing==time_type;
           }
         ;});

      //then draw
      plot_line('#line',filtered_line,time_type)

      //set limits (for bar chart labels)
      limits = {NO2:200,PM10:50};

      //set bar plots labels depending on pollutant
      document.getElementById('labelmax').innerHTML = "3. Annual average (&#181;g m-3)";
      if (current_pollutant == 'PM10'){
        limit_text = '2. High Readings > 50 &#181;g m-3'
      } else {
        limit_text = '2. High Readings > 200  &#181;g m-3'
      }
        document.getElementById('labellimit').innerHTML = limit_text
      }

    });
    

});

air_plots.js

//There are three types of plot: gauge (horizontal bar), pie and line

function plot_gauge(tagstart,my_pollutant,my_list,g_type){

  //horizontal bar gauges - with limit bars
  //this function draws two types of gauge - limit or max

  //set ranges for different pollutants
  range_mean = {NO2:40,PM10:40};
  range_limit = {NO2:18,PM10:35};

  //set tag name
  tdname = tagstart + g_type


  //create years list
  years = []
  for (l in my_list){
      years.push(my_list[l].year)
  }

  //clear svg
  d3.select(tdname).selectAll("*").remove()

  //draw svg
  var svg = d3.select(tdname).append("svg")
   .attr("class","gauge")
   .append("g");

   //define max
   max_val = d3.max(my_list, function(d) { return d[g_type]; })
   //work out domain end
   if (range_mean[my_pollutant] > max_val){
     max_val = range_mean[my_pollutant]+10
   }

    //define scales (x,y)
    var x_scale = d3.scale.linear().domain([0,max_val+5]).range([0, 175]);
    var y_scale = d3.scale.ordinal().domain(years).range([20,0]);

    //define and append axes
    svg.append("g")
      .attr("class", "x_axis")
      .attr("transform", "translate(35,60)")
      .call(d3.svg.axis().scale(x_scale).orient('bottom').tickSize(0).outerTickSize(0).ticks(8))

    svg.append("g")
      .attr("class", "y_axis")
      .attr("transform", "translate(35,30)")
      .call(d3.svg.axis().scale(y_scale).orient('left').tickSize(0).outerTickSize(0));

    //append data to bars
    var bars = svg.selectAll(".bar").data(my_list);

    //draw the bars
    bars.enter().append("rect")
    .attr("class", "bar")
    .attr("x", 35)
      .attr("fill",'darkgrey')//default fill
      .attr("width", function(d) {  return x_scale(d[g_type]); })
      .attr("y", function(d){  return y_scale(d.year) + 20; })
      .attr("height", 15);
    bars.exit().remove();

    //add delimiter axis with 'limit' label
    svg.append("g")
      .attr("class", "z_axis")
      .attr("transform", "translate(" + (35 + x_scale(range_mean[my_pollutant])) + ",17)")
      .call(d3.svg.axis().scale(d3.scale.linear().domain([0,10]).range([40,0])).orient('left').tickValues([]).outerTickSize(0));

    svg.append("text")
      .attr("y", 15)
      .attr("x",(35 + x_scale(range_mean[my_pollutant])))
      .html('limit')
      .attr('text-anchor','middle');

};

function plot_pie(tagname, my_pollutant,my_data,time_type) {


  //these pie charts have been adapted from a resuable circular heat chart
  //found here: http://prcweb.co.uk/lab/circularheat/

  //clear svg
  d3.select(tagname).selectAll("*").remove()

  //define label lists
  var weeks = ["Sun", "Sat", "Fri", "Thurs", "Wed", "Tues","Mon"],
  hours = ["12pm", "1am", "2am", "3am", "4am", "5am", "6am", "7am", "8am", "9am", "10am",
  "11am", "12am", "1pm", "2pm", "3pm", "4pm", "5pm", "6pm", "7pm", "8pm", "9pm", "10pm", "11pm"],
  years = ["December","November", "October", "September", "August", "July", "June",'May','April','March','February','January'],
  dates = ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th", "9th", "10th", "11th",
  "12th", "13th", "14th", "15th", "16th", "17th", "18th", "19th", "20th", "21st", "22nd",
  "23rd", "24th","25th",'26th','27th','28th','29th','30th','31st'];


  //define pie variables
  var segments = {weeks:24,years:31},
  segment_heights = {weeks:16,years:9}
  margin = {top: 10, right: 10, bottom: 0, left: 20},
  numSegments = segments[time_type],
  segmentHeight = segment_heights[time_type],
  innerRadius=15,
  accessor = function(d) {return d;};

  //define colour scales - different for NO2, PM10 and grey
  //Pollutant scales correspond to AQI limits: https://uk-air.defra.gov.uk/air-pollution/daqi?view=more-info&my_pollutant=no2#my_pollutant

  if (my_pollutant=='NO2'){
    var wheel_color = d3.scale.threshold()
        .domain([67/4,67, 134, 200, 267, 334,400,467,534,600])
        .range(["white","#D8DA00", "#3AAA35", "#006633", "#F9CC12", "#F9B233", "#F39200","#E94E1B", "#E30613", "#BE1622", "#662483"]);

  } else if (my_pollutant =='PM10') {

    var wheel_color = d3.scale.threshold()
        .domain([16/4, 16, 33, 50, 58, 66,75,83,91,100])
        .range(["white","#D8DA00", "#3AAA35", "#006633", "#F9CC12", "#F9B233", "#F39200","#E94E1B", "#E30613", "#BE1622", "#662483"]);
  } else{
    my_min = d3.min(my_data, function(d) { return +d.value; });
    my_max = d3.max(my_data, function(d) { return +d.value; });

    var wheel_color = d3.scale.linear()
        .domain([my_min,my_max])
        .range(["white","#303030"]);

  }

  //Arc functions
  //data feeds from the inside out

  //Inner Radius: increases dependent on place in wheel
  ir = function(d, i) {
      result =  innerRadius + Math.floor(i/numSegments) * segmentHeight;
      return result;}

  //Outer Radius: increases dependent on place in wheel
  or = function(d, i) {
      result =  innerRadius + segmentHeight + Math.floor(i/numSegments) * segmentHeight;
      return result;
  }

  //Start Angle: dependent on position in each cycle
  sa = function(d, i) {
      result =  (i * 2 * Math.PI) / numSegments;
      return result;
  }

  //End Angle: dependent on position in each 24  cycle + 1
  ea = function(d, i) {
      result = ((i+1) * 2 * Math.PI) / numSegments
      return result;
  }


  //populate data list
  data_list = []
  my_data.forEach(function(d) {
      data_list.push(d.value);
      });

  //new svg for each pie
  var svg = d3.select(tagname).attr("class","pie").selectAll('svg')
              .data([data_list]);
  svg.enter().append('svg');
  svg.exit().remove();

  //used for labels
  var offset = innerRadius + Math.ceil(data_list.length / numSegments) * segmentHeight;

  //append a new group to the svg.
  var g = svg.append("g")
      .classed("circular-heat", true)
      .attr("transform", "translate(" + parseInt(margin.left + offset) + "," + parseInt(margin.top + offset) + ")");

  //define tooltip
  var small_tooltip = d3.select("body")
    .append("div")
    .attr("class", "small_tooltip")
    .html("");

  //new set of paths for each pie
  var paths = g.selectAll("path").data(data_list);

  //draw the paths
  paths.enter().append("path")
      .attr("d", d3.svg.arc().innerRadius(ir).outerRadius(or).startAngle(sa).endAngle(ea))
      .attr("fill", function(d) {return wheel_color(accessor(d));})
      .on("mouseover", function(d){
        d3.select(this).attr('opacity',0.4)
        tip = parseInt(d) + ' µg m-3'
        small_tooltip.html(tip)
        return small_tooltip.style("visibility", "visible");
      })
       .on("mousemove", function(){return small_tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
       .on("mouseout", function(){
         d3.select(this).attr('opacity',1)
         return small_tooltip.style("visibility", "hidden");});

  //and remove them
  paths.exit().remove();

  // Unique id so that the text path defs are unique - P Cook comment
  var id = d3.selectAll(".circular-heat")[0].length;

  //Radial labels - weeks and months

  var lsa = 0.01; //Label start angle

  //create new labels
  var labels = svg.append("g")
      .classed("labels", true)
      .classed("radial", true)
      .attr("transform", "translate(" + parseInt(margin.left + offset) + "," + parseInt(margin.top + offset) + ")");

  //append the data and calculate position (this is also from circular heat map)
  //will work out how to function this one later

  function set_labels(my_data){
    //set labels using correct dataset - weeks or years (dependent on time_type)
    labels.selectAll("def").data(my_data)
          .enter()
          .append("def")
          .append("path")
          .attr("id", function(d, i) {return "radial-label-path-"+id+"-"+i;})
          .attr("d", function(d, i) {
              //radius relates to segment height
              var r = innerRadius + ((i + 0.2) * segmentHeight);
              return "m" + r * Math.sin(lsa) + " -" + r * Math.cos(lsa) +
                      " a" + r + " " + r + " 0 1 1 -1 0";});
  }

  if (time_type=='weeks'){
    set_labels(weeks)
  } else{
    set_labels(years)

  }

  //append text to each label
  if (time_type=='weeks'){
    var weeks = labels.selectAll("text").data(weeks);
  } else{
    var weeks = labels.selectAll("text").data(years);
  }

  //week labels
  weeks.enter()
      .append("text")
      .append("textPath")
      .attr("xlink:href", function(d, i) {return "#radial-label-path-"+id+"-"+i;})
      .style("font-size", 1.2 * segmentHeight + 'px')
      .text(function(d) {return d;});

  weeks.exit().remove()

  //same again for segment labels
  var segmentLabelOffset = 2;
  //radius relates to position in the cycle
  var r = innerRadius + Math.ceil(data_list.length / numSegments) * segmentHeight + segmentLabelOffset;

  //append labels to svg
  var outer_labels = svg.append("g")
      .classed("labels", true)
      .classed("segment", true)
      .attr("transform", "translate(" + parseInt(margin.left + offset) + "," + parseInt(margin.top + offset) + ")");

  //now append to path
  outer_labels.append("def")
      .append("path")
      .attr("id", "segment-label-path-"+id)
      .attr("d", "m0 -" + r + " a" + r + " " + r + " 0 1 1 -1 0");

  //and draw - again, I'll find a way to function these later
  outer_labels.selectAll('text').remove()

  function set_outerlabels(my_data){
    //set labels using correct dataset - weeks or years (dependent on time_type)
    outer_labels.selectAll("text").data(my_data)
        .enter()
        .append("text")
        .append("textPath")
        .style("font-size", '12px')
        .attr("xlink:href", "#segment-label-path-"+id)
        .attr("startOffset", function(d, i) { return i * 100 / numSegments + "%";})
        .text(function(d) {return d;});

  }
  if (time_type=='weeks'){
    set_outerlabels(hours)

  } else{
    set_outerlabels(dates)
  }

  //finished with pie charts

}

function line_opacity(){
  //resets line opacity after tooltip - copy of function in air_final as out of scope

  var boxes = document.querySelectorAll('input[name="line"]');
  for (i = 0; i < boxes.length; ++i) {
      if (boxes[i].checked == true){
        d3.selectAll("." + boxes[i].value).attr('opacity',1)
      } else{
        d3.selectAll("." + boxes[i].value).attr('opacity',0.2)
      }

    }
}
function draw_yaxis(my_type,svg,my_data,x_scale,tooltip,colour){

  //draws a separate line and y axis for each data type

  //define legend labels
  var labels = {NO2:"NO2",PM10:"PM10",weather: "wind speed",parking: "parking capacity"}

  //get min and max
  min_y = d3.min(my_data, function(d) { return +d.value; })
  max_y = d3.max(my_data, function(d) { return +d.value; })

  //draw scale and axis
  var y_scale = d3.scale.linear().domain([min_y,max_y]).range([130,10]);

  var y_axis = d3.svg.axis().scale(y_scale).orient("left")
                            .tickValues([min_y,max_y])
                            .tickSize(0)
                            .tickFormat(function(d,i){if (d==min_y){return 'min'}else{return 'max'} });

  //append new axis
  svg.append("g").attr("class", my_type + "_axis").attr("transform", "translate(30,20)").call(y_axis);

  //define the line
  var my_line = d3.svg.line()
        .x(function(d) {

          return x_scale(d.order); })
        .y(function(d) { return y_scale(d.value); });

  //draw the line and set the tooltip using returned scale so active after running
    svg.append("path").attr("class", my_type)
              .data(my_data)
              .attr("transform", "translate(30," + 20 + ")")
              .attr("data-legend",function(d) { return labels[d.type]})
              .attr("opacity",0.2)
              .style("stroke",colour)
              .on("mouseover", function(d){
                //set opacity to 1 so you can see what you're hovering over
                d3.select(this).attr('opacity',1)
                //adds text to the tooltip
                //gets the co-ordinates of the mouse on the SVG and works out the y value with inverted scale
                var coordinates = [0, 0];
                coordinates = d3.mouse(this);
                var y = coordinates[1];
                my_class = d3.select(this).attr('class')
                if (my_class == 'NO2'){
                  tip = 'NO2: ' + parseInt(NO2_scale.invert(y)) + ' &#181;g m-3'
                } else if (my_class == 'weather') {
                  tip = "Wind Speed: " + parseInt(weather_scale.invert(y)) + ' km/h'
                } else if (my_class == 'PM10') {
                  tip = "PM10: " + parseInt(PM10_scale.invert(y)) + ' &#181;g m-3'
                } else {
                  tip = "Parking Capacity: " + parseInt(parking_scale.invert(y)) + ' %'
                }
                tooltip.html(tip)
                return tooltip.style("visibility", "visible");
              })
               .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
               .on("mouseout", function(){
                 line_opacity();
                 return tooltip.style("visibility", "hidden");})
              .attr("d", my_line(my_data));

    return y_scale
}


function plot_line(tagname,my_data,time_type){


  //defines the x axis labels
  var weeks_labels = {12:"Sun",36:"Sat", 60:"Fri", 84:"Thurs", 108:"Wed", 132:"Tues", 156:"Mon"},
  years_labels = {15:"Dec",46:"Nov",77:"Oct",108:"Sept",139:"Aug",170: "Jul", 201:"Jun",232:'May',
  263:'Apr',294:'Mar',325:'Feb',358:'Jan'},
  weeks_ticks = [12,36,60, 84, 108, 132, 156],
  years_ticks = [15,46,77, 108, 139, 170, 201,232,263,294,325,358];


  //clears the svg
  d3.select(tagname).selectAll("*").remove();

  //filters the data for each type (can add as many as you want)
  NO2_data = my_data.filter(function(d) {return d.type=='air' && d.pollutant == 'NO2' && d.value>0})
  PM10_data = my_data.filter(function(d) {return d.type=='air' && d.pollutant == 'PM10' && d.value>0})
  parking_data = my_data.filter(function(d) {return d.type=='parking' && d.value>0})
  weather_data = my_data.filter(function(d) {return d.type=='weather' && d.value>0})


  //used to set x_scale max
  data_totals = {weeks:167,years:371}

  //create svg
  var svg = d3.select(tagname).append("svg").style("width",800);

  //set x_scale
  var x_scale = d3.scale.linear().domain([data_totals[time_type],0]).range([0, 780]);

  //define tooltip
  var tooltip = d3.select("body")
    .append("div")
    .attr("class", "tooltip")
    .html("");

  //define  x axis
  var x_axis = d3.svg.axis().scale(x_scale).orient("bottom");


  // set x_axis ticks - break points in tickValues (every 24 hours/31 days)
  // tickFormat changes to corresponding str in weeks or years_labels
  if (time_type == 'weeks'){
    x_axis.tickValues(weeks_ticks).tickSize(0).tickFormat(function(d, i){return weeks_labels[d]});
  } else{
    x_axis.tickValues(years_ticks).tickSize(0).tickFormat(function(d, i){return years_labels[d]});
  }

  //append x-axis
  svg.append("g").attr("class", "x_axis")
        .attr("transform", "translate(30,160)")
        .style("text-anchor", "end")
        .call(x_axis)


  //draw dividing lines axes - 12am or 1st of month
  var m_scale =  d3.scale.linear().domain([0,10]).range([130,0]);
  var m_axis = d3.svg.axis().scale(m_scale).orient("left").tickSize(0).ticks(0);


  function add_m_axis(position, my_label){

    svg.append("g")
      .attr("class", "m_axis")
      .attr("transform", "translate(" + position + ",30)")
      .call(m_axis);

    svg.append("text")
      .attr("y", 25)
      .attr("x",position)
      .style('fill','grey')
      .style('opacity',0.8)
      .html(my_label)
      .attr('text-anchor','middle');
  };


  if (time_type == 'weeks'){
    for (i = 0; i < weeks_ticks.length; ++i) {
      add_m_axis(x_scale(weeks_ticks[i])+30,'12am')
    }
  } else{
    for (i = 0; i < years_ticks.length; ++i) {
      add_m_axis(x_scale(years_ticks[i]),'1st')
    }
  }


  //finally add the lines
  weather_scale = draw_yaxis('weather',svg,weather_data,x_scale,tooltip,'deepskyblue')
  parking_scale = draw_yaxis('parking',svg,parking_data,x_scale,tooltip,'blue')
  NO2_scale = draw_yaxis('NO2',svg,NO2_data,x_scale,tooltip,'#D8DA00')
  PM10_scale = draw_yaxis('PM10',svg,PM10_data,x_scale,tooltip,'#8dc109')

  //done with line chart
}

air_vis.py

import pandas as pd
import numpy as np
from datetime import date
from dateutil.rrule import rrule, DAILY

#1. Define functions

def add_fields(my_list, my_order,my_type,s,p,timing):
    #builds years and weeks dataframes using two list
    new_df = pd.DataFrame(my_list,columns=['value'])
    new_df['order'] = my_order
    new_df['station'] = s
    new_df['pollutant'] = p
    new_df['type'] = my_type
    new_df['timing'] = timing

    return new_df

def day_hour(df,p,s,my_type):
    #builds a list of means for pollutant p and station p
    #weekday Sun-Mon, hours 1-24, plus order value (for d3 circular chart)

    my_list = []
    my_order = []
    x = 0

    #required day order: Sun,Sat,Fri,Thurs,Wed,Tues,Mon
    day_order = [0,6,5,4,3,2,1]

    for my_day in day_order:
        for my_hour in range(0,24):
            df_sub = df[(df['hour']==str(my_hour)) & (df['weekday']==str(my_day))]
            if len(df_sub) > 0:
                my_mean = np.mean(df_sub[p])
            else:
                my_mean = 0
            my_list.append(my_mean)
            my_order.append(x)
            x = x + 1


    new_df = add_fields(my_list, my_order,my_type,s,p,"weeks")


    return new_df


def month_day(df,p,s,my_type):
    #builds a list of means for pollutant p and station p
    #months 1-12, days 1-31, plus order value (for d3 circular chart)

    my_list = []
    my_order = []
    x = 0

    #required month order: December, November ... January
    for my_month in range(12, 0, -1):
        for my_day in range(1,32):
            df_sub = df[(df['monthday']==str(my_day)) & (df['month']==str(my_month))]
            if len(df_sub) > 0:
                my_mean = np.mean(df_sub[p])
            else:
                my_mean = 0
            my_list.append(my_mean)
            my_order.append(x)
            x = x + 1

    new_df = add_fields(my_list, my_order,my_type,s,p,"years")


    return new_df

def set_dates(df,fieldname):

    #uses strftime to set date fields
    df[fieldname]= pd.to_datetime(df[fieldname])
    df['hour'] = df[fieldname].dt.strftime('%-H')
    df['weekday']= df[fieldname].dt.strftime('%w')
    df['month']= df[fieldname].dt.strftime('%-m')
    df['monthday']= df[fieldname].dt.strftime('%-d')
    df['year']= df[fieldname].dt.strftime('%Y')

    return df

def weeks_years(all_data,df,p,s,my_type):

    #builds weeks and years dataframes using functions above
    my_weeks = day_hour(df,p,s,my_type)
    all_data = pd.concat([all_data, my_weeks])
    my_years = month_day(df,p,s,my_type)
    all_data = pd.concat([all_data, my_years])

    return all_data

def bar_data(df,p,s,limit,stats):

    #calculate stats for 2 DEFRA measures

    #1. average annual mean
    df1 = df[p].groupby(df['year']).mean().reset_index('year')
    df1 = pd.DataFrame(df1)

    #2. Number of entries over the limit
    if s == 'all':
        df2 = df[df[p]>limit]
    else:
        df2 = df[(df[p]>limit) & (df['station']==s)]

    #concatinate results and rename columns after groupby
    if len(df2)>0:
        df2 = df2[p].groupby(df2['year']).size().reset_index('year')
        df2 = pd.DataFrame(df2)
        new_stats = pd.merge(pd.DataFrame(df1), pd.DataFrame(df2), on='year',how='left')
        new_stats=new_stats.rename(columns = {0:'limit'})
    else:
        new_stats = df1
        new_stats['limit']=0

    new_stats['station']=s
    new_stats['pollutant']=p

    new_stats=new_stats.rename(columns = {p:'max'})

    if s =='all':
        #hard coded.  account for number of stations involved.
        if p=='NO2' or p=='NOx':
            new_stats['limit'] = new_stats['limit']/4
        elif p=='PM10':
            new_stats['limit'] = new_stats['limit']/2

    stats = pd.concat([stats, new_stats])
    stats = stats.fillna(0)

    return stats



#2. Open static data files for air quality, weather and parking

air = pd.read_csv("_Live__Air_Quality_Sensor_Data.csv",index_col=False)
weather = pd.read_csv('weather_latest.csv')
parking = pd.read_csv('Historical_car_parking.csv')

air['station'] = air['Sensor Location Slug']

#3. Define pollutant and stations of interest
pollutants = [['NO2',200],['PM10',50]]
stations = ['guildhall','londonrdaurn','londonrdenc','windsorbridge']

#4. Set dates, restrict data to 2015 and 2016 (only full years of data)
air = set_dates(air,"DateTime")
air = air[(air['year']=='2015') | (air['year']=='2016')]
weather = set_dates(weather,"time")
parking = set_dates(parking,'DateUploaded')

#5. Define all data dataframe
cols2 = ['type','pollutant','station','value','order','timing']
all_data = pd.DataFrame(columns=cols2)

#6. Define stats dataframe (for DEFRA measure bar charts/gauges)
cols = ['station','pollutant','year','limit', 'max']
stats = pd.DataFrame(columns=cols)


#for each pollutant
for p in pollutants:

    #remove nulls and negatives
    p_air = air[air[p[0]].isnull()==False]
    p_air = p_air[p_air[p[0]]>0]

    #remove any entries over the limit - dealing with high reading errors
    #current limits set at the DEFRA AQI first 'high' level for each pollutant

    if p[0] == 'NO2':
        limit = 400
    elif p[0]=='PM10':
        limit = 75

    p_air = p_air[p_air[p[0]]<limit]

    #build stats and all_data dataframe for all stations
    stats = bar_data(p_air,p[0],'all',p[1],stats)
    all_data = weeks_years(all_data,p_air,p[0],'all','air')

    #repeat for individual stations if data exists
    for s in stations:
        s_air = p_air[p_air['station']==s]
        if len(s_air) > 0:
            all_data = weeks_years(all_data,s_air,p[0],s,'air')
            stats = bar_data(p_air,p[0],s,p[1],stats)

#repeat for weather and parking data
#can apply to any dataset with values and datetime fields for 2015/2016
all_data = weeks_years(all_data,weather,'wspdm','all','weather')
all_data = weeks_years(all_data,parking,'Percentage','all','parking')

#export to data files
all_data.to_csv('all_data.csv',index=False)
stats.to_csv('stats.csv',index=False)

all_data.csv

index.html

<html>
<head>
<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="air.css">
<script src="air_final.js"></script>
<script src="air_plots.js"></script>
</head>
<body><table width="800px"><tbody>
<tr>
  <td id='title' colspan='4'>BATH AIR QUALITY DASHBOARD</td>
</tr>
<tr>
  <td id='map_td'><img id='map' src=''></td>
  <td colspan='2' id='stations'>
    <br><input type="radio" id='all' name="station" value="all" checked="checked"><label for="all">All Sensors</label><br>
    <input type="radio" id='lra' name="station" value="londonrdaurn" ><label for="lra">London Road Aurn</label><br>
    <input type="radio" id='guild' name="station" value="guildhall"><label for="guild">Guildhall</label><br>
    <input type="radio" id='lre' name="station" value="londonrdenc" ><label for="lre">London Road Enc</label><br>
    <input type="radio" id='windsor' name="station" value="windsorbridge"><label for="windsor">Windsor Bridge</label><br>
    <br><div class='small_text'>Live data collected every 15 or 60 mins.</div></td>

  <td id='input'>
    <b>Pollutants: </b>
    <input id='NO2' type="radio" name="pollutant" value="NO2" checked="checked">NO2
    <input id='PM10' type="radio" name="pollutant" value="PM10">PM10
    <br><div id='pollutant_text'><br>
    Nitrogen dioxide (NO2) is of concern to public health in high concentrations. Combustion
    emissions (NOx) oxidise in the atmosphere to form NO2.</div>
    <br><b>Timing:</b>
    <input type="radio" name="time" value="weeks" checked="checked">Weekly
    <input type="radio" name="time" value="years">Annually</td>
</tr>
<tr>
  <td id='scale'>Average readings 2015-16</td>
  <td colspan='3' id='how'>Average readings 2015-16 against 3 DEFRA measures</td>
</tr>
<tr>
  <td id='minmax_td'>
    <table id='minmax'><tr>
      <td style="text-align: left;">min</td>
      <td style="text-align: right;">max</td></tr><tr>
      <td colspan='2'><img src='minmax.gif'></td></tr>
    </table></td>
  <td class='how_charts' colspan='3'>
    <table id='aqi'><tr>
      <td rowspan="2" id='aqi_title'>1. Air Quality Index</td>
      <td class='aqi_img'colspan=2>low</td>
      <td class='aqi_img'>mid</td>
      <td class='aqi_img'>high</td>
      <td class='aqi_img'>v.high</td></tr><tr>
      <td><img width='25px' src='lessthan.jpg'></td>
      <td><img width='75px' src='low.jpg'></td>
      <td><img src='mid.jpg' width='75px'></td>
      <td><img width='75px' src='high.jpg'></td>
      <td><img width='25px' src='highest.jpg'></td></tr>
      </table></td>
</tr>
<tr>
  <td rowspan="4" id='greypie'></td>
  <td colspan='2' rowspan='4' id='pie'></td>
  <td id='labellimit'></td>
</tr>
<tr>
  <td  id='limit'></td>
</tr>
<tr>
  <td id='labelmax'></td>
</tr>
<tr>
  <td id='max'></td>
</tr>
<tr>
  <td id='influencers' colspan='4'>Potential influencing factors</td>
</tr>
<tr>
  <td class = 'small_text' colspan='4'>
    <br><b>2015-16 averages</b> <i>(check box to highlight)</i>
    <input type="checkbox" id='NO2_input' name="line" value="NO2">NO2&nbsp;&nbsp;
    <input type="checkbox" id='PM10_input' name="line" value="PM10" >PM10&nbsp;&nbsp;
    <input type="checkbox" id='weather_input' name="line" value="weather">Wind Speed&nbsp;&nbsp;
    <input type="checkbox" id='parking_input' name="line" value="parking" >Parking Capacity
  </td>
</tr>
<tr>
  <td id='line' colspan='4'></td>
</tr>

</tbody></table></body></html>

stats.csv