D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
keboice
Full window
Github gist
Module 2: Data Load, SVG
<!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> <script type="text/javascript"> //Load in contents of CSV file d3.csv("degrees.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> <svg width="300" height="300"> <g> <path fill="#00AEEF" d="M151.2,70.5c31.2,0,56.4,25.3,56.4,56.5c0,31.2-25.3,56.4-56.4,56.4c-31.2,0-56.4-25.3-56.4-56.4 C94.8,95.8,120.1,70.5,151.2,70.5"/> <path d="M197.3,178.5c-12.2,11-28.4,17.7-46.1,17.7c-17.7,0-33.8-6.7-46.1-17.7c-32.9,17.5-55.4,53-55.7,94.1H253 C252.8,231.5,230.2,195.9,197.3,178.5z"/> </g> <g> <line stroke="#000000" stroke-width="2" x1="212.3" y1="91.8" x2="212.3" y2="180"/> <polygon stroke="#E6E6E5" stroke-width="1" points="65.3,75.5 152.3,25.6 239.2,77.8 154.9,130 "/> </g> <text x="16" y="273" fill="orange" font-size="42" font-weight="bold" font-family="Helvetica">Class of 2015</text> </svg> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js