D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
monkeybeth
Full window
Github gist
Random data on the US, 2010-2014
<!DOCTYPE html> <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>I based this shadowed roundy square on the <a href="https://www.w3schools.com/svg/svg_rect.asp">w3schools.com</a> examples of things you can create with SVG </p> <svg height="140" width="140"> <defs> <filter id="f4" rx="0" ry="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" /> <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <rect x='10' y='10' rx='10' ry='10' width="90" height="90" stroke="gray" stroke-width="3" fill="cyan" filter="url(#f4)" /> </svg> <script type="text/javascript"> //Load in contents of CSV file // two parameters: file to load in, then anonymous function // to handle the data. d3.csv("US.csv", function(data) { //Now CSV contents have been transformed into //an array of JSON objects. //JSON=JavaScript Object Notation //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