Rabu, 20 Juli 2022

MEMBUAT DIAGRAM BATANG SEDERHANA PADA LAMAN HTML MENGGUNAKAN D3.JS

 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 Sublime Text.

Berikut isi file index.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.

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.


Berikut contoh hasil outputnya:



Tidak ada komentar:

Posting Komentar

Analisis Browser

 Analisis Browser untuk Chrome, Mozilla Firefox, Opera, dan Edge Chrome Google Chrome adalah peramban web lintas platform yang dikembangkan ...