D3JS

D3.js adalah library JavaScript untuk memanipulasi dokumen berdasarkan data. D3 membantu Anda membawa data ke kehidupan menggunakan HTML, SVG, dan CSS. Penekanan D3 pada standar web memberikan kemampuan penuh dari browser modern tanpa mengikat diri untuk kerangka proprietary, menggabungkan komponen visualisasi yang kuat dan pendekatan data-driven untuk manipulasi DOM.

Download versi terbaru (4.2.3) di sini:

·                     d3.zip

Untuk link langsung ke rilis terbaru, menyalin cuplikan ini:

<script src="https://d3js.org/d3.v4.min.js"></script>

The sumber penuh dan tes juga tersedia untuk di-download di GitHub. Menunjukkan dukungan Anda untuk pengembangan berkelanjutan D3 oleh membeli stiker resmi !

#Pendahuluan

Baca lebih lanjut tutorial .

D3 memungkinkan Anda untuk mengikat data yang sewenang-wenang dengan Document Object Model (DOM), dan kemudian menerapkan transformasi data untuk dokumen. Misalnya, Anda dapat menggunakan D3 untuk menghasilkan sebuah tabel HTML dari array angka. Atau, menggunakan data yang sama untuk membuat SVG bar chart interaktif dengan transisi yang halus dan interaksi.

D3 bukanlah kerangka monolitik yang berusaha untuk memberikan setiap fitur dibayangkan.Sebaliknya, D3 memecahkan inti dari masalah: efisien manipulasi dokumen berdasarkan data. Hal ini untuk menghindari representasi eksklusif dan memberi fleksibilitas yang luar biasa, memperlihatkan kemampuan penuh dari standar web seperti HTML, SVG, dan CSS. Dengan overhead minimal, D3 sangat cepat, mendukung dataset besar dan perilaku dinamis untuk interaksi dan animasi. Gaya fungsional D3 memungkinkan penggunaan kembali kode melalui beragam koleksi komponen danplugin .

#Seleksi

Baca lebih lanjut tentang pilihan .

Memodifikasi dokumen menggunakan API W3C DOM membosankan: nama metode yang verbose, dan pendekatan penting membutuhkan iterasi manual dan pembukuan negara sementara. Misalnya, untuk mengubah warna teks dari elemen ayat:

var paragraphs = document.getElementsByTagName("p");

for (var i = 0; i < paragraphs.length; i++) {

  var paragraph = paragraphs.item(i);

  paragraph.style.setProperty("color", "white", null);

}

D3 menggunakan pendekatan deklaratif, beroperasi di set sewenang-wenang node disebut pilihan .Misalnya, Anda dapat menulis ulang loop di atas sebagai:

d3.selectAll("p").style("color", "white");

Namun, Anda masih dapat memanipulasi node individu yang diperlukan:

d3.select("body").style("background-color", "black");

Penyeleksi didefinisikan oleh API W3C pemilih dan didukung secara native oleh browser modern.Mundur-kompatibilitas untuk browser lama dapat diberikan oleh Sizzle . Contoh di atas pilih node dengan nama tag ( "p"dan "body", masing-masing). Elemen dapat dipilih dengan menggunakan berbagai predikat, termasuk penahanan, nilai atribut, kelas dan ID.

D3 menyediakan berbagai metode untuk bermutasi node: pengaturan atribut atau gaya; mendaftar acara pendengar; menambahkan, menghapus atau menyortir node; dan mengubah HTML atau teks konten. Ini cukup untuk sebagian besar kebutuhan. akses langsung ke DOM yang mendasari juga mungkin, karena setiap pilihan D3 hanyalah sebuah array dari node.

#Dinamik

Pembaca akrab dengan kerangka DOM lain seperti jQuery atau Prototype harus segera mengenali kemiripan dengan D3. Namun gaya, atribut, dan properti lainnya dapat ditentukan sebagai fungsi data di D3, bukan hanya konstanta sederhana. Meskipun kesederhanaan jelas mereka, fungsi-fungsi ini dapat sangat kuat; yang d3.geo.pathfungsi, misalnya, proyek koordinat geografis ke SVG jalur data . D3 menyediakan banyak fungsi built-in dapat digunakan kembali dan pabrik fungsi, sepertiprimitif grafis untuk daerah, jalur dan pie chart.

