D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
gsarfaty
Full window
Github gist
Child Marriage and Education Test
<!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> </head> <body> <p>Not much to see here; try looking in the console!</p> <script type="text/javascript"> //Load in contents of CSV file d3.csv("Education_Age at first marriage.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> <svg width="640" height="480"> <circle fill="#000000" stroke="#000000" stroke-width="2" cx="47.499999" cy="50.999999" id="svg_1" rx="32.499999" ry="30.999999"/> <circle fill="#ff007f" stroke="#000000" stroke-width="0" cx="130.499999" cy="117.999999" r="32.499999"/> <circle fill="#000000" stroke="#000000" stroke-width="2" cx="239.499999" cy="155.999999" r="32.499999"/> <circle fill="#000000" stroke="#000000" stroke-width="2" cx="53.499999" cy="193.999999" r="32.499999"/> <circle fill="#00ffff" stroke="#000000" stroke-width="0" cx="213.499999" cy="44.999999" r="32.499999"/> <circle fill="#ff007f" stroke="#000000" stroke-width="0" cx="68.499999" cy="320.999999" r="32.499999"/> <circle fill="#000000" stroke="#000000" stroke-width="2" cx="163.499999" cy="259.999999" r="32.499999"/> <circle fill="#ff007f" stroke="#000000" stroke-width="0" cx="575" cy="172" r="32"/> <circle fill="#000000" stroke="#000000" stroke-width="2" cx="585" cy="68" r="32"/> <circle fill="#00ffff" stroke="#000000" stroke-width="0" cx="465" cy="161" r="32"/> <circle fill="#ff007f" stroke="#000000" stroke-width="0" cx="347" cy="173" r="32"/> <circle fill="#ff007f" stroke="#000000" stroke-width="0" cx="467" cy="52" r="32"/> <circle fill="#000000" stroke="#000000" stroke-width="2" cx="352" cy="71" r="32"/> <circle fill="#000000" stroke="#000000" stroke-width="2" cx="197" cy="361" r="32"/> <circle fill="#000000" stroke="#000000" stroke-width="2" cx="293" cy="430" r="32"/> <circle fill="#ff007f" stroke="#000000" stroke-width="0" cx="391" cy="370" r="32"/> <circle fill="#00ffff" stroke="#000000" stroke-width="0" cx="88" cy="427" r="32"/> <circle fill="#00ffff" stroke="#000000" stroke-width="0" cx="489" cy="433" r="32"/> <circle fill="#000000" stroke="#000000" stroke-width="2" cx="569" cy="363" r="32"/> <circle fill="#000000" stroke="#000000" stroke-width="2" cx="512" cy="271" r="32"/> <circle fill="#000000" stroke="#000000" stroke-width="2" cx="392" cy="275" r="32"/> <circle fill="#00ffff" stroke="#000000" stroke-width="0" cx="278" cy="277" r="32"/> <text x="220" y="237" fill="violet" font-size="42" font-weight="bold" font-family="Helvetica">It worked!</text>3 </svg> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js