D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
darkgenio76
Full window
Github gist
Corruption/Development
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Corruption and Population Data</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> </head> <body> <style> svg { margin: 7em 10em; } </style> <svg width="500" height="200"> <line x1="100" y1="85" x2="80" y2="120" stroke="blue" stroke-width="3" /> <line x1="115" y1="150" x2="90" y2="195" stroke="blue" stroke-width="3" /> <line x1="170" y1="85" x2="190" y2="120" stroke="red" stroke-width="3" /> <line x1="155" y1="150" x2="175" y2="195" stroke="red" stroke-width="3" /> <rect x="100" y="80" width="70" height="70" fill="orange" /> <circle cx="133" cy="57" r="30" fill="violet" /> <circle cx="125" cy="53" r="5" fill="black" /> <circle cx="142" cy="53" r="5" fill="black" /> <line x1="120" y1="75" x2="150" y2="75" stroke="black" stroke-width="3" /> <text x="208" y="100" fill="charcoal" font-size="30" font-weight="bold" font-family="Helvetica">I am data</text> <text x="208" y="120" fill="charcoal" font-size="30" font-weight="bold" font-family="Helvetica">...</text> <text x="208" y="150" fill="charcoal" font-size="30" font-weight="bold" font-family="Helvetica">I don't feel so good</text> </svg> <script type="text/javascript"> //Load in contents of CSV file d3.csv("HDI_Corruption_Population.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