xxxxxxxxxx
<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