Danfo js — An Alternative to Pandas

JavaScript has become one of the most versatile programming languages, and with libraries like Danfo.js, it’s even more powerful for data science tasks. If you’re new to data manipulation in JavaScript, this guide will introduce you to Danfo.js and help you get started with handling data efficiently.

What is Danfo.js?

Danfo.js is a powerful library built on top of JavaScript that enables users to perform data manipulation and analysis, similar to what Python’s Pandas library does. It is designed to work with DataFrames and Series, which are the two primary data structures that allow you to manage data in a tabular format. If you’ve worked with spreadsheets or databases before, you’ll find these concepts familiar.

Why Danfo.js?

JavaScript for Data Science: If you’re already familiar with JavaScript but want to dive into data manipulation, Danfo.js is an excellent tool. It combines the power of JavaScript with the flexibility of data analysis.
Easy to Learn: If you’re a beginner, Danfo.js is simple to pick up, especially if you are comfortable with JavaScript. It allows you to carry out tasks like filtering, grouping, and transforming data with ease.
Integration with Web Apps: Danfo.js allows you to seamlessly work with data in web apps. You can fetch data from APIs or handle local datasets directly in your browser.

Installing Danfo.js

To get started with Danfo.js, you’ll need to install it. You can install Danfo.js using npm (Node Package Manager) in your project directory.

npm install danfojs-node

For working in the browser, you can include Danfo.js from a CDN:

<script src="https://cdn.jsdelivr.net/npm/danfojs@0.5.0/dist/index.min.js"></script>

Working with DataFrames

A DataFrame is a two-dimensional, size-mutable, and potentially heterogeneous tabular data structure. It’s similar to a table in a database or an Excel sheet.

Here’s a basic example of creating a DataFrame in Danfo.js:

const dfd = require("danfojs-node"); const data = {
    "Name": ["Alice", "Bob", "Charlie"],
    "Age": [25, 30, 35],
    "Country": ["USA", "UK", "Canada"]
}; const df = new dfd.DataFrame(data);
df.print();

This will output:

Name  Age  Country
0  Alice   25      USA
1    Bob   30       UK
2 Charlie   35   Canada

Common Operations in Danfo.js

Here are some of the most common data manipulation tasks you’ll perform using Danfo.js:

1. Selecting Columns

You can select a specific column from the DataFrame like this:

const ageColumn = df["Age"];
ageColumn.print();

2. Filtering Rows

To filter rows based on a condition:

const adults = df.query(df['Age'].gt(30)); // Filters rows where age > 30
adults.print();

3. Adding New Columns

You can easily add a new column based on existing columns:

df.addColumn("IsAdult", df["Age"].gt(18)); // Adds a column based on age
df.print();

4. Handling Missing Data

Danfo.js provides various functions to handle missing values:

df.fillna(0, {inplace: true}); // Replace NaN values with 0

Working with Series

A Series in Danfo.js is a one-dimensional array-like object. It can be thought of as a single column of a DataFrame.

Here’s how you can create and manipulate a Series:

const ageSeries = new dfd.Series([25, 30, 35]);
ageSeries.print();

You can also perform operations on Series:

const doubledAge = ageSeries.mul(2);
doubledAge.print();

Visualizing Data

While Danfo.js itself does not focus on visualization, you can easily integrate it with libraries like Plotly or Chart.js for visualizing your data. After processing your data in Danfo.js, you can pass it to a visualization library to generate charts and graphs.

The type of visualization depends on the kind of data and the message you want to convey. Below are some common visualizations for different types of data:

Bar Chart

Use case: Comparing different categories or groups.
When to use: When you have categorical data and you want to compare values across different categories.

const plotly = require('plotly.js-dist');
const data = [{
    x: ['A', 'B', 'C', 'D'],
    y: [20, 14, 23, 17],
    type: 'bar'
}];
plotly.newPlot('chart', data);

Line Chart

Use case: Visualizing trends over time or continuous data.
When to use: To show how a value changes over time (time series data) or continuous data.

const data = [{
    x: ['2021', '2022', '2023'],
    y: [100, 150, 130],
    type: 'scatter',
    mode: 'lines'
}];
plotly.newPlot('chart', data);

Pie Chart

Use case: Showing proportions of a whole.

When to use: When you want to show how parts make up a whole or to compare relative proportions of categories.

const data = [{    labels: ['A', 'B', 'C', 'D'],
    values: [20, 14, 23, 17],
    type: 'pie'
}];
plotly.newPlot('chart', data);

Scatter Plot

**Use case: **Showing relationships between two continuous variables.
When to use: To visualize correlations or relationships between two numeric variables.

const data = [{
    x: [1, 2, 3, 4, 5],
    y: [10, 11, 12, 13, 14],
    type: 'scatter',
    mode: 'markers'
}];
plotly.newPlot('chart', data);

Heatmap

Use case: Visualizing matrix data or the intensity of values across two dimensions.
**When to use: **To show patterns in data that change in intensity, like correlation matrices, or geographical heatmaps.

const data = [{
    z: [[1, 20, 30], [20, 1, 60], [50, 60, 1]],
    type: 'heatmap'
}];
plotly.newPlot('chart', data);

Box Plot

Use case: Understanding the distribution of a dataset.
When to use: When you want to visualize the distribution of data, including the median, quartiles, and potential outliers.

const data = [{    y: [10, 15, 23, 30, 32, 43],
    type: 'box'
}];
plotly.newPlot('chart', data);

All in all, danfo.js is a powerful library that brings the capabilities of data manipulation and analysis to JavaScript, making it an ideal choice for those who are already familiar with JavaScript and want to dive into data science tasks.