Mexico's indigenous towns by state

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    svg {
      border: 1px dashed violet;
    }
    
    text {
      font-size: 8pt;
    }
  </style>
</head>

<body>
  <script>
    // ........................................................ 
    // heat map
    // mexico map svg
    // ids for the states
    // 3 to 5 groups - show totals by state and workout the groups
    // monochromatic scale (d3 color scheme for this?)
    // add labels
    // show more info on hover, or maybe show state details on click?
    // on a fixed overlay with transparency?
    //........................................................
    
    
    
    // ********** data functions **********
    
    function groupBy(objectArray, property) {
        return objectArray.reduce(function (acc, obj) {
          var key = obj[property];
          if (!acc[key]) {
            acc[key] = [];
          }
          acc[key].push(obj);
          return acc;
        }, {});
      }
    
    function arrayBy(objectArray) {
      	var keysArr = Object.keys(objectArray);
      	console.log(keysArr)
      // remove unsed groups ("", "Total" and "Otras entidades")
      	keysArr = keysArr.filter(item => item !== "" && item !== "Total" && item !== "Otras entidades")
      	console.log(keysArr)
      	var arr = keysArr.map(function(item){
          var obj = {};
          obj['Entidad'] = item;
          obj['Pueblos'] = objectArray[item];
          
          return obj
        })
      	
        return arr;
      }
    
    d3.csv('data.csv', function(error, data){
      if (error) throw error;
      
      
      // ********** data cleaning and setup **********
      
      var entidadesObj = groupBy(data, 'Entidad');
         console.log(entidadesObj)
      
      var entidadesArr = arrayBy(entidadesObj)
      //console.log(entidadesArr) 
      
      entidadesArr.sort(function(b, a){
        return a['Pueblos'].length - b['Pueblos'].length; 
      })
      
      
      // ********** size variables **********
      var width = 800
      var height = 500
      var padding = {top: 20, left: 20, bottom: 20, right: 20}
      var labelsWidth = 100
      var barHeight = 10
      var barMargin = 5
      
      
      // ********** create svg **********
      
     var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
     
     
     // ********** scales **********
     
     // d3.extent provides min and max values
     var xMax = d3.max(entidadesArr, d => d['Pueblos'].length )
     var xScale = d3.scaleLinear()
     	.domain([0, xMax])
     	.range([0, width - padding.right - padding.left - labelsWidth])
     
     
     // ********** rectangles **********
     
     var groups = svg.selectAll('g')
     	.data(entidadesArr)
     .enter().append('g')
    
    var rects = groups.append('rect')
    	.attr('width', d => xScale(d['Pueblos'].length))
    	.attr('height', barHeight)
    	.attr('x', 0 + labelsWidth)
    	.attr('y', (d, i) => padding.top + i * (barHeight + barMargin) )
    	.attr('fill', 'blue')
    	.attr('text', d => d['Entidad'])
    	.attr('transform', 'translate(' + padding.left + ', 0)')
    
    var labels = groups.append('text')
    	.attr('height', 10)
    	.attr('x', padding.left)
    	.attr('y', (d, i) => padding.top + i * (barHeight + barMargin))
    	.attr('dy', '8')
    	.text(d => d['Entidad'])
    
    
    // ********** axis **********
    
    var xAxis = d3.axisBottom()
    	.scale(xScale)
    
    svg.append('g')
    	.call(xAxis)
    	.attr('transform', 'translate(' + (padding.left + labelsWidth) + ', ' + (height - padding.right) + ')')
      
    })

</script>
</body>

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