Analisis Mendalam D3

• D3 in Depth adalah materi pembelajaran yang membahas proses membuat visualisasi data kustom dengan D3.js, berdasarkan D3 6 dan 7
• Berfokus pada pembuatan visualisasi kustom daripada sekadar cara memakai chart sederhana, sekaligus membantu mempelajari komponen-komponen visualisasi web
• Dasar-dasar HTML, SVG, CSS, dan JavaScript terhubung dengan pekerjaan D3, sehingga membantu memahami representasi data berbasis web
• Juga terhubung dengan materi dashboard dan data story yang memanfaatkan React, Chart.js, dan Leaflet, sehingga dapat membentuk alur belajar visualisasi JavaScript
• Bagi pembaca yang ingin mempelajari D3 secara mendalam, materi ini dapat digunakan sebagai sumber pengantar sekaligus lanjutan yang menggabungkan pemahaman konsep dan praktik

---

Cakupan yang dibahas D3 in Depth

• D3 in Depth ditujukan untuk D3 versi 6 dan 7
• Anda dapat mempelajari cara membuat visualisasi data kustom menggunakan D3.js
• Materi ini juga membahas HTML, SVG, CSS, dan JavaScript sebagai elemen dasar yang diperlukan untuk membuat visualisasi berbasis web

Materi visualisasi JavaScript yang bisa dilihat bersama

• Data Dashboards with JavaScript membahas cara membuat dashboard data menggunakan React, Chart.js, dan Leaflet
• Visualising Data with JavaScript membahas cara membuat chart dan data story menggunakan Chart.js, Leaflet, D3, dan React
• Salah satu ulasan pembaca menilai materi ini tinggi di antara buku-buku D3, dengan isi yang jelas, mudah diikuti, dan konsep yang kuat

[GN⁺]

Komentar Hacker News

• Gagasan membuat visualisasi data dengan D3 memang bagus, tetapi jika menginginkan alat tingkat lebih tinggi, Observable Plot[1] buatan tim D3 layak dilihat
  Ini adalah library yang menambahkan banyak konvensi dan fitur kemudahan di atas D3 untuk membuat graf, chart, dan plot
  Lebih jauh lagi ada juga Observable Framework[2], yaitu generator situs statis untuk dashboard visualisasi yang mendukung Plot, D3, dan berbagai library lainnya
  1: https://observablehq.com/plot/
  2: https://observablehq.com/framework/
  • Akhir-akhir ini justru tertarik pada kebalikannya. Kebanyakan orang sebenarnya sudah tahu persis hasil akhirnya harus seperti apa, tetapi framework pada dasarnya menyediakan banyak pengaturan yang sudah ditetapkan sebelumnya, dan begitu ingin sedikit keluar dari pengaturan itu, semuanya jadi menyakitkan
    Untuk berbagai jenis plot, sering kali justru lebih mudah memanipulasi data SVG secara langsung, dan itu juga tidak terlalu sulit
    Akan bagus kalau ada library atau framework yang membuat output SVG atau canvas lebih mudah dimanipulasi. Perubahan kecil seharusnya sangat mudah, tetapi makin tinggi level framework, makin sulit keluar dari jalur yang sudah ditentukan
  • Observable Plot sangat bagus. Sangat fleksibel dan intuitif digunakan, jadi sekarang lebih saya sukai daripada Plotly.js yang dulu saya pakai
    Dokumentasinya juga lumayan bagus, tetapi kurang bagian referensi API yang benar-benar berguna, jadi tidak mudah menemukan fitur-fiturnya
  • Saya penasaran apakah ada antarmuka drag-and-drop seperti Matlab untuk visualisasi web
    Saya sebisa mungkin menghindari membuat graf dengan HTML5 canvas, jadi akan bagus kalau ada pendekatan baru yang dirancang untuk itu
  • Plot dan Framework terikat pada ekosistem Observable dan punya kurva belajar tersendiri. Mempelajari D3 tetap yang terbaik dari sisi fleksibilitas dan kendali
  • Saya penasaran apakah situs web ini juga terasa tersendat bagi orang lain. Pada halaman web dengan banyak konten saya sering merasakan lag
    Edit: setelah menyalakan akselerasi perangkat keras, memang lebih mulus, tetapi bahkan di Ryzen 9 masih lebih tersendat daripada yang saya harapkan
