Search code examples
javascriptjsond3.jsgeojsontopojson

Render topoJSON data using D3.js

In my project, I am trying to display the India map using d3 and GeoJSON. It does not work properly, I am finding it difficult to display each Indian state. Please help me to find out, thanks in advance..., I have added a link to the data and output below the code.

This is my source code and I am using data from https://www.covid19india.org/mini_maps/india.json and I want to render (Indian states) using D3.js

<html>

<head>
  <meta charset="utf-8">
  <title>A D3 map using topojson</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>

  <link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
  <style>
    path {
      fill: #ccc;
      stroke: #fff;
      stroke-width: .5px;
    }
    
    path:hover {
      fill: red;
    }
  </style>
</head>

<body>
  <script>
    var width = 900,
      height = 600;

    var path = d3.geo.path();

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

    queue()
      .defer(d3.json, "https://www.covid19india.org/mini_maps/india.json")
      .await(ready);

    function ready(error, counties) {
    svg.append("g")
    .selectAll("path")
    .data(topojson.feature(counties, counties.objects.ele).features)
    .enter()
    .append("path")
    .attr("d", path)
    .attr("class", "state");
    }
  </script>
</body>

</html>

I am getting this type of output

Output of code

Can you please help me, what is the problem? I am a student and learning this.

Solution

  • Since your JSON is already projected, you just need to pass null to the projection:

    var path = d3.geo.path()
    .projection(null);

    Here is your code with that change:

    <html>

<head>
  <meta charset="utf-8">
  <title>A D3 map using topojson</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>

  <link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
  <style>
    path {
      fill: #ccc;
      stroke: #fff;
      stroke-width: .5px;
    }
    
    path:hover {
      fill: red;
    }
  </style>
</head>

<body>
  <script>
    var width = 900,
      height = 600;

    var path = d3.geo.path()
      .projection(null);

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

    queue()
      .defer(d3.json, "https://www.covid19india.org/mini_maps/india.json")
      .await(ready);

    function ready(error, counties) {

      svg.append("g")
        .selectAll("path")
        .data(topojson.feature(counties, counties.objects.states).features)
        .enter()
        .append("path")
        .attr("d", path)
        .attr("class", "state");
    }
  </script>
</body>

</html>