Sumário

1 Motivação 2 Recapitulando 3 JavaScript 4 Como o D3 funciona 5 Exemplos

JavaScript

Apesar do nome, nenhuma relação com Java

Permite manipulação dinâmica do DOM, portanto, de uma página Web Exemplo: <script type="text/javascript"> var w = 700; var h = 400; var padding = 35; var dataset; var svg = d3.select("body").append("svg") .attr("width", w) .attr("height", h) .append("g"); </script>

JavaScript

Apesar do nome, nenhuma relação com Java

Permite manipulação dinâmica do DOM, portanto, de uma página Web Exemplo: <script type="text/javascript"> var w = 700; var h = 400; var padding = 35; var dataset; var svg = d3.select("body").append("svg") .attr("width", w) .attr("height", h) .append("g"); </script>

JavaScript

Apesar do nome, nenhuma relação com Java

Permite manipulação dinâmica do DOM, portanto, de uma página Web Exemplo: <script type="text/javascript"> var w = 700; var h = 400; var padding = 35; var dataset; var svg = d3.select("body").append("svg") .attr("width", w) .attr("height", h) .append("g"); </script>

JavaScript

Algumas observações: Orientada a Objetos

Principais componentes lógicos: vetores e objetos Não cria threads, apenas processamento assíncrono

JavaScript

Algumas observações: Orientada a Objetos

Principais componentes lógicos: vetores e objetos

JavaScript

Algumas observações: Orientada a Objetos

Principais componentes lógicos: vetores e objetos Não cria threads, apenas processamento assíncrono

Frameworks

Assim como qualquer linguagem, existem frameworks com métodos prontos que ajudam, na maioria das vezes, na otimização e implementação do seu programa

Exemplos:

jQuery.js - Muitas funcionalidades de interface, várias outros plugins usam jQuery

numeric.js - Matemático d3.js - Visualização de dados crooslter.js - Agragação de dados leaet.js - Mapas

Frameworks

Assim como qualquer linguagem, existem frameworks com métodos prontos que ajudam, na maioria das vezes, na otimização e implementação do seu programa

Exemplos:

jQuery.js - Muitas funcionalidades de interface, várias outros plugins usam jQuery

numeric.js - Matemático d3.js - Visualização de dados crooslter.js - Agragação de dados leaet.js - Mapas

D3

D3 é uma ferramenta que permite a criação de grácos (dos mais variados) e a sua associação dinâmica com dados. O elemento HTML mais usado internamente no D3 se chama Scalable Vector Graphics (SVG)

SVG permite o desenho vetorial de qualquer objeto possível

Elementos: path rect circle line marker etc

Além disso, D3 possui outras funcionalidades interessantes como uma eciente implementação de molas e colisão de partículas

D3

D3 é uma ferramenta que permite a criação de grácos (dos mais variados) e a sua associação dinâmica com dados. O elemento HTML mais usado internamente no D3 se chama Scalable Vector Graphics (SVG)

SVG permite o desenho vetorial de qualquer objeto possível Elementos: path rect circle line marker etc

Além disso, D3 possui outras funcionalidades interessantes como uma eciente implementação de molas e colisão de partículas

D3

D3 é uma ferramenta que permite a criação de grácos (dos mais variados) e a sua associação dinâmica com dados. O elemento HTML mais usado internamente no D3 se chama Scalable Vector Graphics (SVG)

SVG permite o desenho vetorial de qualquer objeto possível Elementos: path rect circle line marker etc

Sumário

1 Motivação 2 Recapitulando 3 JavaScript 4 Como o D3 funciona 5 Exemplos

Introdução a D3

D3 possui muitas funções interessantes e otimizadas como: quadritrees

construção e manipulação de grafos colisão de partículas

Porém, o uso mais comum de D3 envolve visualização de grácos na Web Em geral, as funções relacionadas a construção e manipulação de grácos implementadas em D3 nada mais são simplicações do uso direto em JavaScript

Introdução a D3

D3 possui muitas funções interessantes e otimizadas como: quadritrees

construção e manipulação de grafos colisão de partículas

Porém, o uso mais comum de D3 envolve visualização de grácos na Web

Em geral, as funções relacionadas a construção e manipulação de grácos implementadas em D3 nada mais são simplicações do uso direto em JavaScript

Introdução a D3

D3 possui muitas funções interessantes e otimizadas como: quadritrees

construção e manipulação de grafos colisão de partículas

Porém, o uso mais comum de D3 envolve visualização de grácos na Web Em geral, as funções relacionadas a construção e manipulação de grácos implementadas em D3 nada mais são simplicações do uso direto em JavaScript

Introdução a D3

Selection: função responsável em identicar e obter elemento(s) no DOM // JavaScript

var paragraphs = document.getElementsByTagName("p"); for (var i = 0; i < paragraphs.length; i++) {

var paragraph = paragraphs.item(i);

paragraph.style.setProperty("color", "white", null); }

// D3

d3.selectAll("p").style("color", "white"); }

No entanto, é preferível, em alguns casos, usar o próprio JavaScript ao invés de D3

Introdução a D3

