I am working on a London map visualization in d3 but I am unable to draw the graph correctly. I do not understand what mistake was in this code. Kindly Help me
What I have tried:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*
{
font-family: "Helvetica Neue";
}
p
{
font-size: 0.85em;
}
.subunits
{
fill: #eeeeee;
stroke: #333;
stroke-width: 0.2;
}
</style>
</head>
<body>
<div id="map"></div>
<script src ="http://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="p.js"></script>
</body>
</html>
//p.js
(function() {
var margin = { top: 0, left: 0, right: 0, bottom: 0},
height = 400 - margin.top - margin.bottom,
width = 800 - margin.left - margin.right;
var svg = d3.select("#map")
.append("svg")
.attr("height",height + margin.top + margin.bottom)
.attr("width", width + margin.left + margin.right)
.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")");
d3.queue()
.defer(d3.json,"london_boroughs.geojson")
.await(ready)
var projection= d3.geoAlbers()
.center([10.5, 55.2])
.rotate([8, 0])
.parallels([0, 15])
.scale(3300)
.translate([width / 2, height / 2]);
var path = d3.geoPath()
.projection(projection)
function ready(error,data,london_stations)
{
console.log(data.features)
svg.selectAll(".subunits")
.data(data.features)
.enter().append("path")
.attr("class","subunits")
.attr("d",path)
}
})();
Submit an article or tip