PENJABARAB D3JS

PENJABARAB D3JS

Dari Universitas Bhayangkara

Memahami D3.js

D3.js adalah perpustakaan JavaScript yang banyak digunakan dalam visualisasi data dan animasi. Kekuatan d3.js dan fleksibilitasnya, datang dengan mengorbankan kurva belajar yang curam. Ada beberapa perpustakaan yang dibangun di atasnya yang menyediakan banyak bagan di luar rak untuk membuat hidup pengguna lebih mudah, namun, belajar untuk bekerja dengan d3.js kadang-kadang sangat penting, terutama ketika Anda harus membuat yang canggih dan khusus visualisasi.

Jika Anda tidak terbiasa dengan d3.js, Anda dapat membaca pengantar ini. Secara singkat, seperti halnya jQuery dan kerangka kerja manipulasi DOM lainnya, ini memungkinkan Anda untuk secara dinamis memanipulasi properti dan atribut elemen dokumen HTML Anda. Namun demikian, itu tidak berhenti di sini. Kekuatannya berasal dari dua fungsi tambahan. Itu juga dapat membuat dan memanipulasi elemen SVG, dan itu juga dapat mengikat elemen DOM atau SVG ke array data, sehingga setiap perubahan dalam data itu akan tercermin pada elemen-elemen yang mereka terikat.

 Ada banyak bentuk SVG, seperti lingkaran, persegi panjang, jalur, dan teks. Bentuk-bentuk itu berfungsi sebagai blok bangunan visualisasi Anda. Misalnya, bagan batang terdiri dari beberapa persegi panjang. sedangkan sebaran plot dibuat dari lingkaran yang tersebar di berbagai bagian area gambar Anda. Anda mungkin juga ingin melihat tutorial interaktif ini tentang membuat dan memanipulasi elemen SVG, serta mengikat mereka ke array data.

Mengapa Kita Membutuhkan D3.js?

D3.js adalah salah satu kerangka kerja utama bila dibandingkan dengan perpustakaan lain. Ini karena ia bekerja di web dan visualisasi datanya adalah par excellence. Alasan lain mengapa ia bekerja sangat baik adalah karena fleksibilitasnya. Karena ini bekerja secara mulus dengan teknologi web yang ada dan dapat memanipulasi bagian mana pun dari model objek dokumen, itu sama fleksibelnya dengan Stack Teknologi Sisi Web Klien (HTML, CSS, dan SVG). Ini memiliki dukungan komunitas yang hebat dan lebih mudah dipelajari.

Fitur D3.js

D3.js adalah salah satu kerangka visualisasi data terbaik dan dapat digunakan untuk menghasilkan visualisasi sederhana maupun kompleks bersama dengan interaksi pengguna dan efek transisi. Beberapa fitur yang menonjol tercantum di bawah ini :

·         Sangat fleksibel.

·         Mudah digunakan dan cepat.

·         Mendukung dataset besar.

·         Pemrograman deklaratif.

·         Penggunaan kembali kode.

·         Memiliki berbagai fungsi penghasil kurva.

·         Mengaitkan data ke elemen atau grup elemen di halaman html.

Manfaat D3.js

D3.js adalah proyek sumber terbuka dan bekerja tanpa plugin apa pun. Ini membutuhkan kode yang sangat sedikit dan menghasilkan manfaat berikut :

·         Visualisasi data yang hebat.Itu modular. Anda dapat mengunduh sepotong kecil D3.js, yang ingin Anda gunakan. Tidak perlu memuat seluruh perpustakaan setiap saat.

·         Mudah untuk membangun komponen pembuatan bagan.

·         Manipulasi DOM.
Orang dapat dengan cepat mulai mengkode bagan D3 dengan HTML dengan memasukkan sumber skrip di antara tag. Versi terbaru pada saat penulisan blog ini adalah V4.

Memilih dan Menambahkan Dengan D3

Jika Anda pernah menggunakan perpustakaan seperti jQuery, maka memilih elemen akan mudah bagi Anda. Jika Anda hanya seorang pemula di dunia JS, maka rileks - ini akan sangat mudah bagi Anda. Anda tidak perlu tahu banyak tentang JS, dan pada akhir perjalanan Anda melalui D3, pemahaman Anda tentang JS akan meningkat secara drastis.

Kode di atas adalah yang paling sederhana. Di sini, hal terpenting dalam keseluruhan kode ini adalah objek d3. Objek d3 adalah objek besar dan kompleks yang memiliki semua fungsi perpustakaan d3.js. Jika Anda ingin melihat ke dalamnya, maka setelah memuat kode HTML Anda di browser, buka konsol browser dengan menekan Ctrl + Shift + i. Ketik "d3" di konsol dan tekan Enter. Anda akan melihat semua komponen d3.

Sekarang kembali ke contoh kita. Dengan metode select () objek thed3, elemen DOM apa pun dapat dipilih. Setelah melakukan itu, beberapa operasi dapat dilakukan di atasnya. Di sini, elemen <p>> dipilih dan warnanya berubah menjadi biru.

Menggambar Bentuk Dasar Dengan D3

Mari kita mulai dengan membuat bentuk dasar di D3. Tapi kita tidak bisa melakukan itu hanya dengan menambahkan bentuk SVG langsung ke halaman HTML, bentuk SVG memerlukan wadah SVG. Semua bentuk di dalam wadah itu dapat relatif disesuaikan untuk selanjutnya - misalnya, perubahan dalam satu kurva yang mempengaruhi kurva lain atau perubahan dalam koordinat yang mengubah bentuk kurva atau posisi titik di dalam wadah itu.

Kita bisa menambahkan wadah ke badan halaman HTML dengan metode append () dan kemudian menambahkan bentuk ke wadah itu. Di sini, wadahnya 600px lebar dan tinggi.