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> <p>Thanks for watching! Don't forget looking to the console! ;)</p> <svg width="500" height="400"> <line x1="30" y1="63" x2="475" y2="63" stroke="#6dcff6" stroke-width="2" /> <line x1="220" y1="95" x2="475" y2="95" stroke="#00b9f1" stroke-width="3" /> <ellipse cx="203" cy="360" rx="135" ry="30" style="fill:#6dcff6" /> <ellipse cx="203" cy="356" rx="130" ry="27" style="fill:#ffffff" /> <ellipse cx="203" cy="350" rx="90" ry="20" style="fill:#6dcff6" /> <ellipse cx="203" cy="346" rx="83" ry="18" style="fill:#ffffff" /> <ellipse cx="203" cy="344" rx="45" ry="10" style="fill:#6dcff6" /> <ellipse cx="203" cy="340" rx="41" ry="9" style="fill:#ffffff" /> <rect x="150" y="-30" height="100" width="100" style="stroke:none; fill: #6dcff6" transform="translate(30) rotate(45 50 50)"/> <circle cx="207" cy="207" r="101" fill="#6dcff6" /> <ellipse cx="207" cy="216" rx="90" ry="90" style="fill:darkblue;stroke:none;stroke-width:2" /> <circle cx="207" cy="207" r="95" fill="#ffffff" /> <circle cx="203" cy="203" r="95" fill="#6dcff6" /> <circle cx="160" cy="150" r="15" fill="#e1f3fd" /> <circle cx="163" cy="153" r="15" fill=darkblue /> <circle cx="160" cy="150" r="15" fill="#e1f3fd" /> <text x="30" y="60" fill="charcoal" font-size="42" font-weight="bold" font-family="Georgia">Water Consumption</text> <text x="290" y="90" fill="#00b9f1" font-size="24" font-weight="light" font-family="Helvetica">In New York City</text> </svg> <script type="text/javascript"> //Load in contents of CSV file d3.csv("Water_Consumption_In_The_New_York_City.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