Misalnya, untuk secara acak warna paragraf:

d3.selectAll("p").style("color", function() {

  return "hsl(" + Math.random() * 360 + ",100%,50%)";

});

Untuk nuansa alternatif abu-abu bahkan dan node aneh:

d3.selectAll("p").style("color", function(d, i) {

  return i % 2 ? "#fff" : "#eee";

});

Sifat dihitung sering mengacu pada data terikat. Data ditentukan sebagai sebuah array nilai, dan setiap nilai dilewatkan sebagai argumen pertama ( d) fungsi seleksi. Dengan default bergabung-dengan-indeks, elemen pertama dalam array data akan diteruskan ke node pertama dalam seleksi, elemen kedua ke node kedua, dan seterusnya. Misalnya, jika Anda mengikat array nomor ke elemen paragraf, Anda dapat menggunakan nomor ini untuk menghitung ukuran font yang dinamis:

d3.selectAll("p")

  .data([4, 8, 15, 16, 23, 42])

    .style("font-size", function(d) { return d + "px"; });

Setelah data telah terikat dokumen, Anda dapat menghilangkan dataoperator, D3 akan mengambil data yang sebelumnya terikat. Hal ini memungkinkan Anda untuk menghitung ulang properti tanpa rebinding.

#Masukkan dan Keluar

Menggunakan D3 masukkan dan keluar pilihan, Anda dapat membuat node baru untuk data yang masuk dan menghapus node keluar yang tidak lagi diperlukan.

Ketika data terikat untuk pilihan, setiap elemen dalam array data dipasangkan dengan node yang sesuai dalam pemilihan. Jika ada lebih sedikit node dari data, elemen data tambahan membentuk memasukkan pilihan, yang dapat Anda instantiate dengan menambahkan ke enterseleksi. Sebagai contoh:

d3.select("body")

  .selectAll("p")

  .data([4, 8, 15, 16, 23, 42])

  .enter().append("p")

    .text(function(d) { return "I’m number " + d + "!"; });

Memperbarui node default pilihan-hasil dataoperator. Jadi, jika Anda lupa tentang masuk dan keluar pilihan, Anda akan secara otomatis memilih hanya unsur-unsur yang terdapat data yang sesuai. Pola umum adalah untuk memecahkan seleksi awal menjadi tiga bagian: kelenjar update untuk memodifikasi, node masuk untuk menambahkan, dan node keluar untuk menghapus.

// Update…

var p = d3.select("body")

  .selectAll("p")

  .data([4, 8, 15, 16, 23, 42])

    .text(function(d) { return d; });

// Enter…

p.enter().append("p")

    .text(function(d) { return d; });

// Exit…

p.exit().remove();

Dengan penanganan tiga kasus ini secara terpisah, Anda menentukan tepatnya yang operasi berjalan pada node. Hal ini meningkatkan kinerja dan memberikan kontrol yang lebih transisi.Misalnya, dengan grafik bar Anda mungkin menginisialisasi memasuki bar dengan menggunakan skala tua, dan kemudian transisi memasuki bar dengan skala baru bersama dengan memperbarui dan keluar bar.

D3 memungkinkan Anda mengubah dokumen berdasarkan data; ini mencakup menciptakan dan menghancurkan elemen. D3 memungkinkan Anda untuk mengubah dokumen yang ada dalam menanggapi interaksi pengguna, animasi dari waktu ke waktu, atau pemberitahuan bahkan asynchronous dari pihak ketiga. Pendekatan hybrid ini bahkan mungkin, di mana dokumen tersebut awalnya diberikan pada server, dan diperbarui pada klien melalui D3.

#Transformasi, tidak Representasi

