air quality

.block

license: mit

README.md

Built with blockbuilder.org

graph.js

var QueryString = function () {
  // This function is anonymous, is executed immediately and 
  // the return value is assigned to QueryString!
  var query_string = {};
  var query = window.location.search.substring(1);

  var vars = query.split("&");

  for (var i=0;i<vars.length;i++) {
	var pair = vars[i].split("=");
		// If first entry with this name
	if (typeof query_string[pair[0]] === "undefined") {

	  query_string[pair[0]] = decodeURIComponent(pair[1]);
		// If second entry with this name
	} else if (typeof query_string[pair[0]] === "string") {
	  var arr = [ query_string[pair[0]],decodeURIComponent(pair[1]) ];
	  query_string[pair[0]] = arr;
		// If third or later entry with this name
	} else {
	  query_string[pair[0]].push(decodeURIComponent(pair[1]));
	}
  } 
  return query_string.id;
}();

//load this id from both datasets.

console.log(QueryString)

var aqhi, pm, test

var list_of_aq_measures =[]
// = ['NO_24','NO2_24','NO','PM25','CO','PM10_24','SO2','SO2_24','PM25_24','NOX_24','PM10','H2S_24','H2S','O3_8','03']

// pm
d3.json('https://csv-parser.api.gov.bc.ca/?source=ftp://ftp.env.gov.bc.ca/pub/outgoing/AIR/Hourly_Raw_Air_Data/Station/'+ QueryString +'.csv&format=json',function(err, data) {
	console.log(data)

	initGas = 'NO2'


	//build list of measures


	var parseTime = d3.timeParse("%Y-%m-%d %H:%M");
	var formatTime = d3.timeFormat("%Y-%m-%d");


	data.forEach(function(d){
		// console.log(d)
	})
	test = data

	var exclude = ['DATE_PST','LATITUDE','LONGITUDE','STATION']

	$.each(data[0], function(key, value) {
		if(!(exclude.includes(key))){
		list_of_aq_measures.push(key)
	}

		
		// console.log(value)
	// value.DATE_PST = (parseTime(value.DATE_PST))

	});
colorScale = d3.scaleOrdinal(d3.schemeCategory10);
	makeButtons(list_of_aq_measures,data);

	d3.select(".current-date").html(data[0]["STATION"]);
	d3.select(".current-cond").html(data[0].DATE_PST);
	// d3.select(".pollutant-name").html(pm[0].PM25 + ' ' + pm[0].PM25_UNIT);

	makeGraphs(pm,aqhi);
			
	
});
function makeActive(selection) {
		d3.selectAll(".active").classed("active",false).attr('style','border: solid 0px black !important;')
		selection.classed("active",true).attr('style', 
			function(d){ return 'border: solid 2px ' + colorScale(d) + ' !important;' })
}


function makeButtons(keys,data){
	var buttons = d3.select('.button').selectAll('.button')
		.data(keys)
		.enter()
		.append("button")
		.attr("class", "btn btn-default")
		.text(function(d,i) { return d ;})
		.on("click", function(d){
			makeActive(d3.select(this));
		})

		buttons.append("div")
			.attr("class",'val')
			.data(keys)
			.text(function(d,i) {

				return data[0][d]; 
			})
			

		makeActive(buttons.filter(function(d) {return d == initGas})	 )
}


function makeGraphs(pm,aqhi){
	console.log(pm)
}



// var trace = "aqhi"

// trace = ['AQHI', 'PM2.5', 'PM10', 'O3', 'NO2', 'SO2', 'All Stations'];

// trace.forEach(function(d) {
// 	d3.select('.char-select')
// 		.append('button')
// 		.attr('id', d)
// 		.attr('class', 'btn btn-default btn-s')
// 		.text(d);
// });

// var test
// var width = 660,
// 	height = 800,
// 	active = d3.select(null);
// var dataMonth;

// var formatNumber = d3.format(",.0f");

