D3 Examples - Nahuatl Table

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){
      
      // Get the towns/counties
      dataTowns = data.map(item => item['Pueblo'])
      towns = new Set(dataTowns)
      //console.log(towns)
      
      function groupBy(array, key){
        return (array.reduce(function(acc, curr){
          var prop = curr[key] 
         if(!acc[prop]){
          acc[prop] = [] 
         }
         acc[prop].push(curr['Pueblo'])
         return acc
        }, {}))
      }
      
      var group = groupBy(data, 'Entidad')
      console.log(group)
      
      
      
      // ..........................................................
      
      data = data.filter(d => d['Entidad'] == "Veracruz");
      
      // 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>
​
    