D3Js

D3.js

UNIVERSITAS BHAYANGKARA SURABAYA

D3.js (juga dikenal sebagai D3 , kependekan dari Data-Driven Documents ) adalah perpustakaan JavaScript untuk menghasilkan visualisasi data interaktif dan dinamis di browser web . Itu menggunakan standar Scalable Vector Graphics (SVG), HTML5 , dan Cascading Style Sheets (CSS). D3.js digunakan pada ratusan ribu situs web. Beberapa kegunaan populer termasuk membuat grafik interaktif untuk situs web berita online, dasbor informasi untuk melihat data, dan menghasilkan peta dari data pembuatan peta GIS . Selain itu, sifat SVG yang dapat diekspor memungkinkan grafik yang dibuat oleh D3 untuk digunakan dalam publikasi cetak.

Ada berbagai upaya sebelumnya untuk membawa visualisasi data ke browser web. Contoh yang paling menonjol adalah toolkit Prefuse, Flare, dan Protovis, yang semuanya dapat dianggap sebagai pendahulu langsung dari D3.js.

Prefuse adalah tool visualisasi yang dibuat pada 2005 yang mengharuskan penggunaan Java , dan visualisasi diberikan di dalam browser dengan plug-in Java. Flare adalah toolkit serupa dari 2007 yang menggunakan ActionScript , dan membutuhkan plug-in Flash untuk rendering.

Pada tahun 2009, berdasarkan pengalaman mengembangkan dan menggunakan Prefuse dan Flare, Jeff Heer, Mike Bostock , dan Vadim Ogievetsky dari Stanford Visualization Group dari Stanford menciptakan Protovis, perpustakaan JavaScript untuk menghasilkan grafik SVG dari data. Perpustakaan itu dikenal oleh praktisi visualisasi data dan akademisi. 

Pada 2011, pengembangan Protovis dihentikan untuk fokus pada proyek baru, D3.js. Diinformasikan oleh pengalaman dengan Protovis, Bostock, bersama dengan Heer dan Ogievetsky, mengembangkan D3.js untuk menyediakan kerangka kerja yang lebih ekspresif yang, pada saat yang sama, berfokus pada standar web dan memberikan peningkatan kinerja.

Prinsip Teknis

Tertanam dalam halaman web HTML , pustaka JavaScript D3.js menggunakan fungsi JavaScript yang sudah dibuat sebelumnya untuk memilih elemen, membuat objek SVG, gaya mereka, atau menambahkan transisi, efek dinamis atau tooltips kepada mereka. Objek-objek ini juga dapat ditata secara luas menggunakan CSS. Kumpulan data besar dapat dengan mudah diikat ke objek SVG menggunakan fungsi D3.js sederhana untuk menghasilkan grafik dan diagram teks / grafik yang kaya. Data dapat dalam berbagai format, paling umum JSON , nilai yang dipisah koma (CSV) atau geoJSON , tetapi, jika diperlukan, fungsi JavaScript dapat ditulis untuk membaca format data lainnya.

Pilihan

Prinsip utama dari desain D3.js adalah untuk memungkinkan programmer untuk pertama kali menggunakan pemilih gaya CSS untuk memilih satu set node Document Object Model (DOM), kemudian menggunakan operator untuk memanipulasi mereka dengan cara yang mirip dengan jQuery . ^[9] Misalnya, dengan menggunakan D3.js, seseorang dapat memilih semua elemen HTML <p>...</p> , dan kemudian mengubah warna teksnya, misalnya menjadi lavender:

  d3 .  selectAll ( "p" ) // pilih semua elemen <p>


 .  style ( "color" , "lavender" ) // setel style "color" ke nilai "lavender"


    .  attr ( "class" , "squares" ) // set atribut "class" menjadi nilai "squares"



    .  attr ( "x" , 50 );  // atur atribut "x" (posisi horizontal) ke nilai 50px

Pilihan dapat didasarkan pada tag (seperti dalam contoh di atas), kelas, pengidentifikasi, atribut, atau tempat dalam hierarki. Setelah elemen dipilih, seseorang dapat menerapkan operasi padanya. Ini termasuk mendapatkan dan mengatur atribut, menampilkan teks, dan gaya (seperti pada contoh di atas). Elemen juga dapat ditambahkan dan dihapus. Proses memodifikasi, membuat, dan menghapus elemen HTML ini dapat dibuat bergantung pada data, yang merupakan konsep dasar D3.js.

Transisi

Dengan mendeklarasikan transisi, nilai untuk atribut dan gaya dapat diinterpolasi dengan lancar selama waktu tertentu. Kode berikut akan membuat semua elemen HTML <p>...</p> pada halaman secara bertahap mengubah warna teks menjadi pink:

  d3 .  selectAll ( "p" ) // pilih semua elemen <p>


 .  transisi ( "trans_1" ) // transisi dengan nama "trans_1"


      .  delay ( 0 ) // transisi mulai 0ms setelah pemicu



      .  durasi ( 500 ) // transisi untuk 500 ms



      .  easy ( d3 . easyLinear ) // progres pelonggaran transisi adalah linear ...



    .  gaya ( "warna" , "merah muda" );  // ... untuk mewarnai: merah muda

