MEMBUAT DIAGRAM BATANG SEDERHANA PADA LAMAN HTML MENGGUNAKAN D3.JS
FERY HERIYANDI
Langkah
Pertama, menententukan direktori (folder) di komputer untuk menyimpan file yang
akan dibuat. Kemudian buatlah sebuah file HTML (untuk nama bebas), disini
saya beri nama generic: index.html.
Langkah
Kedua, gunakanlah editor teks semacam
Visual Studio Code, Atom, Sublime Text, atau Notepad++. Boleh juga menggunakan
sebuah Web IDE, atau bahkan hanya Notepad bawaan Windows. Disini saya
menggunakan Visual Studio Code.
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.
Selain itu, ada sebuah <script> kosong dengan satu komentar // ....,
yang nantinya kita akan menulis kode di sini.
Terdapat juga penanda bahasa (dalam hal ini Indonesia: <html
lang="id">), dan ada beberapa tag yang kalian pasti tidak asing,
misalnya <head> dan <body>.
Langkah Ketiga, unduhlah sebuah file CSV (bebas), disini saya menggunakan
file CSV yang sudah saya unduh pada: http://staffsite.gunadarma.ac.id/
Setelah di unduh, letakkan di direktori yang sama dengan kalian membuat
file index.html tadi.
Langkah Keempat Masukkan Kode JavaScript ke dalam tag <script> yang terdapat teks //... seperti berikut.
Komentar
Posting Komentar