D3 map simple

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://dl.dropboxusercontent.com/s/wk9qd47wn1nhsjm/dddtopo.json";



var width = 500,
    height = 500;


d3.json(topoJsonUrl, function(error, mx) {
 
      var projection = d3.geo.mercator();

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

     

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 geoPaths = svg.append("g")
      .attr("class", "municipalities")
    .selectAll("path")
      .data(topojson.feature(mx, mx.objects.india).features);
    geoPaths.enter().append("path")
      .attr("d", path);
    
    var p=	svg.append("path")
            .datum(topojson.mesh(mx, mx.objects.india))
            .attr("d", path)
            .attr("class", "state-boundary"); 
    geoPaths.style("fill", function(d) { 
        return Math.random() > 0.5 ?'gray' : 'blue'; 
    });
    
});