Konsep D3.js

Konsep D3.js

sekarang saya akan menjelaskan konsep dari d3.js. Sebelum itu saya harapkan anda sudah membaca tentang :

  1. Pengenalan D3.js

  2. Cara Install D3.js

D3.js merupakan sebuah library Javascript yang Open Source cocok untuk : 

  1. Data-Driven untuk memanipulasi Document Objek Model (DOM)
  2. mengolah data, bagan dan grafik
  3. Mengatur visual elemen untuk data linear,hierarki dan data geografis
  4. Memudahkan transisi User Interface 
  5. Membuat interaksi pengguna yang efektif

Standar Web

sebelum kita memulai d3.js untuk membuat visualisasi, kita harus mengetahui standar standar web yang banyak digunakan pada d3.js, diantaranya adalah :

  1. HyperText Markup Language (HTML)
  2. Document Object Model (DOM)
  3. Cascading Style Sheets (CSS)
  4. Scalable Vector Graphics (SVG)
  5. JavaScript

Mari kita bahas satu persatu kelima hal diatas agar kedepannya kita lebih paham konsep dari d3.js

HyperText Markup Language (HTML)

HTML digunakan untuk menyusun konten dari suatu halaman Web, dan disimpan dengan ekstensi ".html"

Contoh :

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title></title>
   </head>
   <body>
   </body>
</html>

Document Object Model (DOM)

Ketika halaman HTML dijalankan di browser, semua halaman akan diubah menjadi struktur hierarki. setiap tag didalam html diubah menjadi elemen / objek DOM dengan bentuk hierarki parent-child. Hal itu akan membuat HTML lebih terstruktur.

setelah DOM terbentuk membuat kita menjadi lebih mudah dalam memanipulasi ( add/edit/update/hapus ) elemen - elemen dihalaman.

Perhatikan contoh dibawah ini, dimana DOM mengunakan dokumen HTML

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>Contoh</title>
   </head>

   <body>
      <div>
         <h1>hallo</h1>
         <p>Hello World!</p>
      </div>
   </body>
</html>

Model dari objek dokumen HTML diatas dapat digambarkan seperti gambar dibawah ini

Cascading Style Sheets (CSS)

siapa yang tidak kenal dengan Cascading Style Sheets (CSS), kita lebih familiar menyebutnya dengan css, fungsi dari css tersebut adalah mempercantik halaman HTML yang sudah kita buat. disamping itu css juga mengatur bagaimana suatu elemen ditampilkan di halaman web

Scalable Vector Graphics (SVG)

SVG merupakan salah satu cara untuk merender gambar di halaman web, SVG bukan merupakan suatu gambar tetapi merupakan cara untuk membuat gambar mengunakan teks.

Semua browser mendukung SVG kecuali IE 8 dan versi dibawahnya.

Fungsi SVG di d3.js adalah untuk merender suatu visualisasi.

untuk memulai mengunakan SVG kita harus membuat terlebih dahulu tag SVG, seperti dibawah ini:

<svg width = "500" height = "500"></<svg>

Ukuran default dari SVG adalah piksel, jadi kita tidak perlu lagi mengubah ukuran dari svg kita kedalam bentuk piksel.

contoh kita akan membuat persegi panjang, kita bisa mengunakan kode dibawah ini 

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200" fill = "green"></rect>
</svg>

setelah dijalankan file tersebut akan menghasil sebuah bentuk dengan warna hijau

JavaScript

Siapa yang tidak kenal dengan javascript?Javascript merupakan script yang berjalan di sisi client, client side, Javascript berinteraksi dengan element HTML (elemen DOM). untuk lebih detail tentang Javascript silahkan dicari di google, tetapi syarat untuk memahami lebih jauh tentang d3.js kita harus tau dan paham tentang javascript.

itulah konsep dari d3.js, untuk tutorial selanjutnya kita akan membahas tentang :

  1. Selections di D3.js
  2. Join Data Dengan D3.js
  3. SVG di d3.js
  4. Pengantar transformasi ke SVG
  5. Transisi di d3.js
  6. Animasi di d3.js
  7. membuat grafik 
  8. Array API
  9. Collections API
  10. Selection API
  11. Paths API
  12. Scales API
  13. Axis API
  14. Shapes API
  15. Colors API
  16. Transitions API
  17. Dragging API
  18. Zooming API
  19. Requests API
  20. Delimiter-Separated Values API
  21. Timer API

jika kalian merasa artikel ini bermanfaat silahkan Share artikel ini. terimakasih

HAPPY CODING