D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
abipai192
Full window
Github gist
AFOL - Adult Fan of Legos (3rd attempt)
<!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>Not much to see here; try looking in the console!</p> <script type="text/javascript"> <svg width="1000" height="1000"> <line x1="10" y1="10" x2="100" y2="200"stroke="#999" stroke-width="5" stroke-linecap="round"/> <polyline points="580,10 560,390 540,200 520,390 400,390"stroke="#c00" stroke-width="5" stroke-linecap="round"stroke-linejoin="round" fill="none"/> <polygon points="350,75 379,161 469,161 397,215,423,301,350,250 277,301 303,215 231,161 321,161"stroke="#ff0" stroke-width="10" fill="#ff6"/> <rect x="100" y="10" width="150" height="100" rx="10" ry="20"stroke="#060" stroke-width="8" fill="#0f0"/> <circle cx="100" cy="300" r="80"stroke="#909" stroke-width="10" fill="#f6f"/> <ellipse cx="450" cy="50" rx="80" ry="30"stroke="#0cc"stroke-width="10" fill="#0ff"/> <text x="240" y="390" font-family="sans-serif" font-size="50" fill="#00f">SVG</text> </svg> //Load in contents of CSV file d3.csv("AFOLCopy.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