Data Visualization

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<style>
    body {
        font-family: 'Roboto', sans-serif; 
        padding: 50px 0 75px 50px;
    }
    .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: 'Roboto';
        font-size: 10px;
    }
    
    path {
        fill: none;
        stroke: rgb(0, 0, 0);
        stroke-width: 3;
        shape-rendering: geometricPrecision;
        opacity: 0.5;
    }
    g path:hover {stroke-width: 3; opacity: 1;}
    
    g.highlight path {stroke-width: 3; opacity: 0.25;}
    g.green path {stroke: blue;}
    g.red path {stroke: red;}
    g.highlight path:hover {stroke-width: 3; opacity: 1.5;}
    
    .legend rect {fill: black; stroke: black; opacity: 0.8;}    
    .tick text {font-size: 11px;}
    
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>

<script>

var w = 900,
        h = 400,
        padding = {
            top: 30, 
            right: 50, 
            bottom: 50, 
            left: 100
        };

var dateFormat = d3.time.format("%Y");
    
    // Define axis ranges & scales 
    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);

// Define lines
    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);    })
            .interpolate("monotone");
    
    // Create SVG element
    var svg = d3.select("body")
        .append("svg")
        .attr({ width: w, height: h });
    
    // Load data from CSV file
    d3.csv("ZonAnn.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("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);      
        
        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("Year")
            .style({
                "font-size": 10,
                "font-style": "bold"
            });
        
        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("Temp in \xB0 C")
            .style({
                "font-size": 10,
                "font-style": "bold"
            });

svg.append("text")
        .attr("x", (w / 2))             
        .attr("y", 50)
        .attr("text-anchor", "middle")  
        .style("font-size", "16px")
        .style("font-style", "bold")
        .text("Global and Hemispheric Annual Mean Temperature");
            
        var groups = svg.selectAll(".line")
            .data(dataset)
            .enter()
            .append("g")
            .attr("class", function(d) {
                if (d.catName == "NHem") {
                    return "highlight green";
                } 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 - 115)
            .attr("y", h - padding.bottom)
            .text(function(d) {
                if (d.catName == "NHem") {
                    return "Northern";
                } else if (d.catName == "SHem") {
                    return "Southern";
                } else {
                    return "Global";
                }                
            })
            .style({
                "font-size": 10,
                "font-style": "bold",
                "opacity": 0
            });
            
            lineLabels.transition()
                .delay(500)
                .duration(2000)
                .attr("y", function(d) {

if (d.catName == "NHem") {
                    return yScale(0.91) + 5;
                } else if (d.catName == "SHem") {
                    return yScale(0.58) + 5;
                } else {
                    return yScale(0.75) + 5;
                }
                
                })
                .attr("x",w - 65)
                .style("opacity", 1);

var legend = svg.append("g")
            .attr("class","legend")
            .attr("transform","translate(50,30)")
            .style("font-size","10px")
            .call(d3.legend)

setTimeout(function() { 
            legend
              .style("font-size","20px")
              .attr("data-style-padding",10)
              .call(d3.legend)
          },500)

});
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js