• Saya suka D3 dan sudah banyak membuat sesuatu dengannya, tetapi setiap kali kembali lagi setelah beberapa tahun tidak memakainya, hampir tidak ada yang saya ingat, dokumentasinya malah membuat lebih bingung, dan rasanya seperti kembali ke titik awal
  Kalau diminta menyelesaikan persamaan diferensial parsial yang tidak saya lihat selama 10 tahun, rasanya saya justru akan lebih cepat ingat lagi
  Saya juga menganggap dokumentasi referensi D3 benar-benar buruk
  • Saya banyak memakai D3 dari versi 2 sampai 7, dan karena refactoring selama periode itu, contoh-contoh online yang dari awal memang sulit dipahami jadi makin sulit diperbarui
    Meski begitu, sekarang sepertinya sudah lebih stabil. Saya mulai bisa menangkap polanya setelah menulisnya dengan gaya yang lebih imperatif menggunakan Svelte+D3, bukan hanya D3 saja
    Dengan begitu, elemen yang dihasilkan lebih mudah dipahami daripada harus memeriksanya belakangan lewat developer tools
    Situs ini membantu untuk memakai D3 bersama Svelte: https://svelte.recipes/
  • Menurut saya masalah seperti itu jauh lebih ringan dibanding library plotting lain
    80% pekerjaan saya lebih dekat ke aplikasi, 10% ke sistem, dan 10% ke analisis data, dan kadang saya membuat notebook Jupyter selama dua minggu lalu tidak menyentuhnya lagi selama dua bulan
    Kebanyakan library plotting punya banyak aturan arbitrer yang harus dihafal, dan biasanya ada beberapa bahasa khusus domain kecil. String sederhana bisa ditafsirkan jauh lebih rumit daripada atoi
    Selain itu, ada banyak hal yang menurut sudut pandang saya keliru di berbagai area seperti penentuan rentang sumbu, penanganan jumlah titik yang sangat besar, dan lain-lain
    D3 memang memaksa kita melakukan banyak hal sendiri, tetapi antarmuka untuk itu secara konsep cukup intuitif. Daripada memakai kode umum milik orang lain yang besar, penuh bug, dan API-nya terasa seperti merakit kapal di dalam botol, saya rasa lebih baik membuatnya dengan benar memakai D3.js
  • Saya cukup sering memakai D3 sampai pernah membuat integrasi untuk AngularJS dan Angular. Memang kuat, tetapi saya selalu merasa sangat tidak intuitif
    Mudah dipakai dengan cara yang salah, sulit di-debug, dan juga sulit dipahami
    Bukan berarti masalah ini mudah dipecahkan. Jika harus membuat grafik berbasis data yang sangat spesifik, saya mungkin tetap akan memilih D3
  • Antarmuka komputasi manusia untuk kalkulus telah disempurnakan dengan cermat selama beberapa generasi. Kalau membaca sedikit tulisan asli Newton saja, akan langsung terlihat bahwa dulu tidak selalu seperti itu
    Membandingkan API dengan standar seperti itu sebenarnya terasa tidak adil
  • Saya mengalami hal yang sama. Sebagai tech lead sekarang, saya sangat menekankan agar tidak memakai library yang menuntut pengetahuan domain tingkat tinggi
    Kode yang bahkan sulit dipahami oleh penulisnya sendiri harus sebisa mungkin dihindari, dan D3 adalah contoh utama library seperti itu
• Menurut saya D3 tetap layak dipelajari meskipun akhirnya tidak dipakai di pekerjaan. Inti library ini adalah bahwa dimensi target proyeksi data dan dimensi data itu sendiri selalu berbeda
  Misalnya, jika menggambar data dalam rentang nilai 0~100 ke layar 1080p berukuran 1920x1080, pada suatu titik kita harus memutuskan bagaimana melakukan penskalaan agar data cocok dengan proyeksi layar
  Kita bisa menghitung matematikanya sendiri, atau menyerahkan perhitungannya ke library seperti D3
  Walaupun tidak menggambar data di web, suatu saat nanti kita akan perlu menggambar data di suatu tempat, dan akan berguna jika bisa menemukan alat dengan peran serupa di ekosistem itu
  • Salah satu program PHP buatan saya yang paling awal adalah generator PNG graf distribusi binomial
    Kalau saya ingat benar, saya harus menskalakan persegi-persegi yang digambar pada graf agar sesuai dengan ukuran PNG yang sedang dibuat
    Tentu saja itu sangat sepele dan sama sekali berbeda dari hal-hal menakjubkan yang bisa dilakukan D3, tetapi itu pengalaman keren pertama saya membuat gambar di komputer dengan tangan saya sendiri
  • Ini penjelasan yang bagus untuk menangkap konsep intinya
    Secara pribadi D3 tidak pernah terasa intuitif bagi saya. Mungkin masalahnya karena ia mencoba melakukan terlalu banyak hal pada terlalu banyak tingkat abstraksi
    Kalau sekadar soal memproyeksikan data, itu mudah dipahami, tetapi proyeksi itu juga sangat terkait dengan sumbu dan elemen lain, jadi mungkin itu penyebabnya
• Masalah sebenarnya dengan D3 adalah, sebagai library, ia sebenarnya tidak benar-benar melakukan visualisasi untuk kita. Ia hanya menyediakan fungsi dan contoh untuk merakit visualisasi sendiri, dan syarat utamanya adalah pemahaman tingkat ahli tentang JavaScript, khususnya closure dan functional programming

