D3.js - Array API

D3 berisi kumpulan modul. Anda dapat menggunakan setiap modul secara mandiri atau kumpulan modul bersama-sama untuk melakukan operasi. Bab ini menjelaskan tentang Array API secara detail.

Apa itu Array?

Array berisi kumpulan elemen berurutan dengan ukuran tetap dari tipe yang sama. Sebuah array digunakan untuk menyimpan sekumpulan data, tetapi seringkali lebih berguna untuk menganggap array sebagai kumpulan variabel dengan tipe yang sama.

Konfigurasi API

Anda dapat dengan mudah mengkonfigurasi API menggunakan skrip di bawah ini.

<script src = "https://d3js.org/d3-array.v1.min.js"></script>
<body>
   <script>
   </script>
</body>

Metode API Statistik Array

Berikut adalah beberapa metode API statistik larik yang paling penting.

d3.min(array)
d3.max(array)
d3.extent(array)
d3.sum(array)
d3.mean(array)
d3.quantile(array)
d3.variance(array)
d3.deviation(array)

Mari kita bahas masing-masing secara rinci.

d3.min (larik)

Ini mengembalikan nilai minimum dalam larik yang diberikan menggunakan urutan alami.

Example - Simak script berikut ini.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.min(data));
</script>

Result - Skrip di atas mengembalikan nilai minmum dalam larik 20 di konsol Anda.

d3.max (larik)

Ini mengembalikan nilai maksimum dalam larik tertentu.

Example - Simak script berikut ini.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.max(data));
</script>

Result - Skrip di atas mengembalikan nilai maksimum dalam larik (100) di konsol Anda.

d3.extent (larik)

Ini mengembalikan nilai minimum dan maksimum dalam larik yang diberikan.

Example - Simak script berikut ini.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.extent(data));
</script>

Result - Skrip di atas mengembalikan nilai tingkat [20.100].

d3.sum (larik)

Ini mengembalikan jumlah dari larik angka yang diberikan. Jika array kosong, ia mengembalikan 0.

Example - Perhatikan yang berikut di bawah ini.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.sum(data));
</script>

Result - Skrip di atas mengembalikan nilai jumlah 300.

d3.mean (array)

Ini mengembalikan mean dari larik angka yang diberikan.

Example - Perhatikan yang berikut di bawah ini.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.mean(data));
</script>

Result - Skrip di atas mengembalikan nilai rata-rata sebagai 60. Demikian pula, Anda dapat memeriksa nilai median.

d3.quantile (larik)

Ini mengembalikan p-kuantil dari larik angka yang diurutkan, di mana p adalah angka dalam rentang [0, 1]. Misalnya, median dapat dihitung menggunakan p = 0,5, kuartil pertama pada p = 0,25, dan kuartil ketiga pada p = 0,75. Implementasi ini menggunakan metode R-7, bahasa pemrograman R default dan Excel.

Example - Perhatikan contoh berikut.

var data = [20, 40, 60, 80, 100];
d3.quantile(data, 0); // output is 20
d3.quantile(data, 0.5); // output is 60
d3.quantile(data, 1); // output is 100

Demikian pula, Anda dapat memeriksa nilai lainnya.

d3.variance (larik)

Ini mengembalikan varian dari larik angka yang diberikan.

Example - Simak script berikut ini.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.variance(data));
</script>

Result - Skrip di atas mengembalikan nilai varians sebagai 1000.

d3. deviasi (larik)

Ini mengembalikan deviasi standar dari larik yang diberikan. Jika array memiliki kurang dari dua nilai, ia mengembalikan sebagai tidak ditentukan.

Example - Perhatikan yang berikut di bawah ini.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.deviation(data));
</script>

Result - Skrip di atas mengembalikan nilai deviasi sebagai 31.622776601683793.

Example- Mari kita lakukan semua metode Array API yang dibahas di atas menggunakan skrip berikut. Buat halaman web "array.html" dan tambahkan perubahan berikut ke dalamnya.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         var data = [20,40,60,80,100];
         console.log(d3.min(data));  
         console.log(d3.max(data));
         console.log(d3.extent(data));
         console.log(d3.sum(data));
         console.log(d3.mean(data));
         console.log(d3.quantile(data,0.5));
         console.log(d3.variance(data));
         console.log(d3.deviation(data));
      </script>
   </body>
</html>

