BoxFrame - DataFrames for JavaScript with WebAssembly Options

Ready to work with structured data in JavaScript but tired of the limitations of basic arrays and objects? BoxFrame brings DataFrames to JavaScript/TypeScript, with WebAssembly acceleration for improved performance. This implementation provides a pandas-inspired API that works across all JavaScript environments.

What is BoxFrame?

BoxFrame is a DataFrame library for JavaScript/TypeScript, built with WebAssembly (WASM) compiled from Rust. It provides an intuitive API for data manipulation, analysis, and processing that works across different JavaScript environments - from browsers to Node.js to Deno.

Inspired by Python's pandas library, BoxFrame brings structured data manipulation to the JavaScript ecosystem with native performance.

Key Features

BoxFrame is a DataFrame implementation for JavaScript. The library uses WebAssembly compiled from Rust for core operations, which provides better performance than pure JavaScript implementations. When WebAssembly is not available, it automatically falls back to pure JavaScript implementations. It works in multiple JavaScript environments including Deno, Node.js, Bun, and browsers.

The library automatically infers data types and supports int32, float64, strings, booleans, and dates. It provides a fluent API with method chaining for data transformations, along with operations like GroupBy, aggregation, filtering, and sorting. Data can be imported from CSV files, JSON, and Google Sheets.

Getting Started with BoxFrame

Installation

# For Deno
deno add jsr:@pinta365/boxframe

# For Node.js
npx jsr add @pinta365/boxframe

# For Bun
bunx jsr add @pinta365/boxframe

# For browsers (ESM)
import { DataFrame } from "https://esm.sh/jsr/@pinta365/boxframe@0.0.1";

Your First DataFrame

import { DataFrame } from "@pinta365/boxframe";

// Create a DataFrame from an object
const sales = new DataFrame({
    product: ["Laptop", "Phone", "Tablet", "Laptop", "Phone"],
    price: [999, 699, 399, 1099, 799],
    region: ["North", "South", "North", "South", "West"],
    quantity: [5, 12, 8, 5, 15],
});

console.log(sales.toString());

Data Analysis

// Find best selling products by region
const topProducts = sales
    .groupBy("region")
    .agg({
        price: "mean",
        quantity: "sum",
    })
    .sortValues("quantity_sum", false);

console.log(topProducts.toString());
/*
DataFrame
shape: [3, 2]

      price_mean quantity_sum
South 899        17
West  799        15
North 699        13
*/

Advanced Features

Method Chaining

BoxFrame's fluent API makes complex data transformations readable:

const result = sales
    .query("price > 700") // Filter expensive items
    .groupBy("region") // Group by region
    .agg({ quantity: "sum" }) // Sum quantities
    .sortValues("quantity_sum", false) // Sort by total quantity
    .head(2); // Get top 2 regions

console.log(result);

Data Sources

Read data from various sources:

// Read CSV file
const df = await BoxFrame.readCsv("data.csv");

// Parse CSV content
const df2 = BoxFrame.parseCsv("name,age\nAlice,25\nBob,30");

// Read from Google Sheets
const df3 = await BoxFrame.readGoogleSheet("your-sheet-id");

// Create from array of objects
const df4 = BoxFrame.fromObjects([
    { name: "Alice", age: 25, city: "New York" },
    { name: "Bob", age: 30, city: "London" },
]);

Performance with WebAssembly

BoxFrame automatically uses WebAssembly for performance-critical operations:

// Check if WASM engine is enabled
console.log(BoxFrame.isWasmEngineEnabled()); // true

const largeData = new DataFrame({
    values: Array.from({ length: 100000 }, () => Math.random()),
});

// This operation uses WASM for better performance
const sorted = largeData.sortValues("values");

Try It Live!

Experience BoxFrame in your browser: JSFiddle Demo

The demo showcases:

• WASM engine detection
• Google Sheets integration
• DataFrame creation and manipulation
• GroupBy and aggregation operations
• Real-time output display

Cross-Platform Compatibility

BoxFrame works everywhere Modern JavaScript runs:

Browser

<script type="module">
    import { DataFrame } from "https://esm.sh/jsr/@pinta365/boxframe@0.0.1";
    // Use DataFrame in your browser app
</script>

Node.js

import { DataFrame } from "@pinta365/boxframe";
// Full Node.js support with file system operations

Deno

import { DataFrame } from "@pinta365/boxframe";
// Native Deno support with modern JavaScript features

Start Building Today!

BoxFrame makes data analysis accessible in JavaScript. Whether you're building data visualization tools, analytics dashboards, or processing large datasets, BoxFrame provides the tools you need.

Ready to get started? Check out the complete documentation with API reference, examples, and guides.

You can find the library source code on GitHub and install it from JSR.

Let us know if you have any questions or feedback!