Apa itu D3?

D3, singkatan dari Data-Driven Documents, adalah pustaka JavaScript untuk membuat visualisasi web buatan khusus. Topik ini menjelaskan arsitektur tiga lapis yang menjadi kerangka pustaka tersebut, memperlihatkan bagian data yang berjalan di Node tanpa browser, dan menyematkan demo penggambaran batang dari data tetap. Setelah membacanya, konsep gramatika grafis dapat dikenali padanannya di dalam D3, dan kedudukan pustaka ini di antara alat lain dapat dinyatakan dengan tepat.

Arsitektur tiga lapis#

Kerja D3 terbagi ke dalam tiga lapisan yang masing-masing menjawab satu tugas. Lapisan pertama adalah manipulasi dokumen berbasis data, yaitu selection dan data join yang mengikat array ke elemen DOM dan mengatur atribut elemen tersebut. Lapisan kedua adalah transformasi data, seperti skala yang memetakan nilai data ke piksel dan generator bentuk yang menghitung lintasan garis atau busur dari sekumpulan angka. Lapisan ketiga adalah render: D3 tidak memiliki mesin gambar tersendiri, melainkan membuat dan mengubah elemen SVG, HTML, atau canvas, sehingga gambar akhirnya dihasilkan mesin render browser.

Pembagian ini menjelaskan dua sifat yang sering dijumpai pada pustaka ini. Pertama, satu visualisasi dapat dirender sebagai SVG yang tajam saat dicetak atau sebagai canvas yang lebih ringan untuk puluhan ribu titik, karena lapisan render memang diserahkan kepada pemilihan perancangnya. Kedua, kosakata D3 terbagi dua bagian menurut kebutuhannya, yaitu bagian dokumen yang membutuhkan browser dan bagian data yang dapat dihitung di mana pun JavaScript berjalan. Kedua sifat itu diuji langsung pada bagian berikut.

Memuat pustaka di luar browser#

Berkas berikut memuat d3.min.js dari folder topik di Node, yaitu runtime JavaScript tanpa dokumen DOM, lalu mencetak versi pustaka, dua panggilan bagian data, dan satu panggilan bagian dokumen. Uji semacam ini berguna karena pemisahan lapisan pada arsitektur di atas bukan klaim pada dokumentasi, melainkan perilaku yang dapat diperiksa. Jalankan berkas itu dari folder topik dengan perintah node uji-pustaka.js.

// uji-pustaka.js: memuat pustaka d3.min.js dari folder topik.
// Jalankan dari folder topik: node uji-pustaka.js
const d3 = require(process.cwd() + "/d3.min.js");

// bagian data dapat dipanggil tanpa browser
console.log("versi d3    :", d3.version);
console.log("d3.range(5) :", d3.range(5));
console.log("d3.max      :", d3.max([12, 18, 9, 15, 21]));

// bagian dokumen membutuhkan DOM yang tidak tersedia di Node
try {
  d3.select("svg");
} catch (error) {
  console.log("d3.select   :", error.name);
}

versi d3    : 7.9.2
d3.range(5) : [ 0, 1, 2, 3, 4 ]
d3.max      : 21
d3.select   : ReferenceError

Bagian data berjalan sebagaimana diharapkan: d3.range mengembalikan lima angka dan d3.max mengembalikan 21. Pemanggilan d3.select justru berakhir dengan ReferenceError karena fungsi itu menelusuri dokumen yang tidak tersedia di Node, meskipun fungsinya tetap terdefinisi karena pustaka dimuat utuh. Pemisahan arsitektur di atas dengan demikian dapat diuji langsung, dan bagian data pustaka dapat digunakan di luar browser, misalnya untuk menghitung ringkasan atau memeriksa skala sebelum grafiknya ditulis. Pemeriksaan semacam ini cepat dikerjakan di terminal dan tidak menuntut pembukaan browser, sehingga cocok untuk menguji angka sebelum bentuknya digambar.

Batang digambar dari data tetap#

Demo berikut memuat d3.min.js yang berada di bundle topik, tanpa pemuatan dari CDN. Isinya hanya satu array tetap, yaitu jumlah buku yang dipinjam di kelas setiap hari Senin sampai Jumat. D3 menggambar lima persegi panjang ke dalam SVG menurut angka tersebut, kemudian meletakkan label nilai di atas setiap batang dan label hari di bawahnya. Tidak ada fungsi pembuat grafik batang yang dipanggil: setiap batang adalah persegi panjang yang tingginya dihitung dari data, dan setiap label adalah elemen teks yang diletakkan satu per satu. Buka demo di bawah dan bandingkan tinggi setiap batang dengan angkanya: batang Jumat yang berjumlah 21 tampil paling tinggi, sedangkan batang Rabu yang berjumlah 9 paling pendek.

