D3.JS Data-Driven Documents

50 %
50 %
Information about D3.JS Data-Driven Documents
Technology

Published on March 7, 2014

Author: caisaroentoro

Source: slideshare.net

Description

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

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: 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]; 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;}); 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() 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 SVG Manipulasi DOM Memiliki Chaining-Method Data-driven – data() Interaksi dan animasi

Terima Kasih

Add a comment

Related presentations

Related pages

D3.js - Data-Driven Documents

D3 is a JavaScript library for visualizing data with HTML, SVG, and CSS.
Read more

GitHub - d3/d3: Bring data to life with SVG, Canvas and HTML.

D3: Data-Driven Documents. D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, ...
Read more

D3.js - Wikipedia, the free encyclopedia

D3.js (or just D3 for Data-Driven Documents) ... Once a dataset is bound to a document, use of D3.js typically follows a pattern wherein an explicit ...
Read more

Data-Driven Documents (D3.js) - Docs.com

D3.js is a JavaScript library for manipulating documents based on data. ... Embed code for collection Data-Driven Documents (D3.js) Copy. Select a layout
Read more

D3.js – Data-Driven Documents | Seminare: »Data ...

Achtung: Ich erkläre mich damit einverstanden, dass alle eingegebenen Daten und meine IP-Adresse nur zum Zweck der Spamvermeidung durch das Programm ...
Read more

Visual Demonstrations and Examples of d3.js (Data Driven ...

Video: http://vimeo.com/29458354 Source: http://github.com/mbostock/d3
Read more

D3.js | Delft Students on Software Architecture: DESOSA 2016

D3.js - Data-Driven Documents. Authors: M. Dunnewind, P. Gupta, S. van Schooten and P. van der Veeken. Abstract. D3.js is a JavaScript library which ...
Read more

Data Driven Documents - tutego Homepage

Schulungsinhalte ›Data Driven Documents‹ Seminar: D3.js, SVG, raphael.js, Web GL, HTML5 Canvas, processing.js, …
Read more

Gallery · d3/d3 Wiki · GitHub

Wiki Gallery. Welcome to the D3 ... Visualizing document similarity over time ... a d3.js based library which adds a virtual pointer to the page that grows ...
Read more

D3: Data-Driven Documents - Stanford Visualization Group

... Data-Driven Documents Michael Bostock, Vadim Ogievetsky and Jeffrey Heer Fig. 1. Interactive visualizations built with D3, running inside Google Chrome.
Read more