xxxxxxxxxx<html> <head> <meta charset="utf-8"> <title>Annual Mean Temperature Change for Hemispheres</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> </head> <style> body {font-family: 'Open Sans', sans-serif; padding: 50px 0 75px 50px;} .annotation {margin: 25px 0 75px 70px; width: 800px;} .footer {margin: 100px 0 50px 70px; width: 800px; font-size: .8em;} h1 {font-size: 2.5em; font-weight: 300;} .textRed {color: red; font-weight: 700;} .textSteelBlue {color: steelblue; font-weight: 700;} .source {font-size: 0.75em; font-style: italic; color: gray;} a, a:visited {color: RoyalBlue;} a:hover {color: red;} .axis path, .axis line { fill: none; stroke: rgb(200, 200, 200); stroke-width: 1; shape-rendering: crispEdges; } .y g:first-child line {stroke: rgb(200, 200, 200);} .axis text { font-family: sans-serif; font-size: 14px; } path { fill: none; stroke: rgb(0, 0, 0); stroke-width: 2; shape-rendering: geometricPrecision; opacity: 0.5; } g path:hover {stroke-width: 2.5; opacity: 1;} g.highlight path {stroke-width: 2; opacity: 0.25;} g.red path {stroke: red;} g.steelblue path {stroke: steelblue;} g.highlight path:hover {stroke-width: 2.5; opacity: 1;} .tick text {font-size: 11px;} </style> <body> <div class="annotation"> <h1>Annual Mean Temperature Change for Hemispheres</h1> <p>This line chart visualizes the GISTEMP data for the <strong>Globe</strong> and the <span class="textSteelBlue">North</span> and <span class="textRed">South</span> Hemispheres,<br> 1880 to present, with <span style="background-color: WhiteSmoke; padding: 0 5px 0 5px; font-style: italic;">the base period 1951-1980</span>.<br> Here you can see an increasing mean Global Temperature over the years.</p> <p>You are able to highlight any of this lines hovering over them.</p> </div> <script type="text/javascript"> var w = 900, h = 400, padding = {top:30, right:50, bottom:50, left:100}; var dateFormat = d3.time.format("%Y"); var xScale = d3.time.scale() .range([padding.left, w - padding.right]), yScale = d3.scale.linear() .range([padding.top, h - padding.bottom]); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .tickSize(0) .tickPadding(10) .tickFormat(function(d) { return dateFormat(d); }), yAxis = d3.svg.axis() .scale(yScale) .orient("left") .tickSize(5) .tickPadding(10); var categories = [ "Glob", "NHem", "SHem" ] var line = d3.svg.line() .x(function(d) { return xScale(dateFormat.parse(d.year)); }) .y(h - padding.bottom) .interpolate("monotone"), line2 = d3.svg.line() .x(function(d) { return xScale(dateFormat.parse(d.year)); }) .y(function(d) { return yScale(+d.amount / 100); //return yScale(+d.amount); }) .interpolate("monotone"); var svg = d3.select("body") .append("svg") .attr({ width: w, height: h }); //Load in contents of CSV file d3.csv("data-dv.csv", function(data) { dataset = [] for (i = 0; i < categories.length; i++) { dataset[i] = { catName: categories[i], value: [] }; for (var j = 0; j < data.length; j++) { dataset[i].value.push({ year: data[j].Year, amount: data[j][categories[i]] }); } } xScale.domain([ d3.min(data, function(d) { return dateFormat.parse(d.Year); }), d3.max(data, function(d) { return dateFormat.parse(d.Year); }) ]); yScale.domain([1.00, -0.60]); d3.select("svg").append("rect") .attr("class", "base-period") .attr({ x: xScale(dateFormat.parse("1951")), y: padding.top, width: xScale(dateFormat.parse("1980")) - xScale(dateFormat.parse("1951")), height: h - padding.top - padding.bottom, fill: "WhiteSmoke ", }); d3.select("svg").append("text") .attr("text-anchor", "middle") .attr({ class: "base-period-label", y: 60, x: xScale(dateFormat.parse("1951")) + (xScale(dateFormat.parse("1980")) - xScale(dateFormat.parse("1951"))) / 2, }) .text("The base period") .style({ "font-size": 12, "font-style": "italic", "fill": "#999" }); d3.select("text.base-period-label") .append("tspan") .attr({ y: 80, x: xScale(dateFormat.parse("1951")) + (xScale(dateFormat.parse("1980")) - xScale(dateFormat.parse("1951"))) / 2, }) .text("1951-1980"); d3.select("svg").append("line") .attr("class", "zero") .attr({ x1: padding.left, y1: yScale(0), x2: w - padding.right, y2: yScale(0), }) .style("stroke", "rgb(230, 230, 230)") .style("shape-rendering", "crispEdges") .style("stroke-width", 1); // here goes axes svg.append("g") .attr("class", "axis x") .attr("transform", "translate(0 ," + (h - padding.bottom) + ")") .call(xAxis) .append("text") .attr("text-anchor", "middle") .attr({ class: "xlabel", y: 45, x: padding.left + (w - padding.left - padding.right) / 2, }) .text("Observation Period, years") .style({ "font-size": 12, "font-style": "italic" }); svg.append("g") .attr("class", "axis y") .attr("transform", "translate(" + (padding.left) + ", 0)") .call(yAxis) .append("text") .attr("text-anchor", "start") .attr({ class: "ylabel", y: 10, x: -32, }) .text("Temperature Anomaly, degree Celsius") .style({ "font-size": 12, "font-style": "italic" }); var groups = svg.selectAll(".line") .data(dataset) .enter() .append("g") .attr("class", function(d) { if (d.catName == "NHem") { return "highlight steelblue"; } else if (d.catName == "SHem") { return "highlight red"; } else { return ""; } }); groups.append("title") .text(function(d) { return d.catName; }); var catLine = groups.selectAll("path") .data(function(d) { return [ d.value ]; }) .enter() .append("path") .attr("class", "line") .attr("d", line); catLine.transition() .delay(500) .duration(2000) .attr("d", line2); var lineLabels = svg.selectAll(".line-label") .data(dataset) .enter() .append("text") .attr("x", w - 45) .attr("y", h - padding.bottom) .text(function(d) { if (d.catName == "NHem") { return "North"; } else if (d.catName == "SHem") { return "South"; } else { return "Global"; } }) .style({ "font-size": 12, "font-style": "italic", "opacity": 0 }); lineLabels.transition() .delay(500) .duration(2000) .attr("y", function(d) { if (d.catName == "NHem") { return yScale(0.91) + 3; } else if (d.catName == "SHem") { return yScale(0.58) + 3; } else { return yScale(0.75) + 3; } }) .style("opacity", 1); }); </script> <div class="footer"> <hr noshade size=1 width=75 align="left"> <p>This chart was made as a practical part for <a href="https://twitter.com/search?q=%23ILLINOISdatavisualization&src=hash">#ILLINOISdatavisualization</a> MOOC.</p> <p>Data sources:</p> <ul> <li>GISTEMP Team, 2015: GISS Surface Temperature Analysis (GISTEMP). NASA Goddard Institute for Space Studies. Dataset accessed 2015-07-30 at <a href="https://data.giss.nasa.gov/gistemp/">https://data.giss.nasa.gov/gistemp/</a></li> <li>Hansen, J., R. Ruedy, M. Sato, and K. Lo, 2010: <a href="https://pubs.giss.nasa.gov/abs/ha00510u.html">Global surface temperature change</a>, Rev. Geophys., 48, RG4004, doi:10.1029/2010RG000345.</li> </ul> </div> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js