Sudah sejak lama saya ingin membuat tampilan visual-grafis dari data. Memang saya sudah menggunakan dan menampilkan tampilan data dalam bentuk grafik. Beberapa library yang saya pergunakan memang dapat membuat saya cukup puas. Tapi saya ingin membuat semacam bentuk lain yang lebih mampu mewujudkan imaginasi saya.
Beberapa library yang pernah saya pergunakan seperti jQplot buatan Google, yang sering menjadi andalan saya untuk membuat grafik. Tapi untuk beberapa kasus ternyata saya harus memanfaatkan libray yang lain, sehingga untuk menampilkan tampilan data saya perlu menggabungkan beberapa library.
Setelah pencarian dan uji coba akhrinya membawa saya mengenal D3JS. Tulisan ini bagi saya tidak hanya untuk sekedar mengingat ingat. Tapi suatu saat juga ingin saya kembangkan lagi.
Langsung saja, untuk menggunakan D3js kita panggil dulu librarynya dengan script src. Pada tulisan kali ini saya menggunakan D3 versi 4. Contohnya seperti berikut:
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.3/d3.min.js"></script>
Kalau di panggil di lokal path:
<script src='d3.v4.min.js'></script>
Seperti biasa agar javascript dapat berjalan ditampilan browser, maka perlu ditautkan ke file html.
<html>
<head>
<title>Latihan D3</title>
</head>
<body>
<script src='d3.v4.min.js'></script>
</body>
</html>
Sampai disini kita telah berhasil memanggil file javascript kedalam file html. Saya beri nama file html ini dengan nama latihan1.html.
Kemudian saya ingin menambahkan text yang dibuat langsung dari D3. Bukan menggunakan tag yang ditulis di html. Pertama tama select atau pilih tag yang pasti ada di html yaitu tag body kemudian baru diolah. Jadi dalam file HTML tidak dituliskan tag secara manual tapi dibuatkan dari D3 menggunakan append.
Contohnya:
<script>
d3.select("body")
.append("h1")
.text("Ayo belajar visual data");
</script>
Maka bila file latihan1.html dijalankan di browser maka akan tampil tulisan dalam text didalam tag h1. Cukup mudah bukan?
Kita lanjutkan masih di script yang tadi, misalnya kita tambahkan atribut style. Contohnya:
<script>
d3.select("body")
.append("h1")
.text("Ayo belajar visual data")
.attr("style","color:red;font-style: italic";
</script>
Maka bila browser kita refresh (f5) tulisan akan berwarna merah dan dicetak miring. Untuk tulisan kali ini sementara demikian, semoga yang sedikit ini bermanfaat.
Tidak ada komentar:
Posting Komentar