// var projection = d3.geoAlbers()
// 	.rotate([126, 0])
// 	.center([9, 55.5])
// 	.parallels([50, 58.5])
// 	.scale(3200)
// 	.translate([960 / 2, 600 / 2]);


// var path = d3.geoPath()
// 	.projection(projection);


// var radius = d3.scaleSqrt()
// 	.domain([0, 1e6])
// 	.range([0, 4]);

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


// margin = {
// 	top: 20,
// 	right: 20,
// 	bottom: 30,
// 	left: 50
// };

// var zoom = d3.zoom()
// 	// no longer in d3 v4 - zoom initialises with zoomIdentity, so it's already at origin
// 	// .translate([0, 0]) 
// 	// .scale(1) 
// 	.scaleExtent([1, 8])
// 	.on("zoom", zoomed);
// var g;

// function zoomed() {
//   g.style("stroke-width", 1.5 / d3.event.transform.k + "px");
//   // g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); // not in d3 v4
//   g.attr("transform", d3.event.transform); // updated for d3 v4
// }


// d3.select("#distid").style("visibility", "hidden")
// d3.select("#chart_container").style("visibility", "hidden")

// function baseMap() {

// 	var svg = d3.select(".map")
// 		.append("svg")
// 		.attr("width", width)
// 		.attr("height", height);

// 	svg.append("rect")
// 		.attr("class", "background")
// 		.attr("width", width)
// 		.attr("height", height)
// 		.on("click", reset);

// 	g = svg.append("g")
// 		.call(zoom);


// 	queue()
// 		.defer(d3.json, "bc_no_proj.json")
// 		.defer(d3.json, "ocean.json")
// 		// .defer(d3.json, "pacific.json")
// 		.await(ready);


// 	function ready(error, bc_no_proj, ocean) {
// 		"use strict";
// 		if (error) {
// 			return console.error(error);
// 		}

// 		g.append("g")
// 			.attr("id", "provinces")
// 			.selectAll("path")
// 			.data(topojson.feature(bc_no_proj, bc_no_proj.objects.airzones).features)
// 			.enter()
// 			.append("path")
// 			.attr("d", path)
// 			.attr("id", "prov-borders")
// 		// .on("click", clicked);

// 		var ocean = g.selectAll("path2") // only using to mask air zones that spill cover the ocean
// 			.data(topojson.feature(ocean, ocean.objects.ocean).features)
// 			.enter().append("path")
// 			.attr("id", "ocean");

// 		ocean.attr("d", path)
// 			.style("fill", "white");

// 	}
// }


// var curr_stations = []
// var stn = []

// var tooltip = d3.select(".map")
// 	.append("div")
// 	.style("position", "absolute")
// 	.style("z-index", "10")
// 	.style("visibility", "hidden")
// 	.style("color", "#222")
// 	.style("padding", "8px")
// 	.style("background-color", "#fff")
// 	.style("border-radius", "6px")
// 	.style("font", "12 px sans-serif")
// 	.text("tooltip");

// var parseTime = d3.timeParse("%Y-%m-%d %H:%M");
// var formatTime = d3.timeFormat("%Y-%m-%d");


// function clearStations(){
// 	d3.selectAll(".bubble").remove()
// }

// function addAllPoints(currMeasure,selectedMeasure) {
// 	filteredData =[]
// 	if(selectedMeasure != 'AQHI'){
	
// 		//filter stations by measurement
// 		currMeasure.forEach(function (d) {
			
// 			if(d[selectedMeasure]!=null){
// 				// console.log(d[selectedMeasure])
// 				filteredData.push(d)

// 			}
// 		})

// 	}else{
// 		filteredData = currMeasure
// 	}
// 	console.log(filteredData)


