D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
Lampadaire
Full window
Github gist
Weapons exports worldwide
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Data on weapons export in the world</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> h1,h2,p { font-family:"Helvetica"; } </style> </head> <body> <h1>Who is exporting weapons worldwide?</h1> <h2>Data about weapons export</h2> <p>This is my svg image</p> <!-- Trying out the path element--> <svg width="400" height="400"> <rect x="1" y="1" width="200" height="200" fill="grey"/> <rect x="201" y="1" width="200" height="200" fill="yellow"/> <rect x="1" y="201" width="200" height="200" fill="yellow"/> <rect x="201" y="201" width="200" height="200" fill="grey"/> <!-- Lampadaire top--> <path d="M 10 30 L 25 20 L 40 30 " stroke="white" stroke-width="2"/> <polygon points="14,30 36,30 30,57 20,57"/> <polygon points="15,31 36,30 30,57 20,57" stroke="white"/> <path d="M 25 57 L 25 180" stroke="white" stroke-width="2"/> <rect x="19" y="160" width="11" height="5"/> <polygon points="19,168 30,168 35,190 15,190"/> <circle cx="140" cy="30" r="25" fill="white"/> <text x="240" y="380" font-size="20" font-weight="bold" font-family="Helvetica">LAMPADAIRE</text> </svg> <p>This loads the data</p> <script type="text/javascript"> //This command loads my CSV file - same folder d3.csv("WeaponsExport19952014.csv", function(data) { //Each row in the CSV corresponds to one object of the array //98 JSON objects with years 1995-2014 country and total //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