Reputation: 13
Trying to create a map with D3, but it isn't showing up
I'm trying to draw a map of Asia using d3. I followed this tutorial with ended with the following example: http://maptimeboston.github.io/d3-maptime/example3/index.html
So I decided to try and adapt that example for my purposes. I got the Asia data from here: https://github.com/codeforamerica/click_that_hood/blob/master/public/data/asia.geojson
So my neighborhoods.js code now looks like this (not entire file included):
var neighborhoods_json = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "Cyprus",
"created_at": "2013-12-04T08:41:11+0100",
"updated_at": "2013-12-04T08:41:12+0100",
"cartodb_id": 27
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[33.973617, 35.058506],
[34.004881, 34.978098],
[32.979827, 34.571869],
[32.490296, 34.701655],
[32.256667, 35.103232],
[32.73178, 35.140026],
[32.919572, 35.087833],
[33.190977, 35.173125],
[33.383833, 35.162712],
[33.455922, 35.101424],
[33.475817, 35.000345],
[33.525685, 35.038688],
[33.675392, 35.017863],
[33.86644, 35.093595],
[33.973617, 35.058506]
]
]
]
}
}, {
"type": "Feature",
"properties": {
"name": "Georgia",
"created_at": "2013-12-04T08:41:11+0100",
"updated_at": "2013-12-04T08:41:12+0100",
"cartodb_id": 75
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[41.554084, 41.535656],
[41.703171, 41.962943],
[41.45347, 42.645123],
[40.875469, 43.013628],
[40.321394, 43.128634],
[39.955009, 43.434998],
[40.076965, 43.553104],
[40.922185, 43.382159],
[42.394395, 43.220308],
[43.756017, 42.740828],
[43.9312, 42.554974],
[44.537623, 42.711993],
[45.470279, 42.502781],
[45.77641, 42.092444],
[46.404951, 41.860675],
[46.145432, 41.722802],
[46.637908, 41.181673],
[46.501637, 41.064445],
[45.962601, 41.123873],
[45.217426, 41.411452],
[44.97248, 41.248129],
[43.582746, 41.092143],
[42.619549, 41.583173],
[41.554084, 41.535656]
]
]
]
}
}, {
"type": "Feature",
"properties": {
"name": "Nepal",
"created_at": "2013-12-04T08:41:11+0100",
"updated_at": "2013-12-04T08:41:12+0100",
"cartodb_id": 121
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[88.120441, 27.876542],
[88.043133, 27.445819],
[88.174804, 26.810405],
[88.060238, 26.414615],
[87.227472, 26.397898],
[86.024393, 26.630985],
[85.251779, 26.726198],
[84.675018, 27.234901],
[83.304249, 27.364506],
[81.999987, 27.925479],
[81.057203, 28.416095],
[80.088425, 28.79447],
[80.476721, 29.729865],
[81.111256, 30.183481],
[81.525804, 30.422717],
[82.327513, 30.115268],
[83.337115, 29.463732],
[83.898993, 29.320226],
[84.23458, 28.839894],
[85.011638, 28.642774],
[85.82332, 28.203576],
[86.954517, 27.974262],
[88.120441, 27.876542]
]
]
]
}
}, {
"type": "Feature",
"properties": {
"name": "Palestine",
"created_at": "2013-12-04T08:41:11+0100",
"updated_at": "2013-12-04T08:41:12+0100",
"cartodb_id": 4
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[35.545665, 32.393992],
[35.545252, 31.782505],
[35.397561, 31.489086],
[34.927408, 31.353435],
[34.970507, 31.616778],
[35.225892, 31.754341],
[34.974641, 31.866582],
[35.18393, 32.532511],
[35.545665, 32.393992]
]
]
]
}
}, {
"type": "Feature",
"properties": {
"name": "Qatar",
"created_at": "2013-12-04T08:41:11+0100",
"updated_at": "2013-12-04T08:41:12+0100",
"cartodb_id": 13
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[50.810108, 24.754743],
[50.743911, 25.482424],
[51.013352, 26.006992],
[51.286462, 26.114582],
[51.589079, 25.801113],
[51.6067, 25.21567],
[51.389608, 24.627386],
[51.112415, 24.556331],
[50.810108, 24.754743]
]
]
]
}
}, {
"type": "Feature",
"properties": {
"name": "South Korea (Republic of Korea)",
"created_at": "2013-12-04T08:41:11+0100",
"updated_at": "2013-12-29T19:58:09+0100",
"cartodb_id": 102
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[128.349716, 38.612243],
[129.21292, 37.432392],
[129.46045, 36.784189],
[129.468304, 35.632141],
[129.091377, 35.082484],
[128.18585, 34.890377],
[127.386519, 34.475674],
[126.485748, 34.390046],
[126.37392, 34.93456],
[126.559231, 35.684541],
[126.117398, 36.725485],
[126.860143, 36.893924],
[126.174759, 37.749686],
[126.237339, 37.840378],
[126.68372, 37.804773],
[127.073309, 38.256115],
[127.780035, 38.304536],
[128.205746, 38.370397],
[128.349716, 38.612243]
]
]
]
}
}, {
"type": "Feature",
"properties": {
"name": "Sri Lanka",
"created_at": "2013-12-04T08:41:11+0100",
"updated_at": "2013-12-04T08:41:12+0100",
"cartodb_id": 108
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[81.787959, 7.523055],
[81.637322, 6.481775],
[81.21802, 6.197141],
[80.348357, 5.96837],
[79.872469, 6.763463],
[79.695167, 8.200843],
[80.147801, 9.824078],
[80.838818, 9.268427],
[81.304319, 8.564206],
[81.787959, 7.523055]
]
]
]
}
}, {
"type": "Feature",
"properties": {
"name": "Afghanistan",
"created_at": "2013-12-04T08:41:11+0100",
"updated_at": "2013-12-04T08:41:12+0100",
"cartodb_id": 16
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[61.210817, 35.650072],
[62.230651, 35.270664],
[62.984662, 35.404041],
[63.193538, 35.857166],
[63.982896, 36.007957],
[64.546479, 36.312073],
[64.746105, 37.111818],
[65.588948, 37.305217],
[65.745631, 37.661164],
[66.217385, 37.39379],
[66.518607, 37.362784],
[67.075782, 37.356144],
[67.83, 37.144994],
[68.135562, 37.023115],
[68.859446, 37.344336],
[69.196273, 37.151144],
[69.518785, 37.608997],
[70.116578, 37.588223],
[70.270574, 37.735165],
[70.376304, 38.138396],
[70.806821, 38.486282],
[71.348131, 38.258905],
[71.239404, 37.953265],
[71.541918, 37.905774],
[71.448693, 37.065645],
[71.844638, 36.738171],
[72.193041, 36.948288],
[72.63689, 37.047558],
[73.260056, 37.495257],
[73.948696, 37.421566],
[74.980002, 37.41999],
[75.158028, 37.133031],
[74.575893, 37.020841],
[74.067552, 36.836176],
[72.920025, 36.720007],
[71.846292, 36.509942],
[71.262348, 36.074388],
[71.498768, 35.650563],
[71.613076, 35.153203],
[71.115019, 34.733126],
[71.156773, 34.348911],
[70.881803, 33.988856],
[69.930543, 34.02012],
[70.323594, 33.358533],
[69.687147, 33.105499],
[69.262522, 32.501944],
[69.317764, 31.901412],
[68.926677, 31.620189],
[68.556932, 31.71331],
[67.792689, 31.58293],
[67.683394, 31.303154],
[66.938891, 31.304911],
[66.381458, 30.738899],
[66.346473, 29.887943],
[65.046862, 29.472181],
[64.350419, 29.560031],
[64.148002, 29.340819],
[63.550261, 29.468331],
[62.549857, 29.318572],
[60.874248, 29.829239],
[61.781222, 30.73585],
[61.699314, 31.379506],
[60.941945, 31.548075],
[60.863655, 32.18292],
[60.536078, 32.981269],
[60.9637, 33.528832],
[60.52843, 33.676446],
[60.803193, 34.404102],
[61.210817, 35.650072]
]
]
]
}
}And I didn't change the original html file, which looks like this:
<html>
<head>
<title>A D3 map</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="neighborhoods.js"></script>
</head>
<body>
<script>
var width = 2000,
height = 2000;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g");
var albersProjection = d3.geo.albers()
.scale(190000)
.rotate([71.057, 0])
.center([0, 42.313])
.translate([width / 2, height / 2]);
var geoPath = d3.geo.path()
.projection(albersProjection);
g.selectAll("path")
.data(neighborhoods_json.features)
.enter()
.append("path")
.attr("fill", "#ccc")
.attr("d", geoPath);
</script>
</body>
</html>So my question is:
I don't know where things go wrong. When I inspect the page it clearly shows that paths are being created, they just aren't shown ):
Does anybody have any clue what stupid thing I am doing wrong.
Upvotes: 1
Views: 241
Answers (1)
Reputation: 38161
Your map is drawing as expected.
Let's look at the projection:
var albersProjection = d3.geo.albers()
.scale(190000)
.rotate([71.057, 0])
.center([0, 42.313])
.translate([width / 2, height / 2]);
This is an albers projection, it is centered on [-71.057,42.313] (degrees longitude and latitude respectively), this is Boston (which I believe your example is of). The scale factor is huge, which means it is very zoomed in (a value of 200 or so might show the whole world), so it likely shows only the area around Boston.
Your data is in Asia - including features such as South Korea and Qatar. These features will not be visible using this projection (As you state, if you inspect the svg, you will see that features are drawn, just with odd coordinates that are beyond the edges of the svg).
You need to update your projection to show the area you are focusing on. If you want to keep an Albers projection, then you should also set the parallels (by default they are best suited for the US).
I tested your data with the following projection:
var albersProjection = d3.geo.albers()
.scale(600)
.rotate([-65, 0])
.center([0, 33])
.translate([width / 2, height / 2]);
(I also changed the width and height to 1000 so it fit better on my screen). This projection is centered on [65,33] (degrees longitude, latitude respectively).
This gave me:
I used a negative rotation value for the x axis because I'm spinning the globe under me, not rotating my viewpoint.
I was just eyeballing the countries in the list and trying to find a center point in google earth, you could do much better, even programmatically finding the center.
I didn't set the parallels, but to do so, find two parallels that intersect your area of interest and set them using:
projection.parallels([a,b])
A more detailed examination of albers projection parameters and d3 can be found in this answer.
If you are uncertain where your features are relative to your svg, try zooming out, lower zoom values will show more of the earth, and hopefully will reveal where your hidden features are residing (this can help narrow down the sources of the problem when features are missing).
Upvotes: 3
Related Questions
- Why is this geojson not rendering with D3?
- Unable to display a JSON map using d3.js
- Geojson map not showing up
- Displaying map using d3.js and geojson
- Map doesn't show for D3.js (TopoJSON)
- d3.js and geojson map throws error
- Why does D3.js not display my geoJSON file ?
- Displaying .json map in D3 Javascript
- d3.js map shows empty
- d3js world map with geoJSon