Repository: covid19india/covid19india-react
File: src/components/choropleth.js (JavaScript)

Code before:
      const bBox = svg.attr('viewBox').split(' ');
      width = +bBox[2];
      height = +bBox[3];
      projection.fitSize([width, height], topology);
      path = d3.geoPath(projection);

      /* LEGEND */
      const svgLegend = d3.select(choroplethLegend.current);
      svgLegend.selectAll('*').remove();
      const redInterpolator = (t) => d3.interpolateReds(t * 0.85);
      const colorScale = d3.scaleSequential(
        [0, statistic.maxConfirmed],
        redInterpolator
      );
      // Colorbar
      const widthLegend = parseInt(svgLegend.style('width'));
      const margin = {left: 0.02 * widthLegend, right: 0.02 * widthLegend};
      const barWidth = widthLegend - margin.left - margin.right;
      const heightLegend = +svgLegend.attr('height');
      let title = 'Confirmed Cases';

      if (type === 1) {
        title = 'Confirmed Cases';
      } else {
        title = 'Case Density Per Million';
      }

      svgLegend
        .append('g')
        .style('transform', `translateX(${margin.left}px)`)
        .append(() =>
          legend({
            color: colorScale,
            title: title,
            width: barWidth,
            height: 0.8 * heightLegend,
            ticks: 6,
            tickFormat: function (d, i, n) {
              if (!Number.isInteger(d)) return;
              if (i === n.length - 1) return d + '+';
              return d;
            },
          })
        );
      svgLegend.attr('viewBox', `0 0 ${widthLegend} ${heightLegend}`);

      /* DRAW MAP */
      let onceTouchedRegion = null;
      const g = svg.append('g').attr('class', mapMeta.graphObjectName);
      g.append('g')
        .attr('class', 'states')

Review comment (suggestion):
```title = type === 1 ? 'Confirmed Cases' : 'Case Density Per Million' ;```

Code after:
        path = d3.geoPath(projection);
        const bBox = path.bounds(topology);
        width = +bBox[1][0];
        height = +bBox[1][1];
        svg.attr('viewBox', `0 0 ${width} ${height}`);
      }
      const bBox = svg.attr('viewBox').split(' ');
      width = +bBox[2];
      height = +bBox[3];
      projection.fitSize([width, height], topology);
      path = d3.geoPath(projection);

      /* Legend */
      const svgLegend = d3.select(choroplethLegend.current);
      svgLegend.selectAll('*').remove();
      const colorInterpolator = (t) => {
        switch (mapOption) {
          case 'confirmed':
            return d3.interpolateReds(t * 0.85);
          case 'active':
            return d3.interpolateBlues(t * 0.85);
          case 'recovered':
            return d3.interpolateGreens(t * 0.85);
          case 'deceased':
            return d3.interpolateGreys(t * 0.85);
          default:
            return;
        }
      };
      const colorScale = d3.scaleSequential(
        [0, Math.max(1, statistic[mapOption].max)],
        colorInterpolator
      );
      // Colorbar
      const widthLegend = parseInt(svgLegend.style('width'));
      const heightLegend = +svgLegend.attr('height');
      svgLegend.append('g').append(() =>
        legend({
          color: colorScale,
          title:
            mapOption.charAt(0).toUpperCase() +
            mapOption.slice(1) +
            ' cases' +
            (statisticOption === MAP_STATISTICS.PER_MILLION
              ? ' per million'
              : ''),
          width: widthLegend,
          height: 0.8 * heightLegend,
          ticks: 6,
          tickFormat: function (d, i, n) {
            if (