D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
Mavromatika
Full window
Github gist
Exercise for module 2
<!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> <style type="text/css"> body{ font-family: Helvetica; } </style> </head> <body> <h2>Exercise for module 2</h2> <p>This is a scalable Greek flag : </p> <svg width="620" height="420"> <rect x="6" y="7" width="600" height="405" fill=black opacity="0.2"/> <rect x="0" y="0" width="600" height="45" fill="blue"/> <rect x="0" y="45" width="600" height="45" fill="white"/> <rect x="0" y="90" width="600" height="45" fill="blue"/> <rect x="0" y="135" width="600" height="45" fill="white"/> <rect x="0" y="180" width="600" height="45" fill="blue"/> <rect x="0" y="225" width="600" height="45" fill="white"/> <rect x="0" y="270" width="600" height="45" fill="blue"/> <rect x="0" y="315" width="600" height="45" fill="white"/> <rect x="0" y="360" width="600" height="45" fill="blue"/> <rect x="0" y="0" width="225" height="225" fill="blue"/> <rect x="0" y="90" width="225" height="45" fill="white"/> <rect x="90" y="0" width="45" height="225" fill="white"/> </svg> <p>As a bonus, data has been loaded (in theory).</p> <script type="text/javascript"> //Load in contents of CSV file d3.csv("hcpi_eurostat.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