xxxxxxxxxx<meta charset="utf-8"><style> /* set the CSS */body { font: 12px Arial;}path { stroke: steelblue; stroke-width: 2; fill: none;}.axis path,.axis line { fill: none; stroke: grey; stroke-width: 1; shape-rendering: crispEdges;}.legend { font-weight: bold; text-anchor: middle; font: 16px futura;}.title { color: black; text-align: center; font: 16px futura;}.area.above { fill: #bad6e8;}.area.below { fill: #e2cacd;}.line { fill: none; stroke: #000; stroke-width: 2px;}</style><div id="area1"></div><div id="area2"></div><div id="area3"></div><div id="area4"></div><body><!-- load the d3.js library --><script src="https://d3js.org/d3.v3.min.js"></script><script> // Set the dimensions of the canvas / graph var margin = {top: 20, right: 20, bottom: 40, left: 60}, width = 600 - margin.left - margin.right, height = 200 - margin.top - margin.bottom; // Parse the date / time var parseDate = d3.time.format("%Y").parse; // Set the ranges var x = d3.time.scale().range([0, width]); var y = d3.scale.linear().range([height, 0]); // Define the axes var xAxis = d3.svg.axis().scale(x) .orient("bottom").ticks(5); var yAxis = d3.svg.axis().scale(y) .orient("left").ticks(5); // Define the line var priceline = d3.svg.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.price); }); var test = ["#95c3ee", "#227dd2", "#aaaaaa" , "#c2b593", '#595959'] // CHART 1 ////////////////////////////////////////////////////////////// // Adds the svg canvas var chart1 = d3.select("#area1") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Get the data d3.csv("data_v4.csv", function(error, data) { data.forEach(function(d) { d.date = parseDate(d.year); d.price = +d.occurrence; }); // Scale the range of the data x.domain(d3.extent(data, function(d) { return d.date; })); y.domain([0, d3.max(data, function(d) { return d.price; })]); // Add y label chart1.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", -50) .attr("dy", ".71em") .attr("x", -height/2) .style("text-anchor", "middle") .text("No. of occurrences"); // Nest the entries by symbol var dataNest = d3.nest() .key(function(d) {return d.disaster_type;}) .entries(data); var color = d3.scale.ordinal() .range(test); legendSpace = width/dataNest.length; // spacing for the legend // Loop through each symbol / key dataNest.forEach(function(d,i) { chart1.append("path") .attr("class", "line") .style("stroke", function() { // Add the colours dynamically return d.color = color(d.key); }) .attr("id", 'tag'+d.key.replace(/\s+/g, '')) // assign ID .attr("d", priceline(d.values)); }); // Add the X Axis chart1.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); // Add the Y Axis chart1.append("g") .attr("class", "y axis") .call(yAxis); chart1.append("text") .attr('class', 'title') .text('Number of natural disasters') .attr("x", 160); }); // CHART 2 ////////////////////////////////////////////////////////////// // Adds the svg canvas var chart2 = d3.select("#area2") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Get the data d3.csv("data_v4.csv", function(error, data2) { data2.forEach(function(d2) { d2.date = parseDate(d2.year); d2.price = +d2.Total_affected / 1000000; }); // Scale the range of the data x.domain(d3.extent(data2, function(d2) { return d2.date; })); y.domain([0, d3.max(data2, function(d2) { return d2.price; })]); // Add y label chart2.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", -50) .attr("dy", ".71em") .attr("x", -height/2) .style("text-anchor", "middle") .text("No. of people affected (m.)"); // Nest the entries by symbol var dataNest2 = d3.nest() .key(function(d2) {return d2.disaster_type;}) .entries(data2); var color2 = d3.scale.ordinal().range(test); legendSpace2 = width/dataNest2.length; // spacing for the legend // Loop through each symbol / key dataNest2.forEach(function(d2,i) { chart2.append("path") .attr("class", "line") .style("stroke", function() { // Add the colours dynamically return d2.color2 = color2(d2.key); }) .attr("id", 'tag2'+d2.key.replace(/\s+/g, '')) // assign ID .attr("d", priceline(d2.values)); }); // Add the X Axis chart2.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); // Add the Y Axis chart2.append("g") .attr("class", "y axis") .call(yAxis); chart2.append("text") .attr('class', 'title') .text('Affected population') .attr("x", 180); }); // Adds the svg canvas var chart3 = d3.select("#area3") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom + 40) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // CHART 3 ///////////////////////////////////////////////////////////////// // Get the data d3.csv("data_v4.csv", function(error, data2) { data2.forEach(function(d2) { d2.date = parseDate(d2.year); d2.price = +d2.Total_damage / 1000000; }); // Scale the range of the data x.domain(d3.extent(data2, function(d2) { return d2.date; })); y.domain([0, d3.max(data2, function(d2) { return d2.price; })]); // Add y label chart3.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", -50) .attr("dy", ".71em") .attr("x", -height/2) .style("text-anchor", "middle") .text("Damage ($m.)"); // Nest the entries by symbol var dataNest2 = d3.nest() .key(function(d2) {return d2.disaster_type;}) .entries(data2); var color2 = d3.scale.ordinal().range(test); legendSpace2 = width/dataNest2.length; // spacing for the legend // Loop through each symbol / key dataNest2.forEach(function(d2,i) { chart3.append("path") .attr("class", "line") .style("stroke", function() { // Add the colours dynamically return d2.color2 = color2(d2.key); }) .attr("id", 'tag3'+d2.key.replace(/\s+/g, '')) // assign ID .attr("d", priceline(d2.values)); // Add the Legend chart3.append("text") .attr("x", (legendSpace2/2)+i*(legendSpace2+20) - 70) // space legend .attr("y", height + (margin.bottom/2)+ 35) .attr("class", "legend") // style the legend .style("fill", function() { // Add the colours dynamically return d2.color2 = color2(d2.key); }) .on("click", function(){ // Determine if current line is visible var active2 = d2.active2 ? false : true, newOpacity2 = active2 ? 0 : 1; // Hide or show the elements based on the ID d3.select("#tag2"+d2.key.replace(/\s+/g, '')) .transition().duration(100) .style("opacity", newOpacity2); d3.select("#tag"+d2.key.replace(/\s+/g, '')) .transition().duration(100) .style("opacity", newOpacity2); d3.select("#tag3"+d2.key.replace(/\s+/g, '')) .transition().duration(100) .style("opacity", newOpacity2); // Update whether or not the elements are active d2.active2 = active2; }) .text(d2.key); }); // Add the X Axis chart3.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); // Add the Y Axis chart3.append("g") .attr("class", "y axis") .call(yAxis); chart3.append("text") .attr('class', 'title') .text('Damage') .attr("x", 200); chart3.append("text") .attr("y",170) .attr("x", 0) .text('Source: CRED') .style("font-size","10px"); }); var line = d3.svg.area() .interpolate("basis") .x(function(d) { return x(d.date); }) .y(function(d) { return y(d["Value"]); }); var area = d3.svg.area() .interpolate("basis") .x(function(d) { return x(d.date); }) .y1(function(d) { return y(d["Value"]); }); var chart4 = d3.select("#area4").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom + 20) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.tsv("temperature4.txt", function(error, data) { if (error) throw error; data.forEach(function(d) { d.date = parseDate(d.Year); d["Value"]= +d["Value"]; d["Value2"] = +d["Value2"]; }); x.domain(d3.extent(data, function(d) { return d.date; })); y.domain([ d3.min(data, function(d) { return Math.min(d["Value"], d["Value2"]); }), d3.max(data, function(d) { return Math.max(d["Value"], d["Value2"])+1.5; }) ]); chart4.datum(data); chart4.append("clipPath") .attr("id", "clip-below") .append("path") .attr("d", area.y0(height)); chart4.append("clipPath") .attr("id", "clip-above") .append("path") .attr("d", area.y0(0)); chart4.append("path") .attr("class", "area above") .attr("clip-path", "url(#clip-above)") .attr("d", area.y0(function(d) { return y(d["Value2"]); })); chart4.append("path") .attr("class", "area below") .attr("clip-path", "url(#clip-below)") .attr("d", area); chart4.append("path") .attr("class", "line") .attr("d", line); chart4.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); chart4.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", -50) .attr("dy", ".71em") .attr("x", -height/2) .style("text-anchor", "middle") .text("Temperature* (ºC)"); chart4.append("text") .attr("y",33) .attr("x", 50) .text("Paris Agreement 2030 limit"); chart4.append("text") .attr("y",60) .attr("x", 50) .text("Paris Agreement 2030 target"); chart4.append("text") .attr('class', 'title') .text('Global average temperature') .attr("x", 150); chart4.append("text") .attr("y",170) .attr("x", 0) .text("Source: NOAA") .style("font-size","10px"); chart4.append("text") .attr("y",180) .attr("x", 0) .text("*Deviation from 20th century average") .style("font-size","10px"); chart4.append("svg:line") .attr("x1", 0) .attr("x2", width) .attr("y1", 22) .attr("y2", 22)// .attr("stroke-dasharray") .style("stroke", "#89383a"); chart4.append("svg:line") .attr("x1", 0) .attr("x2", width) .attr("y1", 48) .attr("y2", 48) .style("stroke", "#316ab4") });</script></body> Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js