D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
GloriaYL
Full window
Github gist
Unemployment in Spain test
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Loading CSV Data with D3</title> <style type="text/css"> h1 { font-family: Helvetica; font-size: 40px; font-weight: bold; border-top: solid 10px red; } h2 { font-family: Helvetica; font-size: 24px; font-weight: bold; } p { font-family: Helvetica; font-size: 20px; font-style: italic; } </style> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> </head> <body> <h1>MODULE 2 EXERCISE</h1> <h2>SVG IMAGE AND DATA LOGGED INTO THE CONSOLE </h2> <p> Here it is!! My colorful Easter Egg! I'm so happy I managed!! :)</p> <p> Find my data about unemployment in Spain (unfortunately not so fun) in the console</p> <svg width="700" height="500"> <ellipse cx="300" cy="250" rx="100" ry="150" fill="yellow"></ellipse> <circle cx="300" cy="140" r="20" fill="violet" /> <circle cx="240" cy="220" r="15" fill="red" stroke="purple" stroke-width="5"/> <circle cx="350" cy="190" r="15" fill="orange" stroke="blue" stroke-width="5"/> <circle cx="370" cy="280" r="20" fill="blue" /> <circle cx="320" cy="360" r="15" fill="green" stroke="orange" stroke-width="5" /> <circle cx="245" cy="320" r="20" fill="purple" /> <polygon points="300,180 325,230 275,230" fill="green"/> <polygon points="320,275 345,320 295,320" fill="red"/> <text x="270" y="250" fill="black" font-size="20" font-weight="bold" font-family="Helvetica">Happy</text> <text x="270" y="272" fill="black" font-size="20" font-weight="bold" font-family="Helvetica">Easter</text> </svg> <script type="text/javascript"> //Load in contents of CSV file d3.csv("Unemployment in Spain.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