Your SlideShare is downloading. ×
0
D3.JS
ibrary
script L
Java
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: Pengelompokka...
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 dukung...
HTML + SVG
Ingat bahwa SVG berbasis XML, jadi untuk
menambahkan elemen SVG, dapat digunakan

<TAG>
Menggambar elipse

<svg...
Set up
Penggunaan D3.JS:
<html>
<meta charset="utf-8">
<head>
<style>
</style>
</head>
<body>
<script src="d3.js"></script...
Elemen DOM
Pembuatan elemen DOM baru.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title...
Chaining Method
Syntax yang 'berantai'
d3.select("body").append("p").text("New paragraph!");

Pemanggilan method dilakukan...
Chaining Method,con't
Membuat 'chain-less-look', lebih mudah untuk dibaca.
var svg = d3.select("body")
.append("svg")
.att...
Binding data
Bagaimana 'mengikat' data, kemudian di-'visual'-kan
var dataset =[10,30,50,70,90];
var svg = d3.select("body"...
Power of data()
data() akan melakukan iterasi pada setiap nilai pada
dataset, lalu akan mengeksekusi method - function(d)....
Dasar Transisi
Untuk melakukan transisi, dapat menggunakan method transition()
var svg = d3.select("body")
.append("svg")
...
D3.JS
Memanfaatkan SVG
Manipulasi DOM
Memiliki Chaining-Method
Data-driven – data()
Interaksi dan animasi
Terima Kasih
Upcoming SlideShare
Loading in...5
×

D3.JS Data-Driven Documents

1,229

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,229
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "D3.JS Data-Driven Documents"

  1. 1. D3.JS ibrary script L Java
  2. 2. Proverb: “Sebuah gambar lebih berarti daripada seribu kata”
  3. 3. Apa yang bisa disimpulkan dari dataset di bawah?
  4. 4. NOOOOOOO PUSING
  5. 5. Bagaimana jika begini:
  6. 6. Seenggaknya: 'Lebih enak' dilihat dan dipandang Bahkan: Memberikan ide lebih
  7. 7. Itulah kenapa dibutuhkan VISUALISASI DATA
  8. 8. VISUALISASI DATA Proses PEMETAAN DATA ke dalam bentuk VISUAL
  9. 9. 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”
  10. 10. D3 DATA DRIVEN DOCUMENTS (dot) JAVASCRIPT
  11. 11. D3.JS Memanfaatkan HTML(5) JAVASCRIPT CSS(3) SVG
  12. 12. Huh, SVG? “SVG: Scalable Vector Graphics.Format gambar vektor berbasis XML untuk grafis dua dimensi, yang memiliki dukungan interaksi dan animasi” (Google-translated wiki)
  13. 13. 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>
  14. 14. 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>
  15. 15. 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>
  16. 16. 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");
  17. 17. 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");
  18. 18. Binding data Bagaimana 'mengikat' data, kemudian di-'visual'-kan var 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()
  19. 19. 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
  20. 20. 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
  21. 21. D3.JS Memanfaatkan SVG Manipulasi DOM Memiliki Chaining-Method Data-driven – data() Interaksi dan animasi
  22. 22. Terima Kasih
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×