Old school D3 from simpler times

All examples By author By category About

ricardofelippe

Full window Github gist

Basic geo example

Basic D3 geo example.

From D3 in Depth book by Peter Cook.

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Basic geo (svg)</title>
</head>

<style>
body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
}

#content .map path {
  fill: #ddd;
  stroke: #aaa;
}
</style>

<body>
  <div id="content">
    <svg width="800px" height="400px">
      <g class="map"></g>
    </svg>
  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>

<script>
var geojson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "Africa"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[[-6, 36], [33, 30], [43, 11], [51, 12], [29, -33], [18, -35], [7, 5], [-17, 14], [-6, 36]]]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "Australia"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[[143, -11], [153, -28], [144, -38], [131, -31], [116, -35], [114, -22], [136, -12], [140, -17], [143, -11]]]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "Timbuktu"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-3.0026, 16.7666]
      }
    }
  ]
};

var projection = d3.geoEquirectangular()
  .scale(200)
  .translate([200, 150]);

var geoGenerator = d3.geoPath()
  .projection(projection);

function update(geojson) {
  var u = d3.select('#content g.map')
    .selectAll('path')
    .data(geojson.features);

u.enter()
    .append('path')
    .attr('d', geoGenerator);
}

update(geojson);

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js