I am trying to display a map on my webpage using D3. The geo data is present in a geojson file. I am using the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<!--<LINK rel="stylesheet" href="style.css" type="text/css">-->
<script type="text/javascript" src="../jslibs/d3_source/d3.v3.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
</script>
</head>
<body>
<script type="text/javascript">
d3.select("body")
.append("p")
.text("D3 is working");
//Variables
var map_width = 960;
var map_height = 1160;
//Append svg
var svg = d3.select("body").append("svg") /*D3 is async. Do this in head to avoid page reorganisation when map arrives*/
.attr("width", map_width)
.attr("height", map_height);
var projection = d3.geo.mercator()
.scale((map_width + 1) / 2 / Math.PI)
.translate([map_width / 2, map_height / 2])
.precision(.1); //Define projection
var path = d3.geo.path().projection(projection); //Define path generator
var g = svg.append("g");
d3.json("./data/MyGeoJSON.geojson", function(error, ug) {
if (error) return console.error(error);
console.log(ug);
g.selectAll("path")
.data(ug.features)
.enter()
.append("path")
.attr("d", path);
});
</script>
</body>
</html>
I am just getting a blank SVG element on my page. No map is getting rendered. I have checked the validity of my GeoJSON file on http://geojsonlint.com/ and http://geojson.io/. Also, I can see the geojson object on the developer console.
I have looked at a few tutorials online and also on StackOverflow and I am not sure where I am going wrong.
