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.
Di tutorial ini kita
akan mengenal konsep dasar penggunaan D3.js. Kita akan pelajari bagaimana
menggunakannya dengan me-render sebuah diagram batang, elemen HTML dan SVG,
serta menerapkan transformasi dan event ke diagram tersebut.
Ø Mulai Menggunakan D3
Karena D3.js adalah
library JavaScript, untuk memakainya kita cukup menulis baris berikut di dalam
file HTML.
<script
src='https://d3js.org/d3.v4.min.js'></script>
Ø DOM Selection
Dengan D3.js kita bisa
memanipulasi Document Object Model (DOM), yang artinya kita bsa memilih elemen
dan memberikan berbagai jenis transformasi ke elemen tersebut.
Mari mulai dengan
contoh sederhana dimana kita akan memakai D3 untuk memilih dan mengubah warna
dan ukuran font tag heading.
<html>
<head>
<title>Learn D3 in 5
minutes</title>
</head>
<body>
<h3>Today
is a beautiful day!!</h3>
<script
src='https://d3js.org/d3.v4.min.js'></script>
<script>
d3.select('h3').style('color', 'darkblue');
d3.select('h3').style('font-size', '24px');
</script>
</body>
</html>
Disini kita hanya menautkan mehod select() di
objek d3 yang memilih elemen tertentu, dan diikuti dengan
method style(). Di method style(), parameter pertama menentukan apa
yang ingin diubah dan parameter kedua memberikan nilai yang baru.
Ø Data Binding
Konsep berikutnya yang
perlu dipelajari adalah data binding karena konsep ini sangat penting di D3.
Dengan menggunakannya, kita bisa mengisi atau memanipulasi elemen DOM
secara realtime.
di HTML kita, tambahkan sebuah tag <ul>:
<ul> </ul>
Kita ingin mengisi unordered list tersebut
dengan sebuah objek data. Berikut kode JavaScript-nya:
<script>
var fruits = ['apple', 'mango', 'banana',
'orange'];
d3.select('ul')
.selectAll('li')
.data(fruits)
.enter()
.append('li')
.text(function(d) { return d; });
</script>
Pada kode JavaScript di
atas, D3 membaca elemen <ul> dan seluruh elemen <li> di
dalamnya menggunakan select() dan selectAll(). Agaknya aneh kita
membaca elemen li yang belum kita tamahkan disana, tapi begitulah
cara kerja D3.
Kita lalu mengirimkan
data dengan method data(), dan memanggil enter() yang akan
mengulangi (melakukan looping atau perulangan) method-method
di bawahnya (append dan text) sampai isi arrray fruits habis
di baca satu persatu.
Dengan kata lain,
perintah tersebut, menambahkan sebuah <li> untuk setiap item di
dalam array. Untuk setiap tag li, ia juga menambahkan teks didalamnya
menggunakan mehod text(). Parameter d didalam text() adalah
fungsi callback yang mengarah ke elemen di dalam array saat
looping terjadi (apple, mango, dst satu persatu).
Ø Membuat Elemen SVG
Scalable Vector
Graphics (SVG) adalah sebuah cara untuk me-render elemen grafis dan gambar ke
dalam DOM. Karena SVG berbasis vector, maka ia ringan dan scalable (bisa
diperbesar/perkecil tanpa mempengaruhi kualitas). D3 menggunakan SVG untuk
menciptakan gambar-gambarnya, sehingga SVG menjadi pondasi utama library ini.
Pada contoh di bawah, sebuah kotak digambar
menggunakan D3 di sebuah kontainer SVG.
//Select SVG
element
var svg =
d3.select('svg');
//Create
rectangle element inside SVG
svg.append('rect')
.attr('x', 50)
.attr('y', 50)
.attr('width', 200)
.attr('height', 100)
.attr('fill', 'green');
D3 akan me-render elemen
kotak di DOM. Ia pertama memeilih elemen SVG dan menggambar kotaknya di dalam
elemen tersebut. Ia juga mengatur koordinat x dan y juga lebar, tinggi, dan
warna isinya di method attr().
Ø Membuat Diagram Batang
D3 memungkinkan kita untuk membuat berbagai jenis
diagram agar bisa merepresentasikan data dengan lebih efisien. Pada contoh di
bawah, kita membuat diagram batang sederhana dengan D3.
Mari mulai dengan membuat tag SVG di HTML.
<svg width='200' height='500'></svg>
Lalu, kita tulis kode JavaScript yang kita butuhkan
untuk merender diagram tersebut di tag <svg>:
var data = [80,
120, 60, 150, 200];
var barHeight =
20;
var bar =
d3.select('svg')
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('width', function(d) { return d; })
.attr('height', barHeight - 1)
.attr('transform', function(d, i) {
return "translate(0," + i
* barHeight + ")";
});
Pada kode di atas, kita
memiliki sebuah array yang berisi angka-angka untuk ditampilkan di diagram
batang kita tadi. Setiap item di dalam array akan mengisi satu batang.
Setelah memilih elemen
svg dan rect, kita mengirim data dengan method data() dan
memanggil enter() untuk melakukan looping kode-kode di bawahnya
sampai isi array habis di baca.
Untuk setiap item, kita
menggambar sebuah kotak dan mengatur lebarnya sesuai dengan nilai yang
dimiliki. Kita lalu mengatur tinggi setiap kotak dan untuk menghindari
overlapping, kita memberikan padding dengan mengurangi barHeight sebesar
1.
Kita lalu memberikan
sebuah transformasi agar kotak-kotak tersebut berada kotak sebelumnya.
Fungsi transform() menerima fungsi callback yang mengambil data dan
indeks data tersebut sebagai parameter. Kita memodifikasi nilai y kotak dengan
mengalikan index dengan tinggi kotak.
Ø Event Handling
Terakhir, mari kita
lihat bagaimana event handling di D3. Pada contoh di bawah
kita menghubungkan event klik dengan sebuah button lalu menambahkan sebuah tag
heading ke dalam tag body di event handler-nya.
d3.select('#btn')
.on('click', function () {
d3.select('body')
.append('h3')
.text('Today is a beautiful
day!!');
})
Ø Kesimpulan
D3.js adalah library
JavaScript yang powerful, namun masih mudah untuk dipakai membuat diagram
dengan HTML, CSS, dan SVG.
#UBHARA
No comments:
Post a Comment