D3 Examples - Pokemon Table Summary

Pokemon Table Summary

This example summarizes a data table using Datalib. You can fork this Block and change the data to get a quick overview of the shape of your data.

This dataset is about 721 Pokemon with stats and types, the raw csv file can be found here in Kaggle.

More about this theme click this link.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Data Summary</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://unpkg.com/datalib@1.8.0/datalib.min.js"></script>
    <style>
​
    </style>
  </head>
  <body>
    <script>
      
      // Use these for other formats:
      // d3.tsv('data.tsv', data => {
      // d3.json('data.json', data => {
      
      // Load and summarize the data.
      d3.csv('Pokemon.csv', data => {
        
        // Assemble a summary string.
        const summary = [
          'Pokemon table summary: ',
          data.length + ' rows',
          data.columns.length + ' columns',
          Math.round(d3.csvFormat(data).length / 1024) + ' kB',
          '\nSummary of each column:',
          dl.format.summary(data)
        ].join('\n');
        
        // Show the summary string on the page.
        d3.select('body').append('pre').text(summary);
        
        // Log the summary to the console.
        console.log(summary);
      });
​
    </script>
  </body>
</html>
​
    