D3 Examples - Mexico's indigenous peoples

xxxxxxxxxx
 
<!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;}
    table {border: 1px solid red;font-family: monospace; font-size: 10px;}
    td, th {
      padding: 5px;
    }
  </style>
</head>
​
<body>
  <script>
    
    
    d3.csv('data.csv', function(data){
      
      // peoples' indexing - (presence by state and total)
      
      // state's indexing - (native groups and total num of indigenous people)
      
      
      //dataTowns = data.map(item => item['Pueblo'])
      //towns = new Set(dataTowns)
      //console.log(towns)
      
      
      // make a new array of objects
      // array: array used as input
      // key: grouping property
      // feature: property to be grouped
      // val: the value of the feature
      
      function groupBy(array, key, feature, val){
        return (array.reduce(function(acc, curr){
          var prop = curr[key] 
         if(!acc[prop]){
          acc[prop] = {}
         }
         acc[prop][curr[feature]] = ++curr[val]
         return acc
        }, {}))
      }
      
      var group1 = groupBy(data, 'Entidad', 'Pueblo', 'Pobindi')
      console.log(group1)
      console.log(group1['Chihuahua'])
      //group1.sort()
      
      //console.log('By entidad')
      //console.log(groupBy(data, 'Entidad', 'Pueblo', 'Pobindi'))
      //console.log('By Pueblo')
      //console.log(groupBy(data, 'Pueblo', 'Entidad', 'Pobindi'))
      
            // Build a table      
      // ..........................................................
      
      data = data.filter(d => d['Entidad'] == "Total");
      
      // columns headings
      var colsHead = ['Pueblo', 'Entidad', 'Pobindi', 'Porcentaje'];
      
      // create table
      var table = d3.select("body").append("table");
      
      var tableHead = table.append('thead');
      var tableBody = table.append('tbody');
      
      
      // append first row (for table header)
      tr1 = tableHead.append('tr');
      
      
      // add headings to first row
      tr1.selectAll('th')
        .data(colsHead)
        .enter().append('th')
        .text(col => col)
      
      
      // add rows for the data entries
      rows = tableBody.selectAll('tr')
              .data(data)
              .enter().append('tr')
      
      rows.selectAll('td')
            .data(function(d){
                             return colsHead.map(x => d[x])
      })
            .enter().append('td')
            .text(d => d)
      
        
    });
​
  </script>
</body>
​
    