// 	g.append("g")
// 		.attr("class", "bubble")
// 		.selectAll("circle")
// 		.data(filteredData)
// 		.enter()
// 		.append("circle")
// 		.attr("cx", function(d) {
// 			// console.log(d)
// 			return projection([Number(d.LONGITUDE), Number(d.LATITUDE)])[0];
// 		})
// 		.attr("cy", function(d) {
// 			return projection([Number(d.LONGITUDE), Number(d.LATITUDE)])[1];
// 		})
// 		.attr("r", 6)
// 		// })
// 		.on("mouseover", function(d) {
// 			console.log(d3.select(this).select("circle"))

// 			d3.select(this).transition()
// 				.duration(250)
// 				.attr("r", 15)
// 				.attr('fill', '#ff0000');

// 			tooltip.text(d.STATION_NAME);
// 			tooltip.style("visibility", "visible");
// 		})
// 		.on("mousemove", function() {
// 			return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX - 300) + "px");
// 		})
// 		.on("mouseout", function() {
// 			d3.select(this).transition()
// 				.duration(250)
// 				.attr("r", 6)
// 				.attr('fill', 'steelblue');
// 			return tooltip.style("visibility", "hidden");
// 		})
// 		.on("click", function(d) {
// 			console.log(d)

// 			d3.select("#chart")
// 				.append("h4")
// 				.html(d.STATION_NAME)
// 				.attr("class", "g-summary");

// 			d3.select("#chart_container").style("visibility", "visible")
// 			currentStation = d;
// 			// if first time make if second update chart
// 			// if (counter == 0) {
// 				// lineData = getStationData(d,currHour)
// 				var lineData = dataMonth;
// 				// console.log(currentStation,lineData)

// 				makeChart(currentStation['EMS_ID'], lineData);
// 				counter += 1;
// 				console.log(counter)
// 			// } else {
// 			//     console.log('this is the grade: ' + grade)
// 			//     updatechart(d, grade);
// 			// }
// 		});
// }

// baseMap();

// //start by loading the aqhi data 

// var traceData;
// var selectedMeasure = 'AQHI'

// // if (selectedMeasure == 'aqhi'){
// str='https://jsonpdataproxy.api.gov.bc.ca/?url=http://www.env.gov.bc.ca/epd/bcairquality/aqo/csv/AQHIWeb.csv&format=json'
// // }else{
// //     str='https://jsonpdataproxy.api.gov.bc.ca/?url=http://www.env.gov.bc.ca/epd/bcairquality/aqo/csv/bc_air_monitoring_stations.csv&format=json'
// // }
// var aqhiData =[];
// d3.json(str,function(err, data) {
// 	 var currMeasure = [];
// 	for (var i = 0; i < data['data'].length; i += 1) {
// 		var obj = {}
// 		for (var j = 0; j < data['fields'].length; j += 1) {
// 			var field = data['fields'][j];
// 			obj[field] = data['data'][i][j];
// 		}
// 		currMeasure.push(obj)
// 	}
// 	// console.log(currMeasure,selectedMeasure)
// 	aqhiData = currMeasure;
// 	addAllPoints(currMeasure,selectedMeasure);

// })
 
// // Load other hourly data in the background
// var otherData =[]
// d3.json('https://jsonpdataproxy.api.gov.bc.ca/?url=http://www.env.gov.bc.ca/epd/bcairquality/aqo/csv/bc_air_monitoring_stations.csv&format=json',function(err, data) {
// 	 var currMeasure = [];
// 	for (var i = 0; i < data['data'].length; i += 1) {
// 		var obj = {}
// 		for (var j = 0; j < data['fields'].length; j += 1) {
// 			var field = data['fields'][j];
// 			obj[field] = data['data'][i][j];
// 		}
// 		otherData.push(obj)
// 	}

// })

