ARTIKEL 7 SIDS

D3.js/Data-Driven Documents

D3.js (juga dikenal sebagai D3, kependekan dari Data-Driven Documents) adalah pustaka JavaScript untuk menghasilkan visualisasi data interaktif dan dinamis di browser web. Itu menggunakan standar Scalable Vector Graphics (SVG), HTML5, dan Cascading Style Sheets (CSS). Ini adalah penerus kerangka Protovis sebelumnya. [2] Berbeda dengan banyak perpustakaan lain, D3.js memungkinkan kontrol besar terhadap hasil visual akhir. [3] Perkembangannya dicatat pada 2011, [4] karena versi 2.0.0 dirilis pada Agustus 2011. [5]

D3.js digunakan pada ratusan ribu situs web. [6] Beberapa kegunaan populer termasuk membuat grafik interaktif untuk situs web berita online, dasbor informasi untuk melihat data, dan menghasilkan peta dari data pembuatan peta GIS. Selain itu, sifat SVG yang dapat diekspor memungkinkan grafik yang dibuat oleh D3 untuk digunakan dalam publikasi cetak.

Ada berbagai upaya sebelumnya untuk membawa visualisasi data ke browser web. Contoh yang paling menonjol adalah toolkit Prefuse, Flare, dan Protovis, yang semuanya dapat dianggap sebagai pendahulu langsung dari D3.js.

Prefuse adalah tool visualisasi yang dibuat pada 2005 yang mengharuskan penggunaan Java, dan visualisasi diberikan di dalam browser dengan plug-in Java. Flare adalah toolkit serupa dari 2007 yang menggunakan ActionScript, dan membutuhkan plug-in Flash untuk rendering.

Pada tahun 2009, berdasarkan pengalaman mengembangkan dan memanfaatkan Prefuse dan Flare, Jeff Heer, Mike Bostock, dan Vadim Ogievetsky dari Stanford Visualization Group menciptakan Protovis, perpustakaan JavaScript untuk menghasilkan grafik SVG dari data. Perpustakaan ini dikenal oleh praktisi visualisasi data dan akademisi. [7]

Technical principles

Tertanam dalam halaman web HTML, pustaka JavaScript D3.js menggunakan fungsi JavaScript yang sudah dibuat sebelumnya untuk memilih elemen, membuat objek SVG, gaya mereka, atau menambahkan transisi, efek dinamis atau tooltips kepada mereka. Objek-objek ini juga dapat ditata secara luas menggunakan CSS. Kumpulan data besar dapat dengan mudah diikat ke objek SVG menggunakan fungsi D3.js sederhana untuk menghasilkan grafik dan diagram teks / grafik yang kaya. Data dapat dalam berbagai format, paling umum JSON, nilai yang dipisah koma (CSV) atau geoJSON, tetapi, jika diperlukan, fungsi JavaScript dapat ditulis untuk membaca format data lainnya.

API structure

D3.js API contains several hundred functions, and they can be grouped into following logical units:^[14]

• Selections
• Transitions
• Arrays
• Math
• Color
• Scales
• SVG
• Time
• Layouts
• Geography
• Geometry
• Behaviors

Maths

• Generation of pseudorandom numbers with normal, log-normal, Bates, and Irwin-Hall distributions.
• Transformations in 2D: translation, rotation, skew, and scaling.

Arrays

D3.js array operations are built to complement existing array support in JavaScript (mutator methods: sort, reverse, splice, shift and unshift; accessor methods: concat, join, slice, indexOf and lastIndexOf; iteration methods: filter, every, forEach, map, some, reduce and reduceRight). D3.js extends this functionality with:

• Functions for finding minimum, maximum, extent, sum, mean, median, and quantile of an array.
• Functions for ordering, shuffling, permuting, merging, and bisecting arrays.
• Functions for nesting arrays.
• Functions for manipulating associative arrays.
• Support for map and set collections.

Geometry

• Computing convex hull of a set of points.
• Computing Voronoi tesselation of a set of points.
• Support for point quadtree data structure.
• Support for basic operations on polygon.

Color

• Support for RGB, HSL, HCL, and L*a*b* color representation.
• Brightening, darkening, and interpolation of colors.