D3 Examples - India choropleth

xxxxxxxxxx
 
<!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.schemeReds[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})`);
​
function setupChart(data) {
  const [stateGeoData, districtGeoData, religionData] = data;
  
  const boundary = topojson.mesh(stateGeoData, stateGeoData.objects.india, function(a, b) { return a === b; });
  
  // district polygons
  const $district = $g.append('g')
    .attr('class', 'districts')
    .selectAll('path')
    .data(topojson.feature(districtGeoData, districtGeoData.objects.india_district).features)
    .enter()
    .append('path')
    .attr('d', path)
    .attr('class', 'district')
    .attr('id', d => d.properties.DISTRICT)
    .attr('stroke-width', 0.5)
    .attr('stroke', '#dcdcdc')
    .attr('fill', 'none');
  
  $district
    .attr('fill', d => {
      // look up district
      let district = religionData.filter( e => {
        return e.dist_code == d.properties.censuscode ;
      })
      if (district.length == 0) {
        return '#dcdcdc';
      } else {
        return colourScale(district[0]["muslim_pc"]);
      }
    });
​
  // 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');
​
}
​
function init() {
  const p = [loadStateGeoData(), loadDistrictGeoData(), loadReligionData()];
  Promise.all(p)
    .then(setupChart)
    .catch(console.error);
}
  
function loadStateGeoData() {
  return new Promise((resolve, reject) => {
    d3.json('india_states.json')
      .then(resolve)
      .catch(reject);
  });
}
  
function loadDistrictGeoData() {
  return new Promise((resolve, reject) => {
    d3.json('india_districts.json')
      .then(resolve)
      .catch(reject);
  });
}
  
function loadReligionData() {
  return new Promise((resolve, reject) => {
    d3.csv('data.csv', d => ({
      dist_code: d.dist_code,
      muslim_pc: +d.muslim_pc
    })) 
      .then(resolve)
      .catch(reject);
  });
}
  
init();
​
</script>
</body>
​
    