// // change measure on button click
// $(".char-select>button").click(function() {
// 	var trace =[];
// 	newMeasure = $(this)[0].id.replace('.','');
// 	//if new measures is not in the trace file load aqhi
// 	if(selectedMeasure == newMeasure){
// 		console.log('same measure!')
// 	}else if (_.contains(['PM25', 'PM10', 'O3', 'NO2', 'SO2', 'All Stations'], newMeasure)){
// 		//load the file and plot the trace
// 		//get otherData!
// 		trace = otherData;

// 	}else{
// 		// console.log(aqhiData)
// 		trace = aqhiData
// 	}
// 	selectedMeasure = newMeasure;
// 	// $(this).siblings().removeClass('active');
// 	// $(this).addClass('active');
// 	console.log(selectedMeasure)

// 	clearStations();

// 	addAllPoints(trace,selectedMeasure);

// });



// // load 30 data while no one is watching
// d3.csv('augAqhi' + '.csv', function(err, dat) {
// 	dataMonth = dat;
// 	$.each(dataMonth, function(key, value) {
// 		// console.log(value)
// 		value.DATE_PST = (parseTime(value.DATE_PST))

// 	});

// });



// var counter = 0;
// var currentStation, grade, currentDist;



// // function updateTrace(currentDist, trace) {

// //     g.selectAll([".bubble"]).remove();
// //     console.log(currentDist)
// //     dist_num = currentDist.properties.zoneNum;

// //     // if (active.node() === this) return reset();
// //     // active.classed("active", false);
// //     // active = d3.select(this).classed("active", true);


// //     var bounds = path.bounds(currentDist),
// //         dx = bounds[1][0] - bounds[0][0],
// //         dy = bounds[1][1] - bounds[0][1],
// //         x = (bounds[0][0] + bounds[1][0]) / 2,
// //         y = (bounds[0][1] + bounds[1][1]) / 2,
// //         scale = .6 / Math.max(dx / width, dy / height),
// //         translate = [width / 2 - scale * x, height / 2 - scale * y];


// //     svg.transition()
// //         .duration(750)
// //         .call(zoom.transform, initialTransform);


// //     var tooltip = d3.select(".map")
// //         .append("div")
// //         .style("position", "absolute")
// //         .style("z-index", "10")
// //         .style("visibility", "hidden")
// //         .style("color", "#222")
// //         .style("padding", "8px")
// //         .style("background-color", "#fff")
// //         .style("border-radius", "6px")
// //         .style("font", "12 px sans-serif")
// //         .text("tooltip");

// //     var data = {
// //         resource_id: 'e58d2735-6d56-4223-8051-f59924ae5fd9', // the resource id
// //         limit: 10000, // get 5 results
// //         q: '2012/2013',
// //         filters: '{"DISTRICT_NUMBER":' + dist_num + ',"ORGANIZATION_EDUCATION_trace":"' + trace + '"}'
// //     };



// //     $.ajax({
// //         url: 'https://catalogue.data.gov.bc.ca/api/3/action/datastore_search',
// //         data: data,
// //         success: function(data) {
// //             scholLoc = data.result.records
// //             console.log(scholLoc)

// //             var projection = d3.geo.albers()
// //                 .rotate([126, -10])
// //                 .center([7, 44])
// //                 .parallels([50, 58])
// //                 .scale(1970)
// //                 .translate([960 / 2, 600 / 2]);

// //             g.append("g")
// //                 .attr("class", "bubble")
// //                 .selectAll("circle")
// //                 .data(scholLoc)
// //                 .enter()
// //                 .append("circle")
// //                 .attr("cx", function(d) {
// //                     return projection([Number(d.SCHOOL_LONGITUDE), Number(d.SCHOOL_LATITUDE)])[0];
// //                 })
// //                 .attr("cy", function(d) {
// //                     return projection([Number(d.SCHOOL_LONGITUDE), Number(d.SCHOOL_LATITUDE)])[1];
// //                 })
// //                 .attr("r", 10)
// //                 // })
// //                 .on("mouseover", function(d) {
// //                     console.log(d.SCHOOL_NAME)
// //                     tooltip.text(d.SCHOOL_NAME);
// //                     tooltip.style("visibility", "visible");
// //                 })
// //                 .on("mousemove", function() {
// //                     return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX - 300) + "px");
// //                 })
// //                 .on("mouseout", function() {
// //                     return tooltip.style("visibility", "hidden");
// //                 })
// //                 .on("click", function(d) {
// //                     console.log(d)

// //                     var disttext = svg.append("text")
// //                         .transition()
// //                         .delay(200)
// //                         .attr("x", (width / 4))
// //                         .attr("y", 0 - (margin.top / 2))
// //                         .attr("text-anchor", "middle")
// //                         .style("font-size", "16px")
// //                         .text(d.STATION_NAME);

// //                     currentStation = d;
// //                     // if first time make if second update chart
// //                     if (counter == 0) {
// //                         grade = "Avg Class Size 1 3"
// //                         makeChart(d, grade);
// //                         counter += 1;
// //                         console.log(counter)
// //                     } else {
// //                         console.log('this is the grade: ' + grade)
// //                         updatechart(d, grade);
// //                     }
// //                 });

// //         }
// //     })

// // }

// function reset() {
// 	active.classed("active", false);
// 	active = d3.select(null);

// 	// svg.transition()
// 	//     .duration(750)
// 	//     .call(zoom.transform, initialTransform);

// 	d3.select("h3")
// 		.transition()
// 		.delay(750)
// 		.style("visibility", "visible");
// }

// // function zoomed() {
// //     g.style("stroke-width", 1 / d3.event.scale + "px");
// //     g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");

// // }


// // function zoomed() {
// //     g.style("stroke-width", 1 / d3.event.scale + "px");
// //     g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");

// //     g.selectAll("circle")
// //         .attr("r", 10 / d3.event.scale);
// // }

// // function zoomed() {
// //     var transform = d3.event.transform;

// //     g.style("stroke-width", 1.5 / transform.k + "px");
// //     g.attr("transform", transform);
// // }

// // If the drag behavior prevents the default click,
// // also stop propagation so we don’t click-to-zoom.
// function stopped() {
// 	if (d3.event.defaultPrevented) d3.event.stopPropagation();
// }

// // Chart stuff

// function makeChart(currentStation, lineData) {
// 	// get data for this station
// 	stnDat = [];

// 	lineData.forEach(function(d) {
// 		if (d.EMS_ID == currentStation) {
// 			stnDat.push(d)
// 		}
// 	})
// 	console.log(stnDat)


// 	var widthG = 320 - margin.left - margin.right,
// 		heightG = 200 - margin.top - margin.bottom;


// 	var y = d3.scaleLinear()
// 		.rangeRound([heightG, 0]);


// 	var meanLine;

// 	svg1 = d3.select("#chart").append("svg")
// 		.attr("width", widthG + margin.left + margin.right)
// 		.attr("height", heightG + margin.top + 70+'px')
// 		.append("g")
// 		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


// 	stnDat.sort(function(a, b) {
// 		return a.DATE_PST - b.DATE_PST;
// 	});

// 	console.log(stnDat)

// 	var dataSum = d3.sum(stnDat, function(d) {
// 		// console.log(d.sz)
// 		return d.VALUE;
// 	});

// 	var x = d3.scaleTime()
// 		.rangeRound([0, widthG]);


// 	var line = d3.line()
// 		.x(function(d) {
// 			return x(d.DATE_PST)
// 		})
// 		.y(function(d) {
// 			return y(d.VALUE)
// 		});

// 	y.domain([d3.min(stnDat, function(d) {
// 		return d.VALUE;
// 	}), d3.max(stnDat, function(d) {
// 		return d.VALUE;
// 	})]);
// 	x.domain(d3.extent(stnDat, function(d) {
// 		return d.DATE_PST;
// 	}));

// 	console.log(lineData)

