Annual Mean Temperature Change for Hemispheres

<!DOCTYPE html>
<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&nbsp;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" ]

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