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> <style type="text/css"> svg { background-color: #ddddff; } </style> </head> <body> <p>Not much to see here; try looking in the console! Oh, and open this in its own window!</p> <svg width='500' height='300'> <circle cx="250" cy="150" r="100" fill="red"></circle> <circle cx='220' cy='110' r='10' fill='black' /> <circle cx='300' cy='110' r='10' fill='black' /> <polyline fill="none" stroke="black" points="250,120 270,160 240,160" stroke-width="5"></polyline> <path d="M200,170 A50,20 0 1,0 320,190" style="stroke:black; stroke-width:5; fill:none;"></path> <text x="250" y="280" fill="charcoal" font-size="18" font-weight="bold" font-family="Helvetica" text-anchor='middle'>SVG is fun!</text> </svg> <script type="text/javascript"> //Load in contents of CSV file d3.csv("https://gist.githubusercontent.com/kent37/313c30a0fda288f994a2/raw/0e489d6d0cbd877d4fec6d54b6ec9bc60839d4b4/CambridgeDevelopment.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); }); d3.select('circle') .transition().duration(5000).attr('fill', 'yellow') .transition().duration(5000).attr('fill', 'red') .each('end', function() { d3.select('text').text('So is D3!').attr('fill', 'blue')}); </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js