D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jab0122
Full window
Github gist
Air and GHG emissions (tonnes/capita)
<<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Module 2 Exercise</title> <style type="text/css"> body { background-color: white; } svg { background-color: azure; } </style> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> </head> <body> <svg width="600" height="600"> <rect x="0" y="0" width="600" height="400" fill="transparent" stroke="black" stroke-width="3"/> <rect x="100" y="250" width="250" height="100" fill="grey"/> <rect x="350" y="270" width="100" height="80" fill="grey"/> <rect x="120" y="100" width="50" height="150" fill="grey"/> <rect x="200" y="120" width="50" height="130" fill="grey"/> <rect x="280" y="80" width="50" height="170" fill="grey"/> <rect x="150" y="270" width="100" height="30" fill="white"/> <line x1="150" y1="285" x2="250" y2="285" stroke="grey" stroke-width="3"/> <line x1="170" y1="270" x2="170" y2="300" stroke="grey" stroke-width="3"/> <line x1="190" y1="270" x2="190" y2="300" stroke="grey" stroke-width="3"/> <line x1="210" y1="270" x2="210" y2="300" stroke="grey" stroke-width="3"/> <line x1="230" y1="270" x2="230" y2="300" stroke="grey" stroke-width="3"/> <rect x="3" y="350" width="594" height="47" fill="burlywood"/> <circle cx="360" cy="30" r="5" fill="black"/> <circle cx="200" cy="20" r="5" fill="black"/> <circle cx="300" cy="40" r="5" fill="black"/> <circle cx="250" cy="50" r="5" fill="black"/> <circle cx="150" cy="30" r="5" fill="black"/> <circle cx="100" cy="40" r="5" fill="black"/> <circle cx="160" cy="60" r="5" fill="black"/> <text x="350" y="80" fill="black" font-size="20" font-weight="bold" font-family="Arial">Air and GHG emissions</text> </svg> <script type="text/javascript"> //Load in contents of CSV file d3.csv("Air and GHG emissions.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