D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
abbhakan
Full window
Github gist
Assignment 4
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Greenhouse gas emissions</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { background-color: white; font-family: Helvetica, Arial, sans-serif; } h1 { font-size: 24px; margin: 0; } p { font-size: 14px; margin: 10px 0 0 0; } svg { background-color: white; } circle:hover { fill: red; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } </style> </head> <body> <h1>Greenhouse gas emissions (1990 - 2012)</h1> <p>Greenhouse gas emissions from 1990 - 2012 by OECD country. The unit is in houndred thousands tonnes of CO2 equivalent. Source: <a href="https://www.oecd-ilibrary.org/environment/data/oecd-environment-statistics/greenhouse-gas-emissions_data-00594-en">OECD</a>, 2015</p> <script type="text/javascript"> var w = 700; var h = 600; var padding = [ 50, 10, 50, 100 ]; //Top, right, bottom, left var year = "1990"; var year2 = "2012"; var xScale = d3.scale.linear() .range([ padding[3], w - padding[1] - padding[3] ]); var yScale = d3.scale.linear() .range([ padding[0], h - padding[2] ]); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(15); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .ticks(15); var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); d3.csv("GreenhouseEmissions.csv", function(data) { xScale.domain([ d3.min(data, function(d) { return +d[year]/1000; }), d3.max(data, function(d) { return +d[year]/1000; }) ]); yScale.domain([ d3.max(data, function(d) { return +d[year2]/1000; }), d3.min(data, function(d) { return +d[year2]/1000; }) ]); var circles = svg.selectAll("circle") .data(data) .enter() .append("circle"); circles.attr("cx", function(d) { return xScale(+d[year]/1000); }) .attr("cy", function(d) { return yScale(+d[year2]/1000); }) .attr("r", 0.1) .attr("fill", "green") .append("title") .text(function(d) { return d.Country + "'s greenhouse gas emissions 1990 is " + d[year] + ", and 2012 " + d[year2] + ""; }); circles.sort(function(a, b) { return d3.ascending(+a[year], +b[year]); }) .transition() .delay(function(d, i) { return i * 50; }) .duration(2000) .attr("r", 4); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (h - padding[2] + 10) + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + (padding[3] - 10) + ",0)") .call(yAxis); svg.append("text") .attr("class", "x label") .attr("text-anchor", "end") .attr("x", w/2+100) .attr("y", h) .text("emissions (1990)"); svg.append("text") .attr("class", "y label") .attr("text-anchor", "end") .attr("y", 6) .attr("x", -(h/2-100)) .attr("dy", ".75em") .attr("transform", "rotate(-90)") .text("emissions (2012)"); }); </script> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js