// 	svg1.append("g") //x axis group
// 		.attr("class", "x axis")
// 		.attr("transform", "translate(0," + heightG + ")")
// 		.call(d3.axisBottom(x)
// 			.ticks(d3.timeDay.every(7))
// 			.tickFormat(d3.timeFormat("%Y-%m-%d")))
// 		.selectAll("text")
// 		.style("text-anchor", "end")
// 		.attr("dx", "-.8em")
// 		.attr("dy", ".15em")
// 		.attr("transform", "rotate(-65)")
// 		.select(".domain")
// 		.remove();

// 	svg1.append("g")
// 		.call(d3.axisLeft(y))
// 		.attr("class", "y axis")
// 		.append("text")
// 		.attr("transform", "rotate(-90)")
// 		.attr("y", -48)
// 		.attr("dy", ".71em")
// 		.style("text-anchor", "end")
// 		.text("Air Quality");

// 	svg1.append("path")
// 		.datum(stnDat)
// 		.attr("class", "line")
// 		.attr("d", line);

// }



// function updatechart(d, grade) {
// 	console.log(d.SCHOOL_NAME)
// 	console.log(grade)
// 	"use strict";
// 	var data = {
// 		resource_id: '68106e98-99f4-49f2-bcfb-d8093d77602d', // 
// 		limit: 1000, // get 5 results
// 		filters: '{"School Name":' + '"' + d.SCHOOL_NAME + '"' + '}'
// 	};

// 	$.ajax({
// 		url: 'https://catalogue.data.gov.bc.ca/api/3/action/datastore_search',
// 		data: data,
// 		success: function(data) {
// 			console.log(data)
// 			var chartData = []

// 			for (i = 0; i < data.result.records.length; i++) {

// 				chartData.push({
// 					date: parseDate(data.result.records[i]["School Year"].slice(2, 4) + " 06"),
// 					sz: Number(data.result.records[i][grade])
// 				})

// 			}

// 			chartData.sort(function(a, b) {
// 				return a.date - b.date;
// 			});

// 			y.domain(d3.extent(chartData, function(d) {
// 				return d.sz;
// 			}));
// 			console.log(chartData)

// 			x.domain(d3.extent(chartData, function(d) {
// 				// console.log(d.date)
// 				return d.date;
// 			}));

// 			var dataSum = d3.sum(chartData, function(d) {
// 				// console.log(d.sz)
// 				return d.sz;
// 			});

// 			meanLine = d3.svg.line()
// 				.x(function(d) {
// 					console.log(d.date)
// 					return x(d.date);
// 				})
// 				.y(function(d) {
// 					console.log(y(dataSum / chartData.length))
// 					return y(dataSum / chartData.length);
// 				});

// 			//transitions
// 			svg.select(".line")
// 				.transition()
// 				.duration(1000)
// 				.attr("d", line(chartData));

// 			AvgLine.selectAll("path")
// 				.transition()
// 				.duration(1000)
// 				.attr("d", meanLine(chartData));

// 			// svg.selectAll("circle")
// 			//     .data(chartData)
// 			//     .transition()
// 			//     .duration(1000)
// 			//     .attr("r", 3.5)
// 			//     .attr("cx", function (d) {
// 			//         // console.log(d)
// 			//         return x(d.date);
// 			//     })
// 			//     .attr("cy", function (d) {
// 			//         return y(d.sz);
// 			//     })
// 			//     .style("fill", "rgb(214,39,40)");


// 			// Update X axis
// 			svg.select(".y.axis")
// 				.transition()
// 				.duration(1000)
// 				.call(yAxis);

// 			d3.select("text")
// 				.attr("x", (width / 4))
// 				.attr("y", 0 - (margin.top / 2.5))
// 				.attr("text-anchor", "middle")
// 				.style("font-size", "16px")
// 				.text(d.SCHOOL_NAME);
// 		}

// 	})

// }

index.html

<!DOCTYPE html>
<met charset="utf-8">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> -->




