d3.js data-driven documents

22
D3.JS Javascript Library

Upload: caisar-oentoro

Post on 11-Nov-2014

669 views

Category:

Technology


1 download

DESCRIPTION

Introduksi D3.JS, library Javascript untuk pengembangan visualisasi data berbasis WEB

TRANSCRIPT

Page 1: D3.JS Data-Driven Documents

D3.JSJavascript Library

Page 2: D3.JS Data-Driven Documents

Proverb:

“Sebuah gambar lebih berarti daripada

seribu kata”

Page 3: D3.JS Data-Driven Documents

Apa yang bisa disimpulkan dari dataset di bawah?

Page 4: D3.JS Data-Driven Documents

NOOOOOOO

PUSING

Page 5: D3.JS Data-Driven Documents

Bagaimana jika begini:

Page 6: D3.JS Data-Driven Documents

Seenggaknya: 'Lebih enak' dilihat dan dipandang

Bahkan:Memberikan ide lebih

Page 7: D3.JS Data-Driven Documents

Itulah kenapa dibutuhkan

VISUALISASI DATA

Page 8: D3.JS Data-Driven Documents

VISUALISASI DATA

Proses PEMETAAN DATA ke dalam bentuk

VISUAL

Page 9: D3.JS Data-Driven Documents

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”

Page 10: D3.JS Data-Driven Documents

DATA DRIVEN DOCUMENTS JAVASCRIPT

(dot)

D3

Page 11: D3.JS Data-Driven Documents

D3.JS Memanfaatkan

HTML(5) JAVASCRIPT

SVG

CSS(3)

Page 12: D3.JS Data-Driven Documents

“SVG: Scalable Vector Graphics.Format gambar

vektor berbasis XML untuk grafis dua dimensi, yang

memiliki dukungan interaksi dan animasi”

(Google-translated wiki)

Huh, SVG?

Page 13: D3.JS Data-Driven Documents

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>

Page 14: D3.JS Data-Driven Documents

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>

Page 15: D3.JS Data-Driven Documents

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>

Page 16: D3.JS Data-Driven Documents

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?

Page 17: D3.JS Data-Driven Documents

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

Page 18: D3.JS Data-Driven Documents

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()

Page 19: D3.JS Data-Driven Documents

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

Page 20: D3.JS Data-Driven Documents

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

Page 21: D3.JS Data-Driven Documents

D3.JS

Memanfaatkan SVGManipulasi DOMMemiliki Chaining-MethodData-driven – data()Interaksi dan animasi

Page 22: D3.JS Data-Driven Documents

Terima Kasih