xxxxxxxxxx<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 src="d3.legend.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