Skip to content

Instantly share code, notes, and snippets.

@phillipadsmith

phillipadsmith/README.md

Last active August 29, 2015 19:35
Show Gist options
  • Save phillipadsmith/f46bdcda996585ea9ce6 to your computer and use it in GitHub Desktop.
Save phillipadsmith/f46bdcda996585ea9ce6 to your computer and use it in GitHub Desktop.
Download ZIP
Canada's GHGs since 1990
Raw
README.md

Canada's Greenhouse Gas Emissions

A quick look at Canada's GHG emissions since 1990.

Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
#better-then-worse-datavis {
width: 100%;
height: 400px;
}
rect {
fill: steelblue;
}
circle {
fill: steelblue;
}
text {
font: 10px sans-serif;
text-anchor: end;
}
path, line {
stroke: black;
fill: none;
}
</style>
</head>
<body>
<div id="better-then-worse-datavis"></div>
<script>
// Make the data avaialble to the console
var csv_data;
// Find the window dimensions
var margins = {top: 10, right: 10, bottom: 30, left: 30};
var width = parseInt(d3.select("#better-then-worse-datavis").style("width"));
height = parseInt(d3.select("#better-then-worse-datavis").style("height"));
// Setup container & chart dimensions
var container_dimensions = {width: width, height: height},
chart_dimensions = {
width: container_dimensions.width - margins.left - margins.right,
height: container_dimensions.height - margins.top - margins.bottom
};
// Setup SVG
var chart = d3.select("#better-then-worse-datavis")
.append("svg")
.attr("width", container_dimensions.width)
.attr("height", container_dimensions.height)
.append("g")
.attr("transform", "translate(" + margins.left + "," + margins.top + ")")
.attr("id","chart");
// Variables for scales & axis
var time_scale, percent_scale;
var time_axis, count_axis;
// Draw function
function draw(data) {
// Make the data avaialble to the console
csv_data = data;
// Get the extent of the data
var years = d3.extent(data, function(d) { return d.year; });
var ghgs = d3.extent(data, function(d) { return d.ghgs; });
// Muck with dates
var low_year = new Date ( years[0] );
var high_year = new Date ( years[1] );
low_year = low_year.setDate( low_year.getDate() - 365 );
high_year = high_year.setDate( high_year.getDate() + 365 );
var kyoto_year = new Date(1997, 01, 01);
var cop_year = new Date(2009, 01, 01);
// Setup the scales
time_scale = d3.time.scale()
.range([0,chart_dimensions.width])
.domain([low_year,high_year]);
percent_scale = d3.scale.linear()
.range([chart_dimensions.height, 0])
.domain([ghgs[0]-100,ghgs[1]+10]);
// Setup axis
time_axis = d3.svg.axis()
.scale(time_scale);
count_axis = d3.svg.axis()
.scale(percent_scale)
.orient("left");
time_axis.ticks(Math.max(chart_dimensions.height/50, 2));
count_axis.ticks(Math.max(chart_dimensions.width/50, 2));
// Add the time axis
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + chart_dimensions.height + ")")
.call(time_axis);
// Add the percent axis
chart.append("g")
.attr("class", "y axis")
.call(count_axis);
// Axis labels
// Add the y label
d3.select(".y.axis")
.append("text")
.attr("text-anchor","middle")
.text("Total greenhouse gas emissions")
.attr("x", -chart_dimensions.height/3)
.attr("y", -40)
.attr("transform", "rotate(-90)");
// Create lines for the GHG values
var line = d3.svg.line()
.x(function(d){ return time_scale(d.year); })
.y(function(d){ return percent_scale(d.ghgs); })
.interpolate("linear");
// Add a group for the lines
var lines = d3.select("#chart")
.append("g");
lines.append("path")
.attr("class", "line")
.attr("id", "ghgs")
.attr("d", line(data));
// Add line for Kyoto target (550 mt)
var kyoto_target = 550;
var k = d3.select("#chart");
k.append("g")
.attr("class", "k axis")
.append("line")
.attr("x1", time_scale(kyoto_year)) // 1997
.attr("x2", time_scale(high_year)) // end of range
.attr("y1", percent_scale(kyoto_target)) // equiv of 550
.attr("y2", percent_scale(kyoto_target)); // equiv of 550
d3.select(".k").append("text")
.text("Kyoto target (550 mt)")
.attr("x", time_scale(high_year))
.attr("y", percent_scale(kyoto_target)-6);
// Add line for Coppenhagen target (611 mt)
var cop_target = 611;
var cop = d3.select("#chart");
cop.append("g")
.attr("class", "cop axis")
.append("line")
.attr("x1", time_scale(cop_year)) // 2009
.attr("x2", time_scale(high_year)) // end of range
.attr("y1", percent_scale(cop_target)) // equiv of 611
.attr("y2", percent_scale(cop_target)); // equiv of 611
d3.select(".cop").append("text")
.text("Copenhagen target (611 mt)")
.attr("x", time_scale(high_year))
.attr("y", percent_scale(cop_target)-6);
// Add a group for the circles
var circles = d3.select("#chart");
circles.append("g");
// Add points to line
circles.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) { return time_scale( d.year ); })
.attr("cy", function(d) { return percent_scale( d.ghgs ); })
.attr("r",0)
.attr("class", "circle");
// Add mouse overs & transitions (GHCs)
chart.selectAll("circle")
.on("mouseover", function(d){
d3.select(this)
.transition()
.attr("r",12);
})
.on("mouseout", function(d){
d3.select(this)
.transition()
.attr("r",5);
});
var enter_duration = 2000;
chart.selectAll("circle")
.transition()
.delay(function(d, i) { return i / data.length * enter_duration; })
.attr("r", 5);
chart.selectAll("circle")
.on("mouseover.tooltip", function(d){
d3.select("text#ghgs").remove();
d3.select("#chart")
.append("text")
.text(d.ghgs + " mt (" + d.year.getFullYear() + ")")
.attr("x", time_scale(d.year) + 30)
.attr("y", percent_scale(d.ghgs) - 15)
.attr("id", "ghgs");
});
chart.selectAll("circle")
.on("mouseout.tooltip", function(d){
d3.select("text#ghgs")
.transition()
.duration(500)
.style("opacity",0)
.remove();
});
};
d3.csv("https://raw.githubusercontent.com/TheTyee/bottom-lines/master/data/data.csv", function(d) {
return {
year: new Date(+d.Year, 0, 1), // convert "Year" column to Date
ghgs: +d.GHGs,
pop: +d.Population,
kyoto: +d.Kyoto
};
}, draw );
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment