Cara install d3.js

Cara install d3.js

pada tutorial sebelumnya kita sudah berkenalan dengan yang namanya d3.js, untuk yang belum tau apa itu d3.js silahkan baca dulu DISINI

Pada tuorial ini kita akan belajar cara install d3.js dan cara menjalankannya, tapi sebelum menginstall d3.js ada beberapa komponen yang kita butuhkan, yaitu :

  1. Library d3.js, dapat kalian download https://d3js.org/
  2. Editor text, ada begitu banyak text editor, kalau saya lebih suka mengunakan Sublime text, jika kalian ingin mencobanya juga silahkan download di https://www.sublimetext.com
  3. Web browser (Google Chrome, Firefox,Opera Mini dan masih banyak lainnya)
  4. Web Server

Library D3.js

ada 2 cara untuk memasang library d3.js di html kita, yaitu:

  1. langsung memasang Library d3.js dari project folder
  2. include dari CDN (Content Delivery Network)

Download Library D3.js

D3.js merupakan source code library yang open source dan tersedia di website nya https://d3js.org/ , silahkan download library d3.js di websitenya langsung, ketika artikel ini dibuat d3.js sudah mengeluarkan versi 5.5.0

setelah download selesai silahkan di ekstrak dan kalian akan menemukan d3.min.js . salin file d3.min.js tersebut dan simpan di project folder kalian.untuk mengunakannya kita harus memanggilanya didalam file html

Contoh : mengunakan file d3.min.js di HTML

<!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 merupakan kode Javascript, jadi untuk menulis kode tersebut kita harus mulai menulisnya dengan tag <script> dan ditulis setelah tag <body>

Cara Include Library d3.js dari CDN

selain mengunakan cara diatas kita juga bisa mengunakan library d3.js dengan cara menghubungkan langsung ke website d3.js, kauntungan mengunakan ini adalah kita tidak perlu mendownload file d3.min.js nya.

untuk URL nya adalah https://d3js.org/d3.v5.min.js

Contoh : mengunakan file d3.min.js dari URL 

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

   <body>
      <script>
         // tulis code disini
      </script>
   </body>
</html>

Cara menampilkan di browser

tida seperti kasus lainnya dimana kalau kita ingin membuka file HTML kita tinggal langsung buka dari browser, berbeda dengan d3.js untuk cara menjalankannya adalah dengan akses di url browse kita http://localhost: 8080

itu lah cara install dan menjalankan d3.js , untuk totorial selanjutnya kita akan belajar tentang :

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

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

HAPPY CODING