Selection: função responsável em identicar e obter elemento(s) no DOM // JavaScript

var paragraphs = document.getElementsByTagName("p"); for (var i = 0; i < paragraphs.length; i++) {

var paragraph = paragraphs.item(i);

paragraph.style.setProperty("color", "white", null); }

// D3

d3.selectAll("p").style("color", "white"); }

Introdução a D3

D3 vincula dados dinamicamente ao DOM, criando e modicando elementos HTML. As três operações bases do D3 são:

Enter: adiciona elementos no DOM d3.select("body").selectAll("p")

.data([4, 8, 15, 16, 23, 42]) .enter().append("p")

.text(function(d) { return "I'm number " + d + "!"; }); Update: modica elementos no DOM

d3.select("body").selectAll("p") .data([-4, -8, -15, -16, -23, -42])

.text(function(d) { return "I'm number " + d + "!"; }); Exit: remove elementos no DOM

d3.select("body").selectAll("p")

Introdução a D3

Alterações no DOM é o reexo de alterações dinâmicas na página Web Enter: <body> // dataset = [1, 2]; <p>1</p> <p>2</p> </body> Update: <body> // dataset = [1, -2]; <p>1</p> <p>-2</p> </body> Exit: <body> // dataset = [1]; <p>1</p>

Introdução a D3

Transiction: função responsável por modicar elemento(s) no DOM ao longo do tempo (animação)

Lembrando

Páginas Web dispõem de apenas uma única thread

JavaScript é baseado em eventos

Funções assíncronas

setTimeout(function, milliseconds) - Executa a função uma única vez setInterval(function, milliseconds) - Executa a função repetidas vezes a cada intervalo

!

Por possuir apenas umas thread, a página escalona as funções assíncronas, dando a impressão de paralelismo

Introdução a D3

Transiction: função responsável por modicar elemento(s) no DOM ao longo do tempo (animação)

Lembrando

Páginas Web dispõem de apenas uma única thread JavaScript é baseado em eventos

Funções assíncronas

setTimeout(function, milliseconds) - Executa a função uma única vez setInterval(function, milliseconds) - Executa a função repetidas vezes a cada intervalo

!

Por possuir apenas umas thread, a página escalona as funções assíncronas, dando a impressão de paralelismo

Introdução a D3

Transiction: função responsável por modicar elemento(s) no DOM ao longo do tempo (animação)

Lembrando

Páginas Web dispõem de apenas uma única thread JavaScript é baseado em eventos

Funções assíncronas

setTimeout(function, milliseconds) - Executa a função uma única vez setInterval(function, milliseconds) - Executa a função repetidas vezes a cada intervalo

!

Por possuir apenas umas thread, a página escalona as funções assíncronas, dando a impressão de paralelismo

Introdução a D3

Transiction: função responsável por modicar elemento(s) no DOM ao longo do tempo (animação)

Lembrando

Páginas Web dispõem de apenas uma única thread JavaScript é baseado em eventos

Funções assíncronas

setTimeout(function, milliseconds) - Executa a função uma única vez setInterval(function, milliseconds) - Executa a função repetidas vezes a cada intervalo

!

Introdução a D3

Exemplo: criando circulos

var dataset = [{"id": 0, "x": 20, "y": 20, "label": "icmc"}]; var canvas = d3.select("body")

.append("div") .append("svg") .attr("width", width + "px") .attr("height", height + "px"); canvas.selectAll("circle").data(dataset) .enter() .append("circle")

.attr("id", function(d) {return d.id;}) .attr("cx", function(d) {return d.x;}) .attr("cy", function(d) {return d.y;}) .attr("r", radius)

Introdução a D3

Exemplo: criando circulos

Introdução a D3

Exemplo: modicando atributos do elemento suavemente

Timers no D3

A função transition() implementa setTimeout()

canvas.selectAll("circle").data(dataset) .transition()

.delay(500) .duration(500)

.attr("cx", function(d) {return d.x;}) .attr("cy", function(d) {return d.y;});

Introdução a D3

Exemplo: modicando atributos do elemento suavemente

Timers no D3

A função transition() implementa setTimeout() canvas.selectAll("circle").data(dataset)

.transition() .delay(500) .duration(500)

.attr("cx", function(d) {return d.x;}) .attr("cy", function(d) {return d.y;});

Introdução a D3

Timers no D3

d3.ease(type[, arguments. . . ]) informa qual o método de interpolação usado na transição:

linear - the identity function, t

poly(k) - raises t to the specied power k (e.g., 3) quad - equivalent to poly(2)

cubic - equivalent to poly(3)

sin - applies the trigonometric function sin exp - raises 2 to a power based on t circle - the quarter circle

elastic(a, p) - simulates an elastic band; may extend slightly beyond 0 and 1 back(s) - simulates backing into a parking space

bounce - simulates a bouncy collision

Sumário

1 Motivação 2 Recapitulando 3 JavaScript 4 Como o D3 funciona 5 Exemplos

file:///D:/Codes/D3/circleUpdate.html http://blog.visual.ly/

The End

The End

No documento Data-Driven Documents (páginas 23-55)