Published
Edited
Jan 26, 2020
Insert cell
md`# Visualisasi Data dengan D3.js: Konsep dasar`
Insert cell
md `## Apa itu D3.js?`
Insert cell
md `D3 adalah singkatan dari Data-Driven Document. D3 merupakan javascript library yang didesain untuk membuat grafik dari data (Data-Driven). D3 menawarkan workflow and fungsi-fungsi yang menunjang encoding atribut data menjadi kanal grafik, seperti posisi, warna, bentuk geometry, kemiringan, dan ukuran.

Untuk penjelasan lebih lanjut mengenai konsep encoding data ke elemen visual, baca artikel [ini].`
Insert cell
md `## SVG Elemen`
Insert cell
md `Dalam implementasinya, grafik visual yang secara umum digunakan adalah SVG (Scalable Vector Graphics). Dengan kata lain, visualisasi yang dihasilkan (misalnya bar chart) adalah dalam bentuk grafik vektor, bukan raster.
Fokus pada SVG elemen ini yang membuat D3.js sangat fleksible karena SVG adalah tipe file yang umum digunakan untuk aplikasi/visualisasi berbasis web. Hasil elemen SVG pada umumnya dirender di web browser. Namun, elemen SVG ini dapat pula diunduh ke penyimpanan lokal. Perlu diketahui juga bahwa D3.js tidak hanya dapat mengakses dan mengubah elemen SVG, tapi semua elemen-elemen pada dokuman HTML. Pada artikel ini, kita fokus pada elemen visual, oleh karena itu pengetahuan akan elemen SVG sangatlah penting.`
Insert cell
md `Berikut ini adalah contoh sebuah elemen SVG dengan ukuran 100 px x 100 px. Di dalam SVG, terdapat sebuah segi empat.`
Insert cell
html `<svg width="100" height="100">
<rect height="80" width="50" fill="gray" />
</svg>`
Insert cell
md ` Mari kita kaitkan segi empat berikut dengan konsep kanal (channel) dan nilai (mark). Seperti yang dijelaskan sebelumnya, kanal terdiri dari posisi, orientasi, ukuran, warna dan bentuk. Dalam hal ini, kita bisa lihat bahwa segi empat di atas ini memiliki kanal:

1. bentuk berupa segi empat (rect),
2. kanal warna abu-abu (fill ="gray"),
3. kanal ukuran dengan tinggi 80 (height="80") dan lebar 50 (width="50")`
Insert cell
md `Untuk membuat gambaran umum konsep visualisasi data menjadi lebih jelas, kita akan coba meng-encoding data menjadi grafik SVG. Misalkan kita memiliki data yang sangat sederhana dengan nilai 10, 15, 40.`
Insert cell
html `<svg width="100" height="100">
<rect height="80" width="50" fill="gray" />
<rect height="80" width="50" fill="gray" />
<rect height="80" width="50" fill="gray" />
</svg>`
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more