pengikatan data

Untuk penggunaan yang lebih lanjut, data yang dimuat mendorong pembuatan elemen. D3.js memuat dataset yang diberikan, kemudian, untuk setiap elemennya, membuat objek SVG dengan properti terkait (bentuk, warna, nilai) dan perilaku (transisi, peristiwa).

  // Data


 var countryData = [


      { nama : "Irlandia" , penghasilan : 53000 , hidup : 78 , pop : 6378 , warna : "hitam" },



      { nama : "Norwegia" , penghasilan : 73000 , kehidupan : 87 , pop : 5084 , warna : "biru" },



      { nama : "Tanzania" , penghasilan : 27000 , kehidupan : 50 , pop : 3407 , warna : "abu-abu" }



   ];


// Buat wadah SVG


   var svg = d3 .  pilih ( "#hook" ).  append ( "svg" )



         .  attr ( "width" , 120 )



         .  attr ( "height" , 120 )



         .  style ( "background-color" , "# D0D0D0" );


// Buat elemen SVG dari data


     svg .  selectAll ( "circle" ) // buat template lingkaran virtual



       .  data ( countryData ) // mengikat data



        .  gabung ( "lingkaran" ) // gabungkan data ke dalam seleksi dan buat elemen lingkaran untuk setiap data individual



         .  attr ( "id" , function ( d ) { return d . name }) // atur id lingkaran sesuai dengan nama negara



         .  attr ( "cx" , function ( d ) { return d . income / 1000 }) // atur posisi horizontal lingkaran sesuai dengan pendapatan



         .  attr ( "cy" , function ( d ) { return d . life }) // mengatur posisi vertikal lingkaran sesuai dengan harapan hidup



         .  attr ( "r" , function ( d ) { return d . pop / 1000 * 2 }) // mengatur jari-jari lingkaran sesuai dengan populasi negara



         .  attr ( "fill" , function ( d ) { return d . color });  // mengatur warna lingkaran sesuai dengan warna negara

Grafik SVG yang dihasilkan dirancang sesuai dengan data yang disediakan.

Menambahkan node menggunakan data

Setelah dataset terikat pada dokumen, penggunaan D3.js biasanya mengikuti pola di mana fungsi .enter() eksplisit, fungsi "update," implisit dan eksplisit .exit() dipanggil untuk setiap item dalam dataset terikat. . Setiap metode yang dirantai setelah perintah .enter() akan dipanggil untuk setiap item dalam dataset yang belum diwakili oleh simpul DOM dalam seleksi ( selectAll() sebelumnya selectAll() ). Demikian juga, fungsi pembaruan implisit dipanggil pada semua node yang dipilih yang ada item yang sesuai dalam dataset, dan .exit() dipanggil pada semua node terpilih yang ada yang tidak memiliki item dalam dataset untuk mengikatnya. Dokumentasi D3.js memberikan beberapa contoh cara kerjanya.

Struktur API D3.js

API D3.js berisi beberapa ratus fungsi, dan mereka dapat dikelompokkan ke dalam unit logis berikut:

• Pilihan
• Transisi
• Array
• Matematika
• Warna
• Sisik
• SVG
• Waktu
• Tata letak
• Geografi
• Geometri
• Perilaku

Matematika

• Generasi angka pseudorandom dengan distribusi normal , log-normal , Bates , dan Irwin-Hall .
• Transformasi dalam 2D: terjemahan , rotasi , miring, dan penskalaan.

Array

Operasi array D3.js dibangun untuk melengkapi dukungan array yang ada dalam JavaScript (metode mutator: sort, reverse, splice, shift, dan unshift; metode accessor: concat, join, slice, indexOf dan lastIndexOf; metode iterasi: filter, setiap, untuk setiap mesin, map, sebagian, kurangi dan perkecilRight). D3.js memperluas fungsi ini dengan:

• Fungsi untuk menemukan minimum, maksimum, luas, jumlah, rata-rata, median, dan kuantil dari suatu array.
• Fungsi untuk memesan, mengocok, mengganti-ganti, menggabungkan, dan membagi dua array.
• Fungsi untuk array bersarang.
• Fungsi untuk memanipulasi array asosiatif.
• Dukungan untuk peta dan mengatur koleksi.

Geometri

• Menghitung lambung cembung satu set poin.
• Menghitung Voronoi tesselation dari satu set poin.
• Dukungan untuk struktur data titik quadtree .
• Dukungan untuk operasi dasar pada poligon.