Kenalan dengan Danfo.js: Apa Itu, Kapan Dipakai, dan Perbandingan Cepat vs Pandas

Apa itu Danfo.js?

Danfo.js adalah library JavaScript untuk manipulasi dan analisis data—konsepnya mirip pandas di Python. Ia menyediakan struktur data DataFrame dan Series dengan API yang serupa, sehingga pengguna pandas relatif cepat beradaptasi. Danfo bisa dipakai di Node.js maupun browser.

Fitur penting yang sering jadi pembeda:

• Bisa jalan di browser (CDN/npm) dan di Node.js (paket danfojs-node).
• Terintegrasi dengan TensorFlow.js: DataFrame/Series dapat dikonversi ke/ dari tensor untuk alur analitik-ML murni JavaScript.
• I/O fleksibel: baca CSV dari file lokal (Node), URL, maupun File input (browser), termasuk chunking.
• Plotting memakai Plotly dan hanya berlaku di browser/client-side.

Instalasi singkat

Node.js:

npm install danfojs-node

Front-end (React/Vue/Next, dsb.):

npm install danfojs

CDN (HTML langsung): pakai <script

src="https://cdn.jsdelivr.net/npm/danfojs@latest/lib/bundle.min.js"></script> lalu akses via namespace dfd.

Kapan sebaiknya pakai Danfo.js?

Pilih Danfo.js ketika:

1. Seluruh stack kamu JavaScript/TypeScript dan kamu ingin tetap satu bahasa dari front-end sampai back-end.
2. Analitik di sisi klien (browser): dashboard ringan, eksplorasi CSV, prototyping data langsung di halaman web (tanpa server Python).
3. Serverless/Edge/Node microservice yang butuh transformasi data cepat tanpa menambah dependensi lintas bahasa.
4. Integrasi ML berbasis TF.js (mis. konversi DataFrame → tensor untuk inferensi model di browser).

Pertimbangkan pandas bila:

• Dataset besar dan/atau operasi numerik berat—ekosistem Python (NumPy/C-extensions) masih sangat matang untuk komputasi intensif.
• Kamu sudah berada di ekosistem sains data Python (Jupyter, scikit-learn, dsb.) dengan tooling lengkap.

Ringkasnya: Danfo.js unggul untuk aplikasi web/JS full-stack dan integrasi TF.js, sedangkan pandas unggul untuk workload analitik/ilmiah skala besar di Python.

Perbandingan cepat: Danfo.js vs pandas

Sumber kunci: API mirip pandas (README), dukungan Node & browser, TF.js, readCSV, dan plotting browser-only.

Contoh kode praktis (side-by-side)

1) Membuat DataFrame & melihat data

Danfo.js (Node)

import * as dfd from "danfojs-node";

const df = new dfd.DataFrame([
  { city: "Jakarta", temp: 31, rain: true },
  { city: "Bandung", temp: 24, rain: false },
  { city: "Surabaya", temp: 33, rain: true },
]);

df.head().print();      // 5 baris pertama
df.describe().print();  // statistik ringkas

pandas (Python)

import pandas as pd

df = pd.DataFrame([
    {"city": "Jakarta", "temp": 31, "rain": True},
    {"city": "Bandung", "temp": 24, "rain": False},
    {"city": "Surabaya", "temp": 33, "rain": True},
])

print(df.head())
print(df.describe())

2) Seleksi kolom & filter baris

Danfo.js

const hotter = df.query(df["temp"].gt(30)); // temp > 30
hotter.loc({ columns: ["city", "temp"] }).print();

pandas

hotter = df[df["temp"] > 30]
print(hotter.loc[:, ["city", "temp"]])

3) Groupby & agregasi

Danfo.js

const byRain = df.groupby(["rain"]).col(["temp"]).mean();
byRain.print(); // rata-rata suhu per rain=true/false

pandas

by_rain = df.groupby(["rain"])["temp"].mean()
print(by_rain)

4) Join/Merge

Danfo.js

const dfA = new dfd.DataFrame([{ city:"Jakarta", pop:10.6 }, { city:"Bandung", pop:2.5 }]);
const dfB = new dfd.DataFrame([{ city:"Jakarta", area:661 }, { city:"Bandung", area:167 }]);

const merged = dfd.merge({ left: dfA, right: dfB, on: ["city"], how: "inner" });
merged.print();

pandas

dfA = pd.DataFrame([{"city":"Jakarta","pop":10.6},{"city":"Bandung","pop":2.5}])
dfB = pd.DataFrame([{"city":"Jakarta","area":661},{"city":"Bandung","area":167}])

merged = pd.merge(dfA, dfB, on=["city"], how="inner")
print(merged)

5) Baca CSV (Node, browser)

Danfo.js (Node)

import * as dfd from "danfojs-node";

const df = await dfd.readCSV("./data/weather.csv"); // file lokal
df.head().print();

Danfo.js (Browser)

<input type="file" id="csvFile">
<script type="module">
  import * as dfd from "https://cdn.jsdelivr.net/npm/danfojs@latest/lib/bundle.min.js";
  document.getElementById("csvFile").addEventListener("change", async (e) => {
    const file = e.target.files[0];
    const df = await dfd.readCSV(file); // File input browser
    df.head().print();
  });
</script>

(readCSV mendukung file lokal di Node, File browser, dan URL—serta chunking untuk file besar.)

6) Plotting (browser)

<div id="plot"></div>
<script type="module">
  import * as dfd from "https://cdn.jsdelivr.net/npm/danfojs@latest/lib/bundle.min.js";
  const df = new dfd.DataFrame({ city: ["JKT","BDG","SBY"], temp: [31,24,33] });
  df.plot("plot").bar(); // Plotly di balik layar (browser only)
</script>

(Plotting saat ini didukung via Plotly dan berjalan di client-side/browser.)

Pola kerja & tips (biar “mudah dipahami”)

1. Promise/async: Banyak fungsi I/O (mis. readCSV) bersifat async → gunakan await/.then().
2. Memori browser: Untuk file besar di browser, manfaatkan chunking readCSV atau lakukan praproses di server.
3. TensorFlow.js: Jika butuh inferensi ML di UI, konversi DataFrame → tensor (df.tensor) lalu pakai model TF.js.
4. Plot cepat: Untuk demo/eksplorasi data, plotting Danfo.js + Plotly di browser sangat praktis (tanpa setup Python).
5. Mirip pandas, tapi bukan pandas: Nama metode banyak yang serupa, namun detail perilaku/opsi bisa berbeda—cek dokumentasi Danfo saat porting dari pandas.

Rekomendasi singkat

• Pakai Danfo.js bila kamu membangun aplikasi web interaktif atau stack JS full dan ingin analitik langsung di browser/Node dengan jalur ke TF.js.
• Pakai pandas bila fokus pada sains data/ETL berat dan ekosistem Python (NumPy, SciPy, scikit-learn) sudah jadi kebutuhan utama.

Referensi

• Getting Started & instalasi Danfo.js (Node, browser, CDN), API dasar, plotting browser-only. (source: danfo.jsdata.org)
• Integrasi TensorFlow.js & konversi DataFrame↔tensor. (source: danfo.jsdata.org)
• “What is Danfo.js” & API mirip pandas (GitHub README). (source: GitHub)
• danfo.readCSV (file lokal Node, URL, File browser, chunking). (source: danfo.jsdata.org)
• Pengantar resmi (TensorFlow blog). (source: blog.tensorflow.org)