Pada kesempatan sharing session kali ini saya berkesempatan untuk berbagi informasi kepada rekan-rekan tentang D3.js.
D3.js merupakan sebuah library javaScript yang digunakan untuk memanipulasi dokumen berdasarkan data. D3.js membantu mentransformasikan data menjadi bentuk visual seperti bar chart, line chart dan lain-lain yang dapat disajikan kepada pembaca melalui web browser.
Sebelum memulai untuk membuat visualisasi dengan D3.js ini, kita harus mengenali web standar yang digunakan oleh library ini yaitu : SVG, HTML, CSS, JavaScript.
Pada pengenalan ini, kita akan mencoba mengenali konsep D3.js dan mencoba membuat visualisasi sederhana dengan me-render sebuah diagram batang.
Memulai Menggunakan D3.js
Beberapa tools yang perlu dipersiapkan untuk membuat D3.js ini adalah : library D3.js , Editor, Web Browser dan Web Server.
Untuk menggunakan library D3.js pada file HTML, kita perlu mengimport library d3.js yang bisa didapatkan dari website d3.js ( https://d3js.org/) atau dari website CDN. Untuk mengimport library d3.js pada file HTML dapat ditulis sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
</body>
</html>
Konsep D3.js
Dengan menggunakan D3.js kita dapat memanipulasi Document Object Model (DOM), yang artinya kita bisa memilih elemen dan memberikan berbagai jenis transformasi ke elemen tersebut.
Konsep Select()
Selections merupakan salah satu konsep utama dari d3.js. Dengan menggunakan konsep ini maka kita dapat melakukan seleksi satu atau lebih elemen pada halaman web untuk dilakukan modifikasi (modify), append (menambahkan), atau menghapus (remove). Terdapat 2 jenis konsep select, yaitu :
- Select(), menyeleksi hanya satu elemen DOM yang dipadankan dengan CSS selector.
- SelectAll(), menyeleksi semua elemen DOM yang dipadankan dengan CSS selector.
Metode Select()
Metode Select() dapat digunakan untuk menyeleksi elemen HTML dengan 3 cara, yaitu : menyeleksi Tag HTML, menyeleksi nama kelas element HTML, menyeleksi id elemen HTML
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div>
Hello World!
</div>
<div id="hello">
This is select method by class "Hello"
</div>
<div class="hello">
This is select method by class name "hello"
</div>
<script>
d3.select("div").text();
d3.select("#hello").text();
d3.select(".hello").text();
</script>
</body>
</html>
Metode SelectAll()
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h2 class = "myclass">Message</h2>
<div class = "myclass">
Hello World!
</div>
<script>
d3.selectAll(".myclass").attr("style", "color: red");
</script>
</body>
</html>
Berdasarkan contoh diatas, dengan menggunakan metode selectAll() maka seluruh elemen yang diberi nama class “myclass” akan ditambahkan atribut style dengan memberi properti warna merah.
Menambahkan Elemen DOM
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class = "myclass">
Hello,
<span class="text"></span>
</div>
<script>
d3.select(".myclass").append("p");
d3.select(".myclass").style("color", "blue");
d3.select(".text").text("World....");
d3.select(".text").attr("style", "color : red");
</script>
</body>
</html>
D3.js memnyediakan metode append() untuk menambah elemen baru pada dokumen HTML. Untuk contoh kode diatas, elemen <div> yang diberi nama class “myclass” ditambahkan elemen <p> kemudian ditambahkan method style() untuk menambahkan property styling warna font berwarna biru. Kemudian pada elemen <span> yang diberi nama class “text” ditambahkan metode text() untuk menambahkan text “World” dan ditambahkan atribut style dengan menggunakan metode attr().
Konsep Data()
Konsep penting dari d3.js yang lainnya adalah data(). metode data() ini berfungsi untuk memetakan elemen pada data yang diberikan. Diberikan contoh seperti berikut :
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<ul></ul>
<script>
data = ['Programmer', 'Technical Writer', 'Technical engineer', 'Networking engineer', 'Database Administrators']
d3.select("ul")
.selectAll("li")
.data(data)
.enter()
.append("li")
.text(function (d) { return d; });
</script>
</body>
</html>
Untuk kode diatas, elemen <ul> akan diberikan sebuah data list profesi di bidang IT yang datanya disimpan pada sebuah variabel array bernama data. kemudian semua elemen <li> akan dipilih menggunakan metode selectAll() untuk menyimpan setiap nilai data array pada satu elemen <li>. Metode data(data) merupakan metode yang digunakan untuk mengirimkan data pada elemen yang dipilih. Kemudian metode enter() digunakan untuk mengulangi metode append() dan text() sebanyak jumlah data array pada variabel data. Dengan kata lain, perintah tersebut akan menambahkan elemen <li> untuk setiap item data array dan menambahkan text yang berisi nilai array dengan metode text().
Membuat Bar Chart Sederhana
Setelah mencoba memahami konsep dasar dari D3.js ini, kali ini kita akan mencoba untuk membuat bar chart sederhana seperti yang dicontohkan dengan kode dibawah ini.
<!DOCTYPE html>
<html lang = "en">
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
.box {
height: auto;
}
div.chart_vertical {
font : 10px sans-serif;
background-color: steelblue;
text-align : right;
padding: 3px;
margin : 1px;
color : white;
width: 60px;
display: inline-block;
height: 110px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var data = [20, 50, 168, 100, 303, 200];
d3.select(".box").selectAll("div")
.data(data)
.enter()
.append("div")
.attr("class", "chart_vertical")
.style("height", function(d){ return d + "px";})
</script>
</body>
</html>
Pada kode diatas kita mempunyai data angka-angka yang disimpan pada variabel array bernama data. Setiap item data array akan mewakili satu buah bar.
Implementasi pembuatan bar chart ini mirip dengan contoh sebelumnya. Elemen <div> yang diberi nama class “box” akan dipilih untuk menampilkan bar chart yang akan dibuat. Kemudian seluruh elemen <div> di dalam elemen <div> yang diberi nama class “box” akan dipilih untuk mentransformasikan setiap item data dari array menjadi sebuah bar. Kemudian kita akan mengirimkan data array dari variabel data ke elemen <div>. Metode enter() digunakan untuk melakukan perintah metode append(“div”), attr() dan text() secara berulang sebanyak banyaknya item data pada variabel data.
Untuk setiap penamabahan elemen <div> dengan metode append(“div”) akan ditambahkan atribut class bernama “chart_vertical”. Class “chart_vertical” ini mengacu pada nama class yang mewakili kumpulan properti styling yang telah dibuat pada elemen <style> diawal dokumen. Kemudian ditambahkan metode style() untuk menambahkan properti “height” dengan nilai angka-angka dari data array. Misalnya, untuk bar pertama, properti height diisi dengan angka 20.
Kesimpulan
D3.js merupakan library JavaScript yang mudah dipakai untuk memvisualisasikan data dengan menggunakan HTML, CSS dan SVG. Dengan D3.js ini pengguna dapat melakukan manipulasi terhadap elemen-elemen HTML dengan mudah (DOM manipulation). Selain itu, library ini mendukung data set yang besar seperti data geografis dan network. D3.js juga menyediakan fitur interaksi antarmuka yang baik bagi pengguna, seperti animasi dan transisi.
Sekian dulu penjelasan tentang pengenalan d3.js, semoga bermanfaat 🙂
Referensi :
