D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
mattsmithGitHub
Full window
Github gist
Canberra Population Growth Data (Module 2)
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Data Visualization and Infographics with D3! (Module 2)</title> <meta name="author" content="Matt Smith" /> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style> svg { background-color:#FFF; width: 400px; height: 340px; } svg text { font-family: "Comic Sans MS", "Comic Sans", cursive; font-size: 1.6em; } </style> </head> <body> <svg> <text x="100" y="300">Have a nice day!</text> <circle cx="200" cy="140" r="120" fill="#FCAF01" stroke="#000" stroke-width="5" /> <ellipse cx="170" cy="110" rx="15" ry="25" /> <ellipse cx="230" cy="110" rx="15" ry="25" /> <path d="M120,140 C100,240 280,270 285,140" fill="#FCAF01" stroke="#000" stroke-width="6" /> </svg> <script type="text/javascript"> //load external data file d3.csv("Population_Growth_Canberra.csv", function(popdata){ //show in console console.log(popdata); }); </script> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js