<link rel="stylesheet" href="main.css">
<style>
  /*  body {
        margin-left: 112px;
        margin-right: 112px;
    }*/
    #ocean {
        fill: steelblue;
        cursor: pointer;
    }

    .background {
        fill: none;
        pointer-events: all;
    }
    
    #map {
        width: 760px;
        height: 500px;
        background: #fff;
        margin-top: 100px;
    }
    
    #provinces {
        fill: #e3e3e3;
        cursor: pointer;
    }
    

    #prov-borders {
        stroke: #fff;
        stroke-linejoin: round;
    }
    
    
    .aboriginal {
        fill: #006837;
    }
    
    .bubble {
        fill: steelblue;
        fill-opacity: .5;
        stroke: #fff;
        stroke-width: .01px;
    }
    
    .bubble :hover {
    stroke: #000;
    }
    
    .legend_Pop circle {
        fill: none;
        stroke: #ccc;
    }
    
    .legend_Pop text {
        fill: #777;
        font: 10px sans-serif;
        text-anchor: middle;
    }
    
    #byline {
        padding-left: 20px;
        margin-top: -20px;
        font-size: 0.8em;
    }
    
    #intro {
        padding-left: 20px;
        font-size: 20px;
    }

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


    .line {
        fill: none;
        stroke: #FF9900;
        stroke-width: 3px;
    }

    .line1 {
        fill: none;
        stroke: #ddd;
        stroke-width: 1.5px;
    }

    #chart_container {
        position: absolute;
        left:500px;
        top:180px;
        /*background-color: rgba(255,255,255,.7);*/
        /*padding-bottom: 100px;*/
    }

    #chart{
        /*padding-bottom: 100px;*/
    }



    #distid {
    padding-left:600px;
    margin-bottom: -75px;
    }
.btn {
    border-radius: 0px !important;
    transition: linear, ease-in 0.3s !important;
    outline-color: blue;
}

.btn:focus {
    /*color: white !important;*/
    color: black !important;
}

.btn-default {
    color: black !important;
    /*background: transparent !important;*/
    border: black 0px solid !important;
    padding: 2% !important;
}

.btn-default:hover {
    color: white !important;
    background: black !important;
    border-color: black !important;
}

.btn-default:focus {
    outline: none !important;
    text-decoration: none !important;
    /*color: black !important;*/
    /*color: white !important;*/
}

.btn-default:active {
    background: orange !important;
}

.btn-default a {
    color: black !important;
}

.btn-default a:focus {
    color: red !important;
}
.controller-button{
    padding: 10px;
    margin: 10px;
}
.big{
    font-size: 24px;
}
</style>

<body>

<script src="//d3js.org/d3.v4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>

<script type="text/javascript"></script>
<!-- Content -->
<div class="container-fluid info">          
    <div class = "date col-xs-8 col-md-8">
        <h1 class = "current-date"></h1>
        <h1 class = "pollutant-name"></h1>
        <div class = "container-fluid button"></div>
        <div class = "legendSize"></div>
    </div>
    <div class = "weather col-xs-4 col-md-4">
        <h2 class = "current-cond"></h2>
        <p class = "last-date"></p>
        <span class = "current-temp"></span>
        <p class = "wind-info"></p>
    </div>
    
</div>
<!-- <h1>BC Schools Class Size</h1> -->
<div class="container">
    <div class="row meta">
      <!-- <div class="col-md-4"> -->
        <!-- <h3>BC Current Air Quality Data Map</h3> -->
    <!-- </div> -->
    <div class="row">
      <div class="col-md-12">
        <div class="btn-group char-select" role="group" aria-label="..."></div>
      </div>
    </div>
</div>
<p></p>
<!-- <h2 id="distid"> </h2> -->
<p class="map" id="map">

<div id="chart_container">
    <div id="chart"></div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>



<script src="graph.js"></script>
<!-- <script>

</script> -->