Padanan kosakata gramatika grafis#

Konsep gramatika grafis, yaitu model yang menyusun grafik dari lapisan data, estetika, geometri, statistik, skala, panduan, faset, dan sistem koordinat, memiliki padanan yang dapat ditemukan di D3. Tabel berikut memetakan setiap lapisan ke bentuknya pada pustaka ini, sebagai petunjuk membaca dan bukan daftar fungsi satu lawan satu.

Dua pola pada tabel menegaskan arsitektur yang dijelaskan di awal. Lapisan yang berupa perhitungan murni tersedia sebagai fungsi siap pakai, yaitu skala pada d3-scale dan ringkasan pada d3-array. Lapisan yang menyangkut tata letak halaman dirakit sendiri menggunakan selection: pembuat sumbu disediakan, sedangkan legenda dan faset tidak, sehingga keduanya dibangun dari elemen yang diletakkan secara manual. Pemisahan ini berdampak langsung saat membaca kode D3 milik orang lain: kemunculan d3.max menandai tahap statistik, sedangkan rangkaian append dan attr menandai tahap penyusunan panduan. Kosakata gramatika dengan demikian tidak perlu dipelajari ulang di sini, cukup dipetakan.

Bukan alat grafik siap pakai#

D3 tidak menyediakan fungsi pembuat grafik. Tidak ada pemanggilan yang menerima array dan mengembalikan grafik batang jadi, karena yang tersedia adalah kosakata untuk menggambar: selection untuk menunjuk elemen, skala untuk memetakan angka ke piksel, dan generator untuk menghitung bentuk. Konsekuensinya, grafik pertama dibuat lebih lambat dibandingkan alat siap pakai, tetapi setiap bagiannya dapat diubah: sumbu, urutan kategori, anotasi, interaksi, dan bentuk tanda tidak terbatas pada pilihan pembuat alat. Demo pada bagian sebelumnya merupakan contoh kasusnya: lima batang selesai digambar, tetapi setiap atributnya ditulis secara manual.

Wilayah kerja D3 adalah visualisasi yang menuntut desain di luar daftar grafik standar, misalnya diagram yang bentuk tandanya menyusuri data atau halaman yang grafiknya merespons gerakan pembaca. Apabila tugasnya grafik rutin dari tabel yang sama setiap bulan, alat berlapis seperti plotly menyelesaikannya lebih cepat karena fungsi grafiknya sudah tersedia. Pilihan antara keduanya dengan demikian mengikuti tugas, bukan kemampuan teknis semata.

Posisi di ekosistem web#

D3 menjadi titik acuan ekosistem visualisasi web. plotly.js, mesin grafik di balik plotly untuk Python, dibangun dengan D3 di dalamnya. Observable, platform notebook JavaScript, dibuat oleh Mike Bostock selaku pencipta D3 dan menjadikan pustaka itu bagian dari alur kerjanya. Vega dan Vega-Lite, gramatika deklaratif berbasis JSON, lahir dari kelompok riset yang sama dengan Protovis, pendahulu D3, di bawah Jeffrey Heer yang ikut menulis makalah D3. Garis keturunan yang sama itu menjelaskan mengapa konsep gramatika pada alat-alat tersebut terasa serupa satu sama lain.

Bagi praktisi visualisasi, kedudukan itu berarti kosakata D3 muncul kembali di banyak tempat meskipun pustakanya jarang ditulis langsung. Istilah seperti domain, range, dan join yang digunakan dokumentasi D3 mudah dikenali ketika muncul pada dokumentasi alat turunannya, sehingga kemampuan membaca lapisan web ini berguna tanpa menuntut penulisan visualisasi dari nol. Kosakata itulah yang diisi oleh dua topik lain pada modul ini, yaitu selection beserta data join dan skala beserta pembaruannya.

Ringkasan#

• D3 bekerja dalam tiga lapis: manipulasi dokumen berbasis data melalui selection, transformasi data melalui skala dan generator bentuk, serta render yang diserahkan ke SVG, HTML, atau canvas.
• Bagian data dapat diuji di Node, sedangkan pemanggilan bagian dokumen membutuhkan browser karena menelusuri DOM.
• Tidak ada fungsi pembuat grafik siap pakai, sehingga visualisasi buatan khusus menjadi mungkin, tetapi grafik rutin diselesaikan lebih cepat pada alat berlapis.
• Skala tersedia sebagai d3-scale dan statistik sebagai d3-array, sedangkan panduan seperti legenda serta faset dirakit sendiri dengan selection.

Referensi#

• D3 — D3 — Dokumentasi resmi pustaka beserta pengantar arsitekturnya.
• Getting started — D3 — Panduan resmi memuat dan menggunakan D3 untuk pertama kali.