Old school D3 from simpler times

All examples By author By category About

dbeach24

Full window Github gist

Missing Migrants

This dataset is from the Missing Migrants data uploaded to Kaggle, and contains information about people who have gone missing while travelling along migration routes. This data originates from the Missing Migrants Project.

forked from curran's block: Data Table Summary

<!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('MissingMigrantsProject.csv', data => {
        
        // Assemble a summary string.
        const summary = [
          'Data 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>

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('MissingMigrantsProject.csv', data => {
        
        // Assemble a summary string.
        const summary = [
          'Data 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>
​
    

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

https://unpkg.com/datalib@1.8.0/datalib.min.js