D3 map simple

by Gopinath Kaliappan

HTML

<script src="https://dev-cb.netbase.com/cb/pulse/lib/topojson.v1.min.js"></script>

CSS

.municipalities {
  fill: #222;
}

.municipalities :hover {
  fill: orange;
}

.state-boundary {
  fill: none;
  stroke: #fff;
  pointer-events: none;
}
svg{
    border: 1px solid gray;
}

JavaScript

var topoJsonUrl = "https://www.covid19india.org/maps/goa.json";

var width = 500,
    height = 500;

//create unit projection
var projection = d3.geo.mercator()
    .scale(1)
    .translate([0,0]);

// create the path
var path = d3.geo.path()
    .projection(projection);

d3.json(topoJsonUrl, function(error, mx) {

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("preserveAspectRatio","xMidYMid meet").attr("viewBox","0 0 800 600");
    
    console.log(mx);
    
    var ind = topojson.feature(mx, mx.objects.india);

    // see http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object
    var b = path.bounds(ind),
        s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
        t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

// Update the projection to use computed scale & translate.
    projection
        .scale(s)
        .translate(t);
    
    var geoPaths = svg.append("g")
      .attr("class", "municipalities")
    .selectAll("path")
      .data(topojson.feature(mx, mx.objects.india).features);
      
    geoPaths.enter().append("path")
      .attr("d", path);
    
    // not sure what this code was supposed to do
    //var p =	svg.append("path")
    //        .datum(topojson.mesh(mx, mx.objects.india))

    
});