D3 tidak memperkenalkan representasi visual baru. Tidak seperti Pengolahan , Raphaël , atauProtovis , kosakata D3 untuk tanda grafis berasal langsung dari standar web: HTML, SVG, dan CSS.Misalnya, Anda dapat membuat elemen SVG menggunakan D3 dan gaya mereka dengan stylesheet eksternal. Anda dapat menggunakan efek filter komposit, stroke putus-putus dan kliping. Jika vendor browser memperkenalkan fitur baru besok, Anda akan dapat menggunakan mereka segera-ada update toolkit diperlukan. Dan, jika Anda memutuskan di masa depan untuk menggunakan toolkit selain D3, Anda dapat mengambil pengetahuan Anda tentang standar dengan Anda!

Terbaik dari semua, D3 mudah untuk debug menggunakan built-in inspektur elemen browser: node yang Anda memanipulasi dengan D3 persis orang-orang bahwa browser mengerti native.

#Transisi

Fokus D3 pada transformasi meluas secara alami untuk transisi animasi. Transisi secara bertahap interpolasi gaya dan atribut dari waktu ke waktu. Tweening dapat dikontrol melalui fungsi pelonggaran seperti "elastis", "kubik-in-out" dan "linear". Interpolators D3 mendukung kedua primitif, seperti nomor dan nomor tertanam dalam string (ukuran font, data jalur, dll ), dan nilai-nilai majemuk. Anda bahkan dapat memperpanjang registry interpolator D3 untuk mendukung sifat kompleks dan struktur data.

Misalnya, memudar latar belakang halaman untuk hitam:

d3.select("body").transition()

    .style("background-color", "black");

Atau, untuk mengubah ukuran lingkaran di peta simbol dengan penundaan terhuyung:

d3.selectAll("circle").transition()

    .duration(750)

    .delay(function(d, i) { return i * 10; })

    .attr("r", function(d) { return Math.sqrt(d * scale); });

Dengan memodifikasi hanya atribut yang benar-benar berubah, D3 mengurangi overhead dan memungkinkan kompleksitas grafis yang lebih besar pada frame rate yang tinggi. D3 juga memungkinkan urutan transisi kompleks melalui peristiwa. Dan, Anda masih dapat menggunakan transisi CSS3; D3 tidak menggantikan toolbox browser, tetapi menghadapkan dengan cara yang lebih mudah digunakan.

