India choropleth

Percentage of Muslim population by district.

Example shows how to load data asynchronously using ES6 promises.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src='https://d3js.org/d3.v5.min.js'></script>
  <script src="https://unpkg.com/topojson@3.0.2/dist/topojson.js"></script>
  <style>
    body { margin: 0; }
  </style>
</head>

<body>
<div class='main'></div>
  
<script>
const margin = { top: 10, right: 30, bottom: 30, left: 30 };
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;
  
const projection = d3.geoMercator()
  .center([80, 25])
  .scale(800)
  .translate([width/2, height/2]);

const path = d3.geoPath()
  .projection(projection);

const colourScale = d3.scaleQuantize()
  .domain([0, 1])
  .range(d3.schemeBlues[9]);

const $svg = d3.select('.main')
  .append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom);
  
const $g = $svg.append('g')
  .attr('transform', `translate(${margin.left}, ${margin.top})`);

// state polygons
  $g.append('g')
    .attr('class', 'states')
    .selectAll('path')
    .data(topojson.feature(stateGeoData, stateGeoData.objects.india).features)
    .enter()
    .append('path')
    .attr('d', path)
    .attr('stroke', '#888')
    .attr('fill', 'none');

// country outer boundary
  $g.append('path')
    .datum(boundary)
    .attr('d', path)
    .attr('class', 'boundary')
    .attr('stroke', '#000')
    .attr('fill', 'none');

}

</script>
</body>

https://d3js.org/d3.v5.min.js

https://unpkg.com/topojson@3.0.2/dist/topojson.js