xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Santiago's first SVG image</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { background-color: #ffffff; } svg { background-color: white; } </style> </head> <body topmargin="25" leftmargin="50" rightmargin="50"> <script type="text/javascript"> //Load in contents of CSV file d3.csv("population-immigrant-status-and-period_2006_canada.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="100%" height="500"> <text x="400" y="204" fill="charcoal" font-size="12" font-weight="normal" font-family="georgia" font-style="italic">Santiago's first code generated SVG image</text> <line x1="0" y1="50.5" x2="100%" y2="50.5" stroke="#cccccc" stroke-width="1"/> <line x1="0" y1="75" x2="100%" y2="75" stroke="#ededed" stroke-width="1"/> <line x1="0" y1="100.5" x2="100%" y2="100.5" stroke="#cccccc" stroke-width="1"/> <line x1="0" y1="125" x2="100%" y2="125" stroke="#ededed" stroke-width="1"/> <line x1="0" y1="150.5" x2="100%" y2="150.5" stroke="#cccccc" stroke-width="1"/> <line x1="0" y1="175" x2="100%" y2="175" stroke="#ededed" stroke-width="1"/> <line x1="0" y1="200.5" x2="390" y2="200.5" stroke="#cccccc" stroke-width="1"/> <line x1="0" y1="225" x2="100%" y2="225" stroke="#ededed" stroke-width="1"/> <line x1="0" y1="250.5" x2="100%" y2="250.5" stroke="#cccccc" stroke-width="1"/> <line x1="0" y1="275" x2="100%" y2="275" stroke="#ededed" stroke-width="1"/> <line x1="0" y1="300.5" x2="100%" y2="300.5" stroke="#cccccc" stroke-width="1"/> <line x1="0" y1="325" x2="100%" y2="325" stroke="#ededed" stroke-width="1"/> <line x1="0" y1="350.5" x2="100%" y2="350.5" stroke="#cccccc" stroke-width="1"/> <circle cx="50" cy="50" r="5" fill="rgba(255, 192, 77, 0.79)"></circle> <circle cx="75" cy="100" r="10" fill="rgba(255, 192, 77, 0.79)"></circle> <circle cx="125" cy="150" r="15" fill="rgba(255, 192, 77, 0.79)"></circle> <circle cx="200" cy="200" r="20" fill="rgba(255, 192, 77, 0.4)"></circle> <circle cx="300" cy="250" r="25" fill="rgba(255, 192, 77, 0.79)"></circle> <circle cx="425" cy="300" r="35" fill="rgba(255, 192, 77, 0.79)"></circle> <circle cx="600" cy="350" r="45" fill="rgba(255, 192, 77, 0.79)"></circle> <circle cx="50" cy="350" r="5" fill="rgba(255, 192, 77, 0.79)"></circle> <circle cx="75" cy="300" r="10" fill="rgba(255, 192, 77, 0.79)"></circle> <circle cx="125" cy="250" r="15" fill="rgba(255, 192, 77, 0.79)"></circle> <circle cx="200" cy="200" r="20" fill="rgba(255, 192, 77, 0.4)"></circle> <circle cx="300" cy="150" r="25" fill="rgba(255, 192, 77, 0.79)"></circle> <circle cx="425" cy="100" r="35" fill="rgba(255, 192, 77, 0.79)"></circle> <circle cx="600" cy="50" r="45" fill="rgba(255, 192, 77, 0.79)"></circle> </svg> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js