Mexico's indigenous peoples

forked from trianah's block: Nahuatl Table

<!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>

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