d3js map with path

d3js map with path

by vrluckyin India

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
 <div id="content">
    <svg width="1800px" height="1400px">
      <g class="map"></g>
    </svg>
  </div>


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

CSS

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

#content .map path {
  fill: #ddd;
  stroke: #aaa;
}

JavaScript

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": "Australia1"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[[659,280],[779,280],[779,600],[659,600],[659,280]]]
      }
    },
    {
      "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);