D3.JS Data-Driven Documents

Proverb:
“Sebuah gambar lebih berarti daripada
seribu kata”

Apa yang bisa disimpulkan dari dataset di bawah?

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”
D3.JS
(animasi)
“POWER”

D3
DATA
DRIVEN
DOCUMENTS (dot)
JAVASCRIPT

D3.JS Memanfaatkan

HTML(5)
JAVASCRIPT
CSS(3)

SVG

Huh, SVG?

“SVG: Scalable Vector
Graphics.Format gambar
vektor berbasis XML untuk
grafis dua dimensi, yang
memiliki dukungan interaksi dan
animasi”
(Google-translated wiki)

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.
START
d3.select("body").append("p").text("New paragraph!");

Bagaimana jika 'rantai' terlalu panjang?
d3.select("body").append("svg").attr("width",200).attr("weight",20
0).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");

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");

sama

d3.select("body").append("svg").attr("width",200).attr("weight",20
0).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");

Binding data
Bagaimana 'mengikat' data, kemudian di-'visual'-kan
var dataset =[10,30,50,70,90];
.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)

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;});

Jika diberikan 10 data:
var dataset = [1,2,3,4,5,6,7,8,9,10];

Akan mengiterasi setiap data
Jika diberikan:
Akan diiterasi
sebanyak:

n

x

n

x

Dasar Transisi
Untuk melakukan transisi, dapat menggunakan method transition()
.append("svg")
.attr("width",500)
.attr("height",200);
var dot = svg.append("circle")
.attr("cx","100")
.attr("cy","100")
.attr("r",20)
var transition = dot.transition()
.attr("cx","200")
.duration(2000);

duration() - lama transisi
delay() - delay transisi

D3.JS
Memanfaatkan SVG
Manipulasi DOM
Memiliki Chaining-Method
Data-driven – data()
Interaksi dan animasi

D3.JS Data-Driven Documents

More Related Content

Recently uploaded (9)

Featured (20)

D3.JS Data-Driven Documents