Source code :
{
    "event_id": 50,
    "device_id": "6,56237E+17",
    "timestamp": "01/05/2016 0:11",
    "longitude": 114.94,
    "latitude": 26.79
  },
  {
    "event_id": 51,
    "device_id": "3,6457E+18",
    "timestamp": "01/05/2016 0:07",
    "longitude": 117.11,
    "latitude": 39.04
  },
  {
    "event_id": 52,
    "device_id": "-8,05165E+17",
    "timestamp": "30/04/2016 23:57",
    "longitude": 105.62,
    "latitude": 27.23
  },
  {
    "event_id": 53,
    "device_id": "-4,04709E+18",
    "timestamp": "30/04/2016 23:57",
    "longitude": 113.21,
    "latitude": 22.59
  },
  {
    "event_id": 54,
    "device_id": "-7,86892E+18",
    "timestamp": "30/04/2016 23:57",
    "longitude": 113.11,
    "latitude": 23.04
  },
  {
    "event_id": 55,
    "device_id": "8,88463E+18",
    "timestamp": "30/04/2016 23:58",
    "longitude": 104.15,
    "latitude": 35.95
  },
  {
    "event_id": 56,
    "device_id": "-3,41463E+18",
    "timestamp": "30/04/2016 23:55",
    "longitude": 114.44,
    "latitude": 36.64
  },
  {
    "event_id": 57,
    "device_id": "8,29239E+18",
    "timestamp": "30/04/2016 23:54",
    "longitude": 116.46,
    "latitude": 39.89
  },
  {
    "event_id": 59,
    "device_id": "3,12967E+18",
    "timestamp": "01/05/2016 0:50",
    "longitude": 116.3,
    "latitude": 39.75
  },
  {
    "event_id": 60,
    "device_id": "5,8611E+18",
    "timestamp": "01/05/2016 0:50",
    "longitude": 113.3,
    "latitude": 23.23
  },
  {
    "event_id": 61,
    "device_id": "-1,59386E+18",
    "timestamp": "01/05/2016 0:00",
    "longitude": 110.4,
    "latitude": 25.31
  },
  {
    "event_id": 63,
    "device_id": "7,7002E+18",
    "timestamp": "01/05/2016 0:45",
    "longitude": 121.88,
    "latitude": 29.47
  },
  {
    "event_id": 65,
    "device_id": "-3,03826E+18",
    "timestamp": "30/04/2016 23:57",
    "longitude": 113.35,
    "latitude": 23.06
  },
  {
    "event_id": 66,
    "device_id": "-1,66788E+18",
    "timestamp": "30/04/2016 23:57",
    "longitude": 119.76,
    "latitude": 36.68
  },
  {
    "event_id": 67,
    "device_id": "8,17778E+18",
    "timestamp": "01/05/2016 0:44",
    "longitude": 114.27,
    "latitude": 22.73
  },
  {
    "event_id": 68,
    "device_id": "7,33703E+18",
    "timestamp": "01/05/2016 0:29",
    "longitude": 110.92,
    "latitude": 35.12
  },
  {
    "event_id": 70,
    "device_id": "8,25052E+18",
    "timestamp": "01/05/2016 0:36",
    "longitude": 121.68,
    "latitude": 31.12
  },
  {
    "event_id": 71,
    "device_id": "3,23904E+18",
    "timestamp": "01/05/2016 0:37",
    "longitude": 118.37,
    "latitude": 33.68
  },
  {
    "event_id": 72,
    "device_id": "-5,52622E+18",
    "timestamp": "01/05/2016 0:38",
    "longitude": 124.83,
    "latitude": 45.13
  },
  {
    "event_id": 73,
    "device_id": "-7,54361E+18",
    "timestamp": "01/05/2016 0:39",
    "longitude": 102.74,
    "latitude": 25.13
  },
  {
    "event_id": 75,
    "device_id": "-4,23401E+18",
    "timestamp": "01/05/2016 0:20",
    "longitude": 113.43,
    "latitude": 23.39
  },
  {
    "event_id": 76,
    "device_id": "-8,33835E+17",
    "timestamp": "01/05/2016 0:00",
    "longitude": 114.3,
    "latitude": 30.52
  },
  {
    "event_id": 80,
    "device_id": "-8,9314E+18",
    "timestamp": "01/05/2016 0:17",
    "longitude": 119.81,
    "latitude": 36.23
  },
  {
    "event_id": 81,
    "device_id": "-8,9314E+18",
    "timestamp": "01/05/2016 0:18",
    "longitude": 119.81,
    "latitude": 36.23
  },
  {
    "event_id": 83,
    "device_id": "-6,47061E+18",
    "timestamp": "01/05/2016 0:27",
    "longitude": 120.35,
    "latitude": 30.29
  },
  {
    "event_id": 84,
    "device_id": "7,33703E+18",
    "timestamp": "01/05/2016 0:28",
    "longitude": 110.92,
    "latitude": 35.12
  },
  {
    "event_id": 86,
    "device_id": "-7,19552E+18",
    "timestamp": "01/05/2016 0:00",
    "longitude": 114.06,
    "latitude": 22.53
  },
  {
    "event_id": 88,
    "device_id": "2,52949E+18",
    "timestamp": "01/05/2016 0:40",
    "longitude": 114.47,
    "latitude": 38.1
  },
  {
    "event_id": 89,
    "device_id": "-1,14018E+18",
    "timestamp": "01/05/2016 0:41",
    "longitude": 123.01,
    "latitude": 41.14
  },
  {
    "event_id": 91,
    "device_id": "-8,64014E+18",
    "timestamp": "01/05/2016 0:52",
    "longitude": 120.3,
    "latitude": 36.66
  },
  {
    "event_id": 92,
    "device_id": "8,81709E+17",
    "timestamp": "01/05/2016 0:55",
    "longitude": 104.06,
    "latitude": 30.82
  },
  {
    "event_id": 93,
    "device_id": "4,65355E+18",
    "timestamp": "01/05/2016 0:31",
    "longitude": 113.91,
    "latitude": 35.33
  },
  {
    "event_id": 95,
    "device_id": "7,79159E+18",
    "timestamp": "01/05/2016 0:26",
    "longitude": 118.6,
    "latitude": 24.85
  },
  {
    "event_id": 96,
    "device_id": "-8,96837E+18",
    "timestamp": "01/05/2016 0:38",
    "longitude": 116.42,
    "latitude": 39.95
  },
  {
    "event_id": 97,
    "device_id": "5,19329E+18",
    "timestamp": "01/05/2016 0:39",
    "longitude": 121.36,
    "latitude": 37.58
  },
  {
    "event_id": 98,
    "device_id": "-7,07022E+18",
    "timestamp": "01/05/2016 0:23",
    "longitude": 0.54,
    "latitude": 0.59
  },
  {
    "event_id": 100,
    "device_id": "1,63168E+17",
    "timestamp": "01/05/2016 0:01",
    "longitude": 117.16,
    "latitude": 31.72
  },
  {
    "event_id": 103,
    "device_id": "2,87229E+18",
    "timestamp": "01/05/2016 0:03",
    "longitude": 113.86,
    "latitude": 22.58
  },
  {
    "event_id": 106,
    "device_id": "-5,10533E+18",
    "timestamp": "01/05/2016 0:07",
    "longitude": 108.33,
    "latitude": 22.87
  },
  {
    "event_id": 107,
    "device_id": "5,45046E+16",
    "timestamp": "01/05/2016 0:49",
    "longitude": 118.16,
    "latitude": 24.53
  },
  {
    "event_id": 109,
    "device_id": "8,54625E+18",
    "timestamp": "01/05/2016 0:53",
    "longitude": 120.66,
    "latitude": 31.31
  },
  {
    "event_id": 110,
    "device_id": "-5,05243E+18",
    "timestamp": "01/05/2016 0:07",
    "longitude": 109.8,
    "latitude": 40.64
  },
  {
    "event_id": 113,
    "device_id": "-1,05993E+18",
    "timestamp": "01/05/2016 0:56",
    "longitude": 118.37,
    "latitude": 25
  },
  {
    "event_id": 115,
    "device_id": "-7,29546E+18",
    "timestamp": "01/05/2016 0:03",
    "longitude": 120.52,
    "latitude": 31.37
  },
  {
    "event_id": 117,
    "device_id": "8,14151E+18",
    "timestamp": "01/05/2016 0:48",
    "longitude": 112.03,
    "latitude": 37.85
  },
  {
    "event_id": 118,
    "device_id": "-5,89486E+18",
    "timestamp": "01/05/2016 0:01",
    "longitude": 108.18,
    "latitude": 23.21
  },
  {
    "event_id": 119,
    "device_id": "-7,6142E+18",
    "timestamp": "01/05/2016 0:01",
    "longitude": 119.92,
    "latitude": 30.24
  },
  {
    "event_id": 120,
    "device_id": "6,00196E+18",
    "timestamp": "01/05/2016 0:02",
    "longitude": 113.07,
    "latitude": 22.57
  },
  {
    "event_id": 121,
    "device_id": "8,54216E+18",
    "timestamp": "01/05/2016 0:03",
    "longitude": 115.89,
    "latitude": 28.68
  },
  {
    "event_id": 123,
    "device_id": "-5,51589E+18",
    "timestamp": "01/05/2016 0:11",
    "longitude": 116.43,
    "latitude": 40.05
  },
  {
    "event_id": 126,
    "device_id": "-7,6142E+18",
    "timestamp": "01/05/2016 0:13",
    "longitude": 119.92,
    "latitude": 30.24
  },
  {
    "event_id": 128,
    "device_id": "-7,92384E+17",
    "timestamp": "01/05/2016 0:16",
    "longitude": 116.97,
    "latitude": 31.05
  },
  {
    "event_id": 129,
    "device_id": "6,25211E+18",
    "timestamp": "01/05/2016 0:13",
    "longitude": 120.56,
    "latitude": 31.31
  },
  {
    "event_id": 131,
    "device_id": "8,32355E+18",
    "timestamp": "01/05/2016 0:25",
    "longitude": 119.15,
    "latitude": 36.64
  },
  {
    "event_id": 132,
    "device_id": "1,89013E+18",
    "timestamp": "01/05/2016 0:09",
    "longitude": 117.08,
    "latitude": 39.99
  },
  {
    "event_id": 133,
    "device_id": "1,89013E+18",
    "timestamp": "01/05/2016 0:13",
    "longitude": 117.08,
    "latitude": 39.99
  },
  {
    "event_id": 134,
    "device_id": "-8,96837E+18",
    "timestamp": "01/05/2016 0:36",
    "longitude": 116.42,
    "latitude": 39.95
  },
  {
    "event_id": 135,
    "device_id": "1,82836E+17",
    "timestamp": "01/05/2016 0:37",
    "longitude": 114.33,
    "latitude": 22.69
  },
  {
    "event_id": 137,
    "device_id": "6,56237E+17",
    "timestamp": "01/05/2016 0:35",
    "longitude": 114.94,
    "latitude": 26.79
  },
  {
    "event_id": 140,
    "device_id": "-1,66788E+18",
    "timestamp": "01/05/2016 0:17",
    "longitude": 119.76,
    "latitude": 36.68
  },
  {
    "event_id": 141,
    "device_id": "-3,62659E+17",
    "timestamp": "01/05/2016 0:17",
    "longitude": 107.48,
    "latitude": 29.71
  },
  {
    "event_id": 144,
    "device_id": "-8,9344E+18",
    "timestamp": "01/05/2016 0:18",
    "longitude": 116.17,
    "latitude": 35.48
  },
  {
    "event_id": 145,
    "device_id": "7,91222E+17",
    "timestamp": "01/05/2016 0:19",
    "longitude": 116.34,
    "latitude": 39.77
  },
  {
    "event_id": 146,
    "device_id": "-3,69992E+18",
    "timestamp": "01/05/2016 0:22",
    "longitude": 113.7,
    "latitude": 28.27
  },
  {
    "event_id": 147,
    "device_id": "8,29239E+18",
    "timestamp": "01/05/2016 0:36",
    "longitude": 116.46,
    "latitude": 39.89
  },
  {
    "event_id": 148,
    "device_id": "-2,8E+18",
    "timestamp": "01/05/2016 0:04",
    "longitude": 126.58,
    "latitude": 43.87
  },
  {
    "event_id": 150,
    "device_id": "-6,69434E+18",
    "timestamp": "01/05/2016 0:08",
    "longitude": 120.39,
    "latitude": 27.5
  },
  {
    "event_id": 151,
    "device_id": "5,99659E+18",
    "timestamp": "01/05/2016 0:11",
    "longitude": 104.39,
    "latitude": 23.02
  },
  {
    "event_id": 153,
    "device_id": "2,50441E+18",
    "timestamp": "01/05/2016 0:10",
    "longitude": 120.62,
    "latitude": 31.31
  },
  {
    "event_id": 154,
    "device_id": "1,05911E+18",
    "timestamp": "01/05/2016 0:11",
    "longitude": 104.73,
    "latitude": 31.73
  },
  {
    "event_id": 156,
    "device_id": "-5,44489E+18",
    "timestamp": "01/05/2016 0:46",
    "longitude": 117.36,
    "latitude": 32.95
  },
  {
    "event_id": 158,
    "device_id": "2,50441E+18",
    "timestamp": "01/05/2016 0:56",
    "longitude": 120.62,

    "latitude": 31.31

(function(){
var margin ={top:50, left: 50 , right: 50, bottom:50 },
height = 400 - margin.top + margin.bottom,
width = 800 - margin.left + margin.right;

var svg = d3.select("map")
.append("svg")
.attr("height", height+margin.top+margin.bottom)
.attr("width", width + margin.left+ margin.right)
.append("g")
.attr("transform", "translete("+ margin.left + "," + margin.top+")");


d3.queque()
.defer(d3.json,"world.json")
.await(ready)

function ready (error, data){
console.log(data)

}

})();

Referensi :

1 https://en.wikipedia.org/wiki/D3.js

2 https://www.codepolitan.com/belajar-dasar-dasar-d3js-library-javascript-untuk-membuat-diagram-ciamik-5ad95e476dac7