D3 Geo Map

by Gopinath Kaliappan

HTML

<script src="http://d3js.org/topojson.v0.min.js"></script>

CSS

path {
    stroke: white;
    stroke-width: 0.5px;
    fill: grey;
}

JavaScript

var width = 1000;
var height = 1500;

var projection = d3.geo.mercator().scale(100);

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

d3.json("https://raw.githubusercontent.com/covid19india/covid19india-react/master/public/maps/tamilnadu.json", function(error, topology) {
    console.log(topology)
    g.selectAll("path")
    .data(topojson.object(topology, topology.objects.countries)
          .geometries)
    .enter()
    .append("path")
    .attr("d", path)
});

// zoom and pan
var zoom = d3.behavior.zoom()
    .on("zoom",function() {
        g.attr("transform","translate("+ 
            d3.event.translate.join(",")+")scale("+d3.event.scale+")");
        g.selectAll("circle")
            .attr("d", path.projection(projection));
        g.selectAll("path")  
            .attr("d", path.projection(projection)); 

  });

svg.call(zoom)