D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
nikhilkardale
Full window
Github gist
Fun with SVG and D3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Fun with D3, SVG and a CSV file</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> </head> <body> <svg width="500" height="600"> <circle cx="250" cy="250" r="200" stroke="black" stroke-width="3" fill="white" /> <polygon points="250,190 220,310 280,310" style="fill:lime;stroke:black;stroke-width:1" /> <ellipse cx="170" cy="150" rx="60" ry="20" style="fill:yellow;stroke:black;stroke-width:1" /> <ellipse cx="330" cy="150" rx="60" ry="20" style="fill:yellow;stroke:black;stroke-width:1" /> <path d="M 100 300 q 150 150 300 0" stroke="red" stroke-width="3" fill="none" /> <text fill="charcoal" font-size="16" font-weight="bold" font-family="Helvetica"> <tspan x="180" y="500">Liked the smiley?</tspan> <tspan x="50" y="530">Now, open the browser's console to see the CSV data!</tspan> </text> </svg> <script type="text/javascript"> // logging the contents of the CSV file to the console, // into an array of JSON objects d3.csv("co2_emissions.csv", function(data){ console.log(data); }); </script> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js