D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
mfgjunqueira
Full window
Github gist
Exercises for Modules 1 & 2
<!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>Junqueiras's SVG Sandbox</p> <svg height="200" width="400"> <rect width="400" height="200" stroke="black" stroke-width="4" fill="yellow" opacity="0.1" /> <circle cx="20" cy="20" r="10" stroke="blue" stroke-width="2" fill="lightblue" /> <rect x="40" y="40" width="40" height="40" stroke="black" stroke-width="4" fill="grey" /> <rect x="60" y="20" rx="10" ry="10" width="40" height="40" style="fill:yellow;stroke:orange;stroke-width:4;opacity:0.8;stroke-opacity:0.9" /> <ellipse cx="120" cy="100" rx="20" ry="40" fill="purple" opacity="0.4" transform="rotate(30 20,40)" /> <line x1="120" y1="100" x2="320" y2="150" style="stroke:rgb(255,0,0);stroke-width:2" /> <polygon points="200,10 210,80 180,100" style="fill:lightgreen" /> <polyline points="300,10 230,40 270,10 260,40" stroke="brown" stroke-width=1 fill="white" /> <text x="330" y="20" fill="grey">Testing <tspan x=330 y="40">One, Two,</tspan> <tspan x=330 y="65">Three</tspan></text> <image xlink:href="Corinthians.svg" x="250" y="80" width="70" height="70" opacity="0.5" /> </svg> <script type="text/javascript"> d3.csv("BrazilianLeague_A_B_2003_2014.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