0
let promises=[
    d3.json("data/india-map.json"),
    d3.json("https://api.covid19india.org/states_daily.json")
]

Promise.all(promises).then(function(allData){
    let mapData=allData[0];

    let states=topojson.feature(mapData,mapData.objects.polygons).features;//giving the geometry object
   
    console.log(states);

    let projection=d3.geoMercator()
                    .fitExtent([[0,0],[width,height]],states)
                    .scale(1500);

    let path=d3.geoPath()
            .projection(projection);

    //setting boundaries of states
    let boundaries=svg.selectAll("path").data(states);

    boundaries.enter()
        .append("path")
            .attr('class','boundary')
            .attr('d',path);

}).catch(function(error){
    console.log(error);
})

For now I want to draw a map, my data is a topojson file so i have converted it to geojson using mesh function. However the above code is not displaying anything on the website

Sai Teja T
  • 332
  • 2
  • 10
  • 1
    Instead of `.fitExtent([0,0],[width,height],states)`, try `.fitExtent([[0,0],[width,height]],states)`. Though if you are making a choropleth, using a mesh doesn't create polygons to fill, just lines, try topojson.feature. – Andrew Reid Jul 14 '20 at 15:37
  • @AndrewReid I have made the changes specified now the path function is showing "NaN" and not displaying anything on the page I have edited and entered the new code above – Sai Teja T Jul 15 '20 at 12:51
  • Could you share the topojson, should be useful in addressing the error. – Andrew Reid Jul 15 '20 at 16:42
  • @AndrewReid this is my github repo: https://github.com/SaitejareddyTileti-0293/COVID-19-Choropleth-Map the topojson file is in data/india-map.json – Sai Teja T Jul 16 '20 at 14:42
  • 1
    Ah yeah, my bad I didn't see it earlier. In addition to providing an array of coordinates `[[0,0],[width,height]]`, you also need to provide fitExtent/fitSize with a geojson object, you're providing an array of objects. This doesn't throw an error, but causes the fitExtent to provide invalid scale & translate values to the projection, which causes the NaN errors when projecting the paths. – Andrew Reid Jul 16 '20 at 19:40
  • 1
    Try `var states = topojson.features(...)` and then passing `states` to fitExtent, and then when appending features use `.data(states.features)`. Now `states` will be a geojson feature collection (an object), with the individual states located at `states.features`. See [here](https://stackoverflow.com/a/45470054/7106086) or [here](https://stackoverflow.com/a/55972888/7106086) for more details. – Andrew Reid Jul 16 '20 at 19:42

0 Answers0