Sekarang, minta browser dan kita akan melihat respons berikut.

Metode Array Search API

Berikut adalah beberapa metode API pencarian Array yang penting.

d3.scan(array)
d3. menaik (a, b)

Mari kita pahami keduanya secara detail.

d3.scan (larik)

Metode ini digunakan untuk melakukan pemindaian linier dari larik yang ditentukan. Ini mengembalikan indeks elemen terkecil ke pembanding yang ditentukan. Contoh sederhana dijelaskan di bawah ini.

Example -

var array = [{one: 1}, {one: 10}];
console.log(d3.scan(array, function(a, b) { return a.one - b.one; })); // output is 0
console.log(d3.scan(array, function(a, b) { return b.one - a.one; })); // output is 1

d3. menaik (a, b)

Metode ini digunakan untuk menjalankan fungsi komparator. Ini dapat diimplementasikan sebagai -

function ascending(a, b) {
   return a < b ? -1 : a > b ? 1 : a > =  b ? 0 : NaN;
}

Jika tidak ada fungsi pembanding yang ditentukan untuk metode sortir bawaan, urutan default adalah menurut abjad. Fungsi di atas mengembalikan -1, jika a lebih kecil dari b, atau 1, jika a lebih besar dari b, atau 0.

Demikian pula, Anda dapat melakukan metode menurun (a, b). Ia mengembalikan -1, jika a lebih besar dari b, atau 1, jika a lebih kecil dari b, atau 0. Fungsi ini melakukan urutan natural terbalik.

Example -

Buat halaman web array_search.html dan tambahkan perubahan berikut ke dalamnya.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         var array = [{one: 1}, {one: 10}];
         console.log(d3.scan(array, function(a, b) { return a.one - b.one; })); // 0
         console.log(d3.scan(array, function(a, b) { return b.one - a.one; })); // 1
      </script>
   </body>
</html>

Sekarang, minta browser dan kita akan melihat hasil berikut.

Array Transformations API

Berikut adalah beberapa metode API transformasi larik yang paling menonjol.

d3.cross (a, b [, reducer])
d3.merge(arrays)
d3.pairs (array [, reducer])
d3.permute (larik, indeks)
d3.zip(arrays)

Mari kita pahami masing-masing secara rinci.

d3.cross (a, b [, reducer])

Metode ini digunakan untuk mengembalikan produk Kartesius dari dua larik a dan b yang diberikan. Contoh sederhana dijelaskan di bawah ini.

d3.cross([10, 20], ["a", "b"]); // output is [[10, "a"], [10, "b"], [20, "a"], [20, "b"]]

d3.merge (array)

Metode ini digunakan untuk menggabungkan array dan didefinisikan di bawah ini.

d3.merge([[10], [20]]); // output is [10, 20]

d3.pairs (array [, reducer])

Metode ini digunakan untuk memasangkan elemen array dan didefinisikan di bawah.

d3.pairs([10, 20, 30, 40]); // output is [[10, 20], [20, 30], [30, 40]]

d3.permute (larik, indeks)

Metode ini digunakan untuk melakukan permutasi dari array dan indeks yang ditentukan. Anda juga dapat melakukan nilai-nilai dari suatu objek ke dalam array. Dijelaskan di bawah.

var object = {fruit:"mango", color: "yellow"},
   fields = ["fruit", "color"];
d3.permute(object, fields); // output is "mango" "yellow"

d3.zip (array)

Metode ini digunakan untuk mengembalikan array array. Jika array hanya berisi satu array, array yang dikembalikan berisi array satu elemen. Jika tidak ada argumen yang ditentukan, maka array yang dikembalikan kosong. Ini didefinisikan di bawah.

d3.zip([10, 20], [30, 40]); // output is [[10, 30], [20, 40]]

Example - Buat halaman web array_transform dan tambahkan perubahan berikut ke dalamnya.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         console.log(d3.cross([10, 20], ["a", "b"]));
         console.log(d3.merge([[10], [30]]));
         console.log(d3.pairs([10, 20, 30, 40]));
         var object = {fruit:"mango", color: "yellow"},
         fields = ["fruit", "color"];
         console.log(d3.permute(object, fields)); 
         console.log(d3.zip([10, 20], [30, 40]));
      </script>
   </body>
</html>

Sekarang, minta browser dan kita akan melihat respons berikut.