D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
natemiller
Full window
Github gist
SF Eviction Notice Data: Loading with d3js example
<!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, Arial, sans-serif; background-color: lightblue; padding: 50px; } em { color: darkred; font-weight: bold; font-style: italic; } svg { background-color: lightgreen; stroke-width: 2.5; } </style> </head> <body> <p> <h2>An example of loading CSV data</h2> SF Evicton notice data from 1997-2015 has been loaded into the browser. <em>Look for it in the console.</em> </p> <svg width = "500" height = "500"> <circle cx = "17" cy = "17" r = "12" stroke = "black" fill = "violet" /> <circle cx = "67" cy = "17" r = "12" stroke = "black" fill = "violet" /> <circle cx = "117" cy = "17" r = "12" stroke = "black" fill = "violet" /> <circle cx = "167" cy = "17" r = "12" stroke = "black" fill = "violet" /> <circle cx = "217" cy = "17" r = "12" stroke = "black" fill = "violet" /> <circle cx = "267" cy = "17" r = "12" stroke = "black" fill = "violet" /> <circle cx = "317" cy = "17" r = "12" stroke = "black" fill = "violet" /> <circle cx = "367" cy = "17" r = "12" stroke = "black" fill = "violet" /> <circle cx = "417" cy = "17" r = "12" stroke = "black" fill = "violet" /> <circle cx = "467" cy = "17" r = "12" stroke = "black" fill = "violet" /> <rect x = "0" y = "34" width = "36" height = "200" fill = "orange"/> <rect x = "50" y = "34" width = "36" height = "200" fill = "pink"/> <rect x = "100" y = "34" width = "36" height = "200" fill = "blue"/> <rect x = "150" y = "34" width = "36" height = "200" fill = "green"/> <rect x = "200" y = "34" width = "36" height = "200" fill = "black"/> <rect x = "250" y = "34" width = "36" height = "200" fill = "violet"/> <rect x = "300" y = "34" width = "36" height = "200" fill = "yellow"/> <rect x = "350" y = "34" width = "36" height = "200" fill = "red"/> <rect x = "400" y = "34" width = "36" height = "200" fill = "white"/> <rect x = "450" y = "34" width = "36" height = "200" fill = "grey"/> <rect x = "0" y = "250" width = "36" height = "200" fill = "grey"/> <rect x = "50" y = "250" width = "36" height = "200" fill = "pink"/> <rect x = "100" y = "250" width = "36" height = "200" fill = "red"/> <rect x = "150" y = "250" width = "36" height = "200" fill = "yellow"/> <rect x = "200" y = "250" width = "36" height = "200" fill = "white"/> <rect x = "250" y = "250" width = "36" height = "200" fill = "green"/> <rect x = "300" y = "250" width = "36" height = "200" fill = "blue"/> <rect x = "350" y = "250" width = "36" height = "200" fill = "black"/> <rect x = "400" y = "250" width = "36" height = "200" fill = "orange"/> <rect x = "450" y = "250" width = "36" height = "200" fill = "violet"/> <text x = "5" y = "480" font-size = "15" font-weight = "bold" font-family = "Helvetica">An arrangement of randomly colored rectangles in an svg</text> </svg> <script type="text/javascript"> //Load in contents of CSV file d3.csv("SF_EvictionNotices.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