Python Pandas equivalent in JavaScript

Question

With this CSV example:

   Source,col1,col2,col3
   foo,1,2,3
   bar,3,4,5

The standard method I use Pandas is this:

1. Parse CSV<

Answer 1

Ceaveat The following is applicable only to d3 v3, and not the latest d4v4!

I am partial to d3.js, and while it won't be a total replacement for Pandas, if you spend some time learning its paradigm, it should be able to take care of all your data wrangling for you. (And if you wind up wanting to display results in the browser, it's ideally suited to that.)

Example. My CSV file data.csv:

name,age,color
Mickey,65,black
Donald,58,white
Pluto,64,orange

In the same directory, create an index.html containing the following:

and also a demo.js file containing the following:

d3.csv('/data.csv',

       // How to format each row. Since the CSV file has a header, `row` will be
       // an object with keys derived from the header.
       function(row) {
         return {name : row.name, age : +row.age, color : row.color};
       },

       // Callback to run once all data's loaded and ready.
       function(data) {
         // Log the data to the JavaScript console
         console.log(data);

         // Compute some interesting results
         var averageAge = data.reduce(function(prev, curr) {
           return prev + curr.age;
         }, 0) / data.length;

         // Also, display it
         var ulSelection = d3.select('body').append('ul');
         var valuesSelection =
             ulSelection.selectAll('li').data(data).enter().append('li').text(
                 function(d) { return d.age; });
         var totalSelection =
             ulSelection.append('li').text('Average: ' + averageAge);
       });

In the directory, run python -m SimpleHTTPServer 8181, and open http://localhost:8181 in your browser to see a simple listing of the ages and their average.

This simple example shows a few relevant features of d3:

• Excellent support for ingesting online data (CSV, TSV, JSON, etc.)
• Data wrangling smarts baked in
• Data-driven DOM manipulation (maybe the hardest thing to wrap one's head around): your data gets transformed into DOM elements.