Pemodelan dan Visualisasi Data

Membuat Diagram Batang Sederhana pada Laman HTML Menggunakan d3.js

Nana Wijaya Kusuma

3KA11

14119663

    

    D3.js adalah library JavaScript yang dipakai untuk memanipulasi dokumen HTML dan menggambar diagram berdasarkan data yang diberikan. Library ini menggunakan HTML, CSS, dan SVG Untuk membuat representasi visual dari kumpulan data yang bisa dilihat diberbagai browser modern. D3.js juga memiliki fitur untuk membuat diagram yang interaktif dengan animasi-animasi menarik. Ditutorial ini kita akan membuat diagram batang sederhana pada laman HTML menggunakan D3.js.

    Pertama, tentukan direktori (folder) di komputer kalian tempat kalian akan mengerjakan praktik ini. Kemudian buatlah sebuah file HTML, nama bebas, tapi saya beri nama generic: nanad3js.html.

    

    Saran saya, gunakan editor teks semacam Visual Studio Code, Atom, Sublime Text, atau Notepad++. Boleh juga menggunakan sebuah Web IDE, atau bahkan hanya Notepad bawaan Windows. Saya menggunakan VS Code. Berikut isi file nanad3js.html:

    Perhatikan, ada dua elemen penting (tag) di dalam file yang dicontohkan di atas, yaitu <script> dengan atribut src dimana kita memanggil modul d3.js yang tidak berada di komputer kita, dan juga <div> dengan atribut id bernama my_dataviz. Ada sebuah <script> kosong dengan satu komentar // ...., nanti kita akan menulis kode di sini.

    Kedua, silakan copy-paste kode di bawah ini ke dalam tag <script> yang ada teks // ... seperti terlihat di atas tadi.

    Simpan, lalu buka file nanad3js.html menggunakan browser favorit kalian.