D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
Paperpanic
Full window
Github gist
Module2 Test
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Module2 exercise</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { background-color: white; } svg { background-color: DimGray; } </style> </head> <body> <svg width="800" height="600"> <line x1="10" y1="10" x2="790" y2="10" stroke="darkgrey" stroke-width="2" /> <line x1="10" y1="590" x2="790" y2="590" stroke="darkgrey" stroke-width="2" /> <text x="20" y="45" fill="darkgrey" font-size="38" font-weight="bold" font-family="Arial">NYC 2 POPULATIONS FROM 1960 to 1980</text> <text x="250" y="80" fill="white" font-size="30" font-weight="normal" font-family="Arial">Percentage by decade</text> <rect x="20" y="120" width="80" height="320" fill="orange" /> <rect x="20" y="120" width="70" height="320" fill="darkorange" /> <text x="30" y="460" fill="white" font-size="10" font-weight="normal" font-family="Arial">School Agers</text> <rect x="120" y="200" width="80" height="240" fill="MidnightBlue" /> <rect x="120" y="200" width="70" height="240" fill="navy" /> <text x="160" y="460" fill="white" font-size="10" font-weight="normal" font-family="Arial">65+</text> <text x="85" y="500" fill="white" font-size="25" font-weight="bold" font-family="Arial">1960</text> <rect x="240" y="140" width="80" height="300" fill="orange" /> <rect x="240" y="140" width="70" height="300" fill="darkorange" /> <text x="250" y="460" fill="white" font-size="10" font-weight="normal" font-family="Arial">School Agers</text> <rect x="330" y="180" width="80" height="260" fill="MidnightBlue" /> <rect x="330" y="180" width="70" height="260" fill="navy" /> <text x="360" y="460" fill="white" font-size="10" font-weight="normal" font-family="Arial">65+</text> <text x="300" y="500" fill="white" font-size="25" font-weight="bold" font-family="Arial">1970</text> <rect x="450" y="190" width="80" height="250" fill="orange" /> <rect x="450" y="190" width="70" height="250" fill="darkorange" /> <text x="460" y="460" fill="white" font-size="10" font-weight="normal" font-family="Arial">School Agers</text> <rect x="540" y="180" width="80" height="260" fill="MidnightBlue" /> <rect x="540" y="180" width="70" height="260" fill="navy" /> <text x="570" y="460" fill="white" font-size="10" font-weight="normal" font-family="Arial">65+</text> <text x="510" y="500" fill="white" font-size="25" font-weight="bold" font-family="Arial">1980</text> </svg> <script type="text/javascript"> //Load in contents of CSV file d3.csv("NYC-SchoolAge-65Populations.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