Menu
I did a tutorial on displaying a map in d3 with the world-50m.json file. However I wish to use my own json file. this is the structure of my .json file.
"type": "FeatureCollection","features": [{ "type": "Feature","properties": { "FID": 0.000000 }, "geometry": { "type":"MultiPolygon", "coordinates":[[[[141.415967, -15.837696 ]....and the coordinates go on.
However the call in the code is for the old world-50m.json and yes I do realise that at the moment the code is referencing the world-50m.json I will change that to my file:
data(topojson.feature(topology, topology.objects.countries)
My Question is what call do I use for my new .json file. I have tried heaps of combinations but keep getting the error topology.objects is undefined. Any help is appreciated.
Here is the code:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke: white;
stroke-width: 0.25px;
fill: grey;
}
</style>
<body>
<script type="text/javascript" src="d3/d3.v3.min.js"></script>
<script src="js/topojson/topojson.js"></script>
<script>
var width = 960,
height = 500;
var projection = d3.geo.equirectangular()
.center([-30, -17 ])
.scale(3000)
.rotate([-180,0]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var path = d3.geo.path()
.projection(projection);
var g = svg.append("g");
// load and display the World
d3.json("json/world-50m.json", function(error, topology) {
g.selectAll("path")
.data(topojson.feature(topology, topology.objects.countries)
.features)
.enter()
.append("path")
.attr("d", path)
d3.csv("data/CairnsPort2012.csv", function(error, data) {
g.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([d.LONG, d.LAT])[0];
})
.attr("cy", function(d) {
return projection([d.LONG, d.LAT])[1];
})
.attr("r", 0.1)
.style("fill", "red");
});
});
var zoom = d3.behavior.zoom()
.on("zoom",function() {
g.attr("transform","translate("+
d3.event.translate.join(",")+")scale("+d3.event.scale+")");
g.selectAll("path")
.attr("d", path.projection(projection));
});
svg.call(zoom)
</script>
</body>
</html>
777
asked Mar 08 '26 02:03
OK, first we need to sort out the order of your call to load the map data.
We need to put the error call second like so.
d3.json("json/world-50m.json", function(topology, error) {
Then I think you need to change the following;
g.selectAll("path")
.data(topojson.feature(topology, topology.objects.countries)
.features)
... to ...
g.selectAll("path")
.data(topology.features)
I say that this may work based on a working map I have here that has a very similar json layout
{"type":"FeatureCollection",
"features":[
{
"type":"Feature",
"properties":{"name":"New Zealand","iso_a2":"NZ","iso_a3":"NZL","iso_n3":"554"},
"geometry":{"type":"MultiPolygon","coordinates":[ [ [ [ 167.44947350400005, -47.23943450299987 ], ....and the coordinates go on ] ] ] ]}}
]
}
... and the following code.
var g = svg.append("g");
d3.json("json/nz-10m2.json", function (topology, error) {
g.selectAll("path")
.data(topology.features)
.enter()
.append("path")
.attr("d", path);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
