xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Greenhouse gas emissions</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { background-color: #000000; } svg { background-color: white; } </style> </head> <body> <div id="mydiv"></div> <img src="Ribbon.png" alt="Ribbon" style="width:304px;height:20px"> <script type="text/javascript"> var mySVG = d3.select("#mydiv") .append("svg") .attr("width", 800) .attr("height", 800); mySVG.append("rect") .style("stroke", "gray") .style("fill", "blue") .attr("x", 200) .attr("y", 200) .attr("width", 400) .attr("height", 400) .on("mouseover", function(){d3.select(this).style("fill", "red");}) .on("mouseout", function(){d3.select(this).style("fill", "blue");}) .on("mousedown", animateShrink); mySVG.append("text").text("Click Me!") .attr("x", 220) .attr("y", 250) .attr("fill", "white") .attr("font-family", "Calibri") function animateShrink(){ d3.select(this) .transition() .delay(0) .duration(1000) .attr("width", 100) .attr("height", 100) .each("end", animateExpand); }; function animateExpand(){ d3.select(this) .transition() .duration(1000) .attr("width", 400) .attr("height", 400) }; //Load in contents of CSV file d3.csv("GreenhouseEmissions.csv", function(data) { //Now CSV contents have been transformed into //an array of JSON objects. //Log 'data' to the console, for verification. console.log(data); }); </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js