I am currently working on creating a world map using D3.js, but I am encountering an issue with visualizing the countries.json file.
Below is the code snippet:
d3.select(window).on("resize", throttle);
var zoom = d3.behavior.zoom()
.scaleExtent([1, 9])
.on("zoom", move);
var width = document.getElementById('container').offsetWidth;
var height = width / 2;
var topo,projection,path,svg,g;
var graticule = d3.geo.graticule();
var tooltip = d3.select("#container").append("div")
.attr("class", "tooltip hidden");
setup(width,height);
function setup(width,height){
projection = d3.geo.mercator()
.translate([(width/2), (height/2)])
.scale( width / 2 / Math.PI);
path = d3.geo.path()
.projection(projection);
svg = d3.select("#container").append("svg")
.attr("width", width)
.attr("height", height)
.call(zoom)
.on("click", click)
.append("g");
g = svg.append("g");
};
d3.json("countries.json", function(error, json) {
var countries = topojson.object(json, json.objects.countries).features;
topo = countries;
draw(topo);
});
function draw(topo) {
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
The following is the JSON file data being used:
{"type":"Topology","objects":{"countries":{"bbox":[-179.99999999999986,-55.52450937299982,180.00000000000014,83.61347077000005],"type":"GeometryCollection","geometries":[{"type":"Polygon","properties": ...
Encountering this error in the browser:
Uncaught TypeError: Cannot read property 'objects' of undefined
If anyone has any insights on what might be causing this issue and how to resolve it, please let me know!