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>
<style type="text/css">
body{
font-family: Helvetica;
}
</style>
</head>
<body>
<h2>Exercise for module 2</h2>
<p>This is a scalable Greek flag : </p>
<svg width="620" height="420">
<rect x="6" y="7" width="600" height="405" fill=black opacity="0.2"/>
<rect x="0" y="0" width="600" height="45" fill="blue"/>
<rect x="0" y="45" width="600" height="45" fill="white"/>
<rect x="0" y="90" width="600" height="45" fill="blue"/>
<rect x="0" y="135" width="600" height="45" fill="white"/>
<rect x="0" y="180" width="600" height="45" fill="blue"/>
<rect x="0" y="225" width="600" height="45" fill="white"/>
<rect x="0" y="270" width="600" height="45" fill="blue"/>
<rect x="0" y="315" width="600" height="45" fill="white"/>
<rect x="0" y="360" width="600" height="45" fill="blue"/>
<rect x="0" y="0" width="225" height="225" fill="blue"/>
<rect x="0" y="90" width="225" height="45" fill="white"/>
<rect x="90" y="0" width="45" height="225" fill="white"/>
</svg>
<p>As a bonus, data has been loaded (in theory).</p>
<script type="text/javascript">
//Load in contents of CSV file
d3.csv("hcpi_eurostat.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