D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
fedemini
Full window
Github gist
My Project
<!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 { background-color: white; } svg { background-color: #6E6557; } </style> </head> <body> <svg width="800" height="150"> <line x1="10" y1="50" x2="675" y2="48" stroke="white" stroke-width="3" /> <rect x="700" y="50" width="100" height="100" fill="#B8917A" /> <rect x="640" y="100" width="50" height="50" fill="#A69E77" /> <rect x="645" y="70" width="20" height="20" fill="#949C8D" /> <rect x="620" y="70" width="15" height="15" fill="#B9A29A" /> <rect x="600" y="60" width="10" height="10" fill="#B9A29A" /> <rect x="675" y="70" width="15" height="15" fill="#B8917A" /> <rect x="700" y="35" width="10" height="10" fill="#949C8D" /> <rect x="720" y="35" width="10" height="10" fill="#A69E77" /> <rect x="740" y="35" width="10" height="10" fill="white" /> <text x="10" y="40" fill="white" font-size="35" font-weight="bold" font-family="Calibri">My own tests for this data-journalism MOOC</text> <text x="10" y="85" fill="white" font-size="20" font-family="Calibri">Dataset : World Bank Contract awards database</text> </svg> <p> I have selected this donor's 2014 contract awards in the education sector</br> ... And I am going to try to make a nice visualisation in d3 !! </p> <script type="text/javascript"> //Load in contents of CSV file d3.csv("WorldBank_Contractawards_Education.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