D3.JS Data-Driven Documents

1,693 views
1,522 views

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,693
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
29
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

×