Cara install d3.js

admin Aug 8, 2018 1473 0

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 :

Library d3.js, dapat kalian download https://d3js.org/
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
Web browser (Google Chrome, Firefox,Opera Mini dan masih banyak lainnya)
Web Server

Library D3.js

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

langsung memasang Library d3.js dari project folder
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 :