xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Loading CSV Data with D3</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> </head> <body> <svg width="360" height="240"> <rect x="200" y="15" width="102" height="115" fill="orange" /> <circle cx="300" cy="140" r="50" fill="violet" /> <polygon points="200,15 300,130 100, 130" stroke="blue" stroke-width="3" fill="transparent"/> <path d="M10 80 Q 55 10, 100 80 T 200 80" stroke="black" fill="transparent" /> <path d="M20 130 Q 65 60, 120 130 T 220 130" stroke="black" fill="transparent" /> <path d="M30 180 Q 75 90, 140 180 T 240 180" stroke="black" fill="transparent" /> <text x="108" y="80" fill="charcoal" font-size="22" font-weight="bold" font-family="Helvetica">My First SVG code</text> </svg> <p>Not much to see here; try looking in the console!</p> <script type="text/javascript"> //Load in contents of CSV file d3.csv("renewable_energy.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