Drawing polygons on svg map from .json file

Question

I would like to draw some polygons on top of my .svg map realized with the program below. The polygons are specified in a separate .json file (see example). Would it be possible to do it using a "draw" function as for the map? Are there better ways? Unfortunately I'm not expert with html and couldn't find how to do it. Can anyone help me?

<!DOCTYPE html>
<html>

<head>
  <title>World Map</title>
  <meta charset="utf-8">

  <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>
  <style>
    path {
      fill: red;
      stroke: #000;
      stroke-width: .1px;
    }
    .graticule {
      fill: none;
      stroke: #000;
      stroke-width: .2px;
    }
    .foreground {
      fill: none;
      stroke: #333;
      stroke-width: 1.2px;
    }

  </style>
</head>

<body>
  <svg width="960" height="600"></svg>
  <script>
    const svg = d3.select("svg")
    const myProjection = d3.geoAitoff()
    const path = d3.geoPath().projection(myProjection)
    const graticule = d3.geoGraticule()
    function drawMap(err, world) {
      if (err) throw err
      svg.append("g")
        .selectAll("path")
        .data(topojson.feature(world, world.objects.land).features)
        .enter().append("path")
        .attr("d", path);

      svg.append("path")
        .datum(graticule.outline)
        .attr("class", "foreground")
        .attr("d", path);

    }
    d3.json("https://unpkg.com/world-atlas@1.1.4/world/50m.json", drawMap)

  </script>
</body>

</html>

The .json file:


{
"type": "FeatureCollection",                                                      
"features": [
{ "type": "Feature", "properties": {
    "fill": "#ffff00"
},
"geometry": { 
    "type": "Polygon", 
    "coordinates": [[[50.0, 0.0], [-50.0, 0.0], [0.0, 20.0], [50.0, 0.0]]]
} },
{ "type": "Feature","properties": {
    "fill": "#ff00ff"
}, 
"geometry": { 
    "type": "Polygon", 
    "coordinates": [[[70.0, 20.0], [-30.0, 0.0], [0.0, 50.0], [70.0, 20.0]]]
} }
]
}

Your json is geojson, which is the same format as you convert the topojson to, so you can append it the same way: `svg.append("g").selectAll("path").data(geojson).enter().append("path").attr("d",path)` — Andrew Reid, May 24 '19 at 16:23
Hi @Andrew. Thanks for the answer. I named the file "triangles.json" and tried to add the following lines: ``` function drawPolygons(err, data) { if (err) throw err svg.append("g") .selectAll("path") .data(geojson) .enter() .append("path") .attr("d",path); } d3.json("triangles.json", drawPolygons) ``` However I still can't visualize the polygons. What am I doing wrong? — Fede, May 24 '19 at 20:45
Sorry, you need to pass an array to .data() containing the features, not a geojson object, so you could use `geojson.features` as [here](https://jsfiddle.net/r9f4yoh3/) — Andrew Reid, May 24 '19 at 23:29

Drawing polygons on svg map from .json file

0 Answers0