Perbedaan perhitungan select dan select yang oleh mbostock disebut sebagai abstraksi inti D3, menurut saya lebih mirip fasilitas demi menulis paint() yang bisa di-reenter
Hanya saja pernyataan paint diekspresikan sebagai pernyataan builder, lalu dengan hiasan bahwa ia sendiri terikat dalam cakupan select dan bisa dipecah untuk berbagai efek
Terutama pada contoh animasi, pekerjaan yang dilakukan D3 ternyata sangat sedikit hingga mengejutkan, dan penggunaan loop luar serta pelacakan status seiring waktu tetap harus dilakukan sendiri
D3 juga tidak menyediakan abstraksi untuk mengenkapsulasi visualisasi, baik sebagai fungsi maupun bentuk lain, dan bagian ini dibiarkan sebagai pekerjaan rumah bagi pembaca
Bagi pengguna baru D3, semua ini terasa sebagai kejutan besar atau bahkan guncangan. Mirip seperti mengadopsi database baru lalu yang tersedia hanya pustaka I/O file, indeks B-tree, dan query optimizer, sementara semuanya harus dirangkai sendiri

• Layak melihat visx. Sebenarnya ini terasa pantas disebut D4, yaitu Declarative Data Driven Documents
  Ini adalah bentuk penggantian d3-select, modul manipulasi DOM D3, dengan React. Fakta bahwa ini memungkinkan dan bekerja dengan baik adalah bukti bahwa desain D3 memang hebat
• D3 bukan kumpulan alat chart seperti matplotlib atau ggplot, melainkan library tingkat rendah untuk membangun visualisasi data dari nol
  Bergantung pada tujuan, ini bisa jadi alat yang diperlukan, atau justru bukan
• Saya menyukai D3.js, dan telah memakainya sebagai teknologi inti di puluhan proyek visualisasi data, baik komersial maupun pribadi. Namun sekarang sintaks render-nya terlihat setua era jQuery
  Saya masih memakai banyak fungsi bantu seperti easing atau scaling, tetapi komponen nyatanya kini saya bangun dengan framework modern. Dalam kasus saya, itu Vue 3 dan TypeScript
  Meski begitu, saya tetap berterima kasih pada masa-masa indah yang diberikan D3.js dan karena telah mengajarkan banyak praktik baik dalam visualisasi data
  Default dan demo dari Mike Bostock adalah sumber inspirasi sekaligus contoh standar yang baik, dan juga sangat selaras dengan minimalisme Tufte
  • Kalau ada contoh penggunaan fungsi bantu D3 bersama Vue 3 dan TypeScript, saya ingin melihatnya
• Setelah mempelajari D3, dengan asumsi tujuannya adalah membuat sesuatu yang mirip chart, menurut saya lebih baik pindah ke alat setara seperti VisX atau React dan tidak menoleh lagi
  D3 dan jQuery agak mirip dalam beberapa hal, dan keduanya mudah berubah menjadi kode spageti. Alat seperti VisX menambahkan banyak struktur di atas D3 yang dipakainya sehingga tetap waras
  • Saya sudah cukup lama memakai D3 sesekali, dan sekarang baru mulai dengan React dan visx; sejauh ini tampak menjanjikan karena menjembatani kesenjangan antara keduanya dengan baik
    Namun saya penasaran apakah saat ingin membuat sesuatu yang lebih kustom dibanding ketika memakai D3 murni, rasanya jadi terbatas seolah harus melawan alatnya
• D3 terinspirasi oleh Grammar of Graphics dari Wilkinson
  Alat lain yang juga terinspirasi dari GG adalah ggplot2, yang namanya pun cocok, dan ditujukan untuk bahasa R
  Ia menawarkan antarmuka yang jauh lebih ringkas dan lebih dekat ke paradigma fungsional, serta cocok dipadukan dengan alat yang cukup langka bernama Rush untuk membuat grafik cepat dengan mem-pipe CSV, yakni one-liner R untuk shell
• Saya terus mencari solusi diagram/chart yang tidak sepenuhnya berbasis web. Harus bisa dijalankan lewat CLI atau library dan menghasilkan SVG atau PNG
  Alat-alat seperti ini biasanya bergantung pada fitur browser, atau memakai solusi server-side rendering yang canggung dengan browser headless untuk generasi di sisi server
  Akan sangat bagus jika bisa membuat diagram Venn secara terprogram. Anehnya, hampir tidak ada apa pun di area ini
  Beberapa library chart JavaScript memang mendukungnya, tetapi secara umum dukungannya tampak sangat minim
  gnuplot terlihat bagus, tetapi tidak mendukung diagram Venn
• Hanya materi ini yang akhirnya membuat saya memahami D3. Penulisnya juga responsif dan sangat membantu
• Saya sering mendengar penilaian bagus tentang Vega[1], alat yang dibangun di atas D3
  Ini juga merupakan dependensi OpenSearch Dashboards, sehingga memungkinkan pengguna membuat dashboard kustom di atas data log dan observability[2]
  Tampaknya library Vega bisa sedikit meringankan masalah kurva belajar D3 yang dibicarakan orang-orang
  [1] https://vega.github.io/vega/docs/
  [2] https://opensearch.org/docs/latest/dashboards/visualize/vega...