D3.js - Instalasi

Dalam bab ini, kita akan mempelajari cara mengatur lingkungan pengembangan D3.js. Sebelum kita mulai, kita membutuhkan komponen berikut -

Perpustakaan D3.js
Editor
Browser web
Server web

Mari kita bahas langkah-langkahnya satu per satu secara detail.

Perpustakaan D3.js

Kami perlu menyertakan pustaka D3.js ke dalam halaman web HTML Anda untuk menggunakan D3.js untuk membuat visualisasi data. Kita dapat melakukannya dengan dua cara berikut -

Sertakan pustaka D3.js dari folder proyek Anda.
Sertakan pustaka D3.js dari CDN (Jaringan Pengiriman Konten).

Unduh Perpustakaan D3.js

D3.js adalah pustaka sumber terbuka dan kode sumber pustaka tersedia gratis di web di https://d3js.org/situs web. Kunjungi situs web D3.js dan unduh versi terbaru D3.js (d3.zip). Saat ini, versi terbaru adalah 4.6.0.

Setelah pengunduhan selesai, unzip file dan cari d3.min.js. Ini adalah versi minimal dari kode sumber D3.js. Salin file d3.min.js dan tempelkan ke folder root proyek Anda atau folder lain, tempat Anda ingin menyimpan semua file perpustakaan. Sertakan file d3.min.js di halaman HTML Anda seperti yang ditunjukkan di bawah ini.

Example - Mari kita perhatikan contoh berikut.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "/path/to/d3.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

D3.js adalah kode JavaScript, jadi kita harus menulis semua kode D3 kita di dalam tag “script”. Kita mungkin perlu memanipulasi elemen DOM yang ada, jadi disarankan untuk menulis kode D3 tepat sebelum akhir dari tag "body".

Sertakan D3 Library dari CDN

Kita dapat menggunakan perpustakaan D3.js dengan menautkannya langsung ke halaman HTML kita dari Jaringan Pengiriman Konten (CDN). CDN adalah jaringan server tempat file di-host dan dikirim ke pengguna berdasarkan lokasi geografisnya. Jika kita menggunakan CDN, kita tidak perlu mendownload source code-nya.

Sertakan pustaka D3.js menggunakan URL CDN https://d3js.org/d3.v4.min.js ke halaman kami seperti yang ditunjukkan di bawah ini.

Example - Mari kita perhatikan contoh berikut.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

Editor D3.js

Kami memerlukan editor untuk mulai menulis kode Anda. Ada beberapa IDE hebat (Integrated Development Environment) dengan dukungan untuk JavaScript seperti -

Kode Visual Studio
WebStorm
Eclipse
Sublime Text

IDE ini menyediakan penyelesaian kode yang cerdas serta mendukung beberapa kerangka kerja JavaScript modern. Jika Anda tidak memiliki IDE yang mewah, Anda selalu dapat menggunakan editor dasar seperti Notepad, VI, dll.

Browser Web

D3.js bekerja di semua browser kecuali IE8 dan yang lebih rendah.

Server Web

Sebagian besar browser menyajikan file HTML lokal langsung dari sistem file lokal. Namun, ada batasan tertentu saat memuat file data eksternal. Pada bab terakhir dari tutorial ini, kami akan memuat data dari file eksternal sepertiCSV dan JSON. Karenanya, akan lebih mudah bagi kita, jika kita menyiapkan web server sejak awal.

Anda dapat menggunakan server web apa pun, yang Anda rasa nyaman - misalnya IIS, Apache, dll.

Melihat Halaman Anda

Dalam banyak kasus, kami hanya dapat membuka file HTML Anda di browser web untuk melihatnya. Namun, saat memuat sumber data eksternal, akan lebih dapat diandalkan untuk menjalankan server web lokal dan melihat halaman Anda dari server(http://localhost:8080).