D3.JS Data-Driven Documents
of 22
/22
-
Upload
caisar-oentoro -
Category
Technology
-
view
676 -
download
1
Embed Size (px)
description
Introduksi D3.JS, library Javascript untuk pengembangan visualisasi data berbasis WEB
Transcript of D3.JS Data-Driven Documents
D3.JSJavascript Library
Proverb:
“Sebuah gambar lebih berarti daripada
seribu kata”
Apa yang bisa disimpulkan dari dataset di bawah?
NOOOOOOO
PUSING
Bagaimana jika begini:
Seenggaknya: 'Lebih enak' dilihat dan dipandang
Bahkan:Memberikan ide lebih
Itulah kenapa dibutuhkan
VISUALISASI DATA
VISUALISASI DATA
Proses PEMETAAN DATA ke dalam bentuk
VISUAL
Visualisasi Data, menurut Ben Fry(Processing.js)
Acquire: Membaca data dari drive, file, etc...etc...
Parse: Pengelompokkan data (membuat terstruktur).
Filter: Menyaring data berdasarkan kriteria.
Mine: Melakukan perhitungan statistik/algoritmik.
Represent: Memilih model visual (bar, pie, etc...,etc...)
Refine: Dibuat lebih “menarik”
Interact: Tambahan “interaksi” (animasi) D3.JS
“POWER”
DATA DRIVEN DOCUMENTS JAVASCRIPT
(dot)
D3
D3.JS Memanfaatkan
HTML(5) JAVASCRIPT
SVG
CSS(3)
“SVG: Scalable Vector Graphics.Format gambar
vektor berbasis XML untuk grafis dua dimensi, yang
memiliki dukungan interaksi dan animasi”
(Google-translated wiki)
Huh, SVG?
HTML + SVG Ingat bahwa SVG berbasis XML, jadi untuk menambahkan elemen SVG, dapat digunakan
<TAG>Menggambar elipse
<svg width="50" height="50"><ellipse cx="25" cy="25" rx="15" ry="10" fill="red" />
</svg>
Set up Penggunaan D3.JS:
<html><meta charset="utf-8">
<head><style>
</style>
</head><body>
<script src="d3.js"></script><script></script><div
</body></html>
Elemen DOM Pembuatan elemen DOM baru.
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>D3 Test</title> <script type="text/javascript" src="d3/d3.v3.js"></script> </head> <body> <script type="text/javascript"> d3.select.(“boddy”).append(“p”).text(“Halo Dunia”); </script> </body></html>
Chaining Method Syntax yang 'berantai'
d3.select("body").append("p").text("New paragraph!");
Pemanggilan method dilakukan bersambungan dengan pemanggilan 'method' lainnya.
d3.select("body").append("p").text("New paragraph!");
START
d3.select("body").append("svg").attr("width",200).attr("weight",200).selectAll("g").data(dataset).enter().append("ellipse").attr("cx",function(d){return d;}).attr("cy",40).attr("rx",10).attr("ry",10).attr("fill","red");
Bagaimana jika 'rantai' terlalu panjang?
Chaining Method,con't Membuat 'chain-less-look', lebih mudah untuk dibaca.var svg = d3.select("body")
.append("svg")
.attr("width",200)
.attr("weight",200);var dot = svg.selectAll("g")
.data(dataset)
.enter()
.append("ellipse")
.attr("cx",function(d){return d;
}).attr("cy",40).attr("rx",10).attr("ry",10).attr("fill","red");
d3.select("body").append("svg").attr("width",200).attr("weight",200).selectAll("g").data(dataset).enter().append("ellipse").attr("cx",function(d){return d;}).attr("cy",40).attr("rx",10).attr("ry",10).attr("fill","red");
sama
Binding data Bagaimana 'mengikat' data, kemudian di-'visual'-kanvar dataset =[10,30,50,70,90];var svg = d3.select("body")
.append("svg")
.attr("width",200)
.attr("weight",200);svg.selectAll("g")
.data(dataset)
.enter()
.append("ellipse")
.attr("cx",function(d){return d;
}).attr("cy",40).attr("rx",10).attr("ry",10).attr("fill","red");
Syntax untuk mengikat data:
.data(dataset).enter()
Power of data() data() akan melakukan iterasi pada setiap nilai pada dataset, lalu akan mengeksekusi method - function(d).
.data(dataset).enter().append(“circle”).attr(“r”,function(d){retrun d;});
var dataset = [1,2,3,4,5,6,7,8,9,10];
Jika diberikan 10 data:
Akan mengiterasi setiap data
Jika diberikan: nx
Akan diiterasi sebanyak:
nx
Dasar Transisi Untuk melakukan transisi, dapat menggunakan method - transition()
var svg = d3.select("body").append("svg").attr("width",500).attr("height",200);
var dot = svg.append("circle").attr("cx","100").attr("cy","100").attr("r",20).attr("fill","red");
var transition = dot.transition().attr("cx","200").duration(2000);
duration() - lama transisi
delay() - delay transisi
D3.JS
Memanfaatkan SVGManipulasi DOMMemiliki Chaining-MethodData-driven – data()Interaksi dan animasi
Terima Kasih
