D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
CatLeal
Full window
Github gist
Infant Mortality Rate EU
<!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> <svg width="550" height="100"> <rect x="10" y="0" width="10" height="40" fill="black"/> <rect x="0" y="10" width="30" height="7" fill="black"/> <rect x="50" y="0" width="10" height="40" fill="black"/> <rect x="40" y="10" width="30" height="7" fill="black"/> <rect x="90" y="0" width="10" height="40" fill="black"/> <rect x="80" y="10" width="30" height="7" fill="black"/> <rect x="130" y="0" width="10" height="40" fill="black"/> <rect x="120" y="10" width="30" height="7" fill="black"/> <rect x="170" y="0" width="10" height="40" fill="black"/> <rect x="160" y="10" width="30" height="7" fill="black"/> <rect x="210" y="0" width="10" height="40" fill="black"/> <rect x="200" y="10" width="30" height="7" fill="black"/> <rect x="250" y="0" width="10" height="40" fill="black"/> <rect x="240" y="10" width="30" height="7" fill="black"/> <rect x="290" y="0" width="10" height="40" fill="black"/> <rect x="280" y="10" width="30" height="7" fill="black"/> <rect x="330" y="0" width="10" height="40" fill="black"/> <rect x="320" y="10" width="30" height="7" fill="black"/> <rect x="370" y="0" width="10" height="40" fill="black"/> <rect x="360" y="10" width="30" height="7" fill="black"/> <rect x="410" y="0" width="10" height="40" fill="black"/> <rect x="400" y="10" width="30" height="7" fill="black"/> <rect x="450" y="0" width="10" height="40" fill="black"/> <rect x="440" y="10" width="30" height="7" fill="black"/> <rect x="490" y="0" width="10" height="40" fill="black"/> <rect x="480" y="10" width="30" height="7" fill="black"/> <rect x="10" y="50" width="10" height="40" fill="black"/> <rect x="0" y="60" width="30" height="7" fill="black"/> <rect x="50" y="50" width="10" height="40" fill="black"/> <rect x="40" y="60" width="30" height="7" fill="black"/> <rect x="90" y="50" width="10" height="40" fill="black"/> <rect x="80" y="60" width="30" height="7" fill="black"/> <rect x="130" y="50" width="10" height="40" fill="black"/> <rect x="120" y="60" width="30" height="7" fill="black"/> <rect x="170" y="50" width="10" height="40" fill="black"/> <rect x="160" y="60" width="30" height="7" fill="black"/> <rect x="210" y="50" width="10" height="40" fill="black"/> <rect x="200" y="60" width="30" height="7" fill="black"/> <rect x="250" y="50" width="10" height="40" fill="black"/> <rect x="240" y="60" width="30" height="7" fill="black"/> <rect x="290" y="50" width="10" height="40" fill="black"/> <rect x="280" y="60" width="30" height="7" fill="black"/> <rect x="330" y="50" width="10" height="40" fill="black"/> <rect x="320" y="60" width="30" height="7" fill="black"/> <rect x="370" y="50" width="10" height="40" fill="black"/> <rect x="360" y="60" width="30" height="7" fill="black"/> <rect x="410" y="50" width="10" height="40" fill="black"/> <rect x="400" y="60" width="30" height="7" fill="black"/> <rect x="450" y="50" width="10" height="40" fill="black"/> <rect x="440" y="60" width="30" height="7" fill="black"/> <rect x="490" y="50" width="10" height="40" fill="black"/> <rect x="480" y="60" width="30" height="7" fill="black"/> </svg> <p><font size= "6">For all the little stars in the sky! </font><br> Data for the EU + EFTA countries 1960-2012 to be seen in the console!</p> <script type="text/javascript"> //Load in contents of CSV file d3.csv("Data_InfantMortalityRate.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