2a:null 2b:["$","title",null,{"children":"Criando as marcas a partir de dados | nazareno | Observable"}] 30:[] 2e:{"id":"240749716db6f87b","slug":"criando-algo-com-d3","title":"Criando as marcas a partir de dados","thumbnail":"2d2484f6aebe0117243a5ff5a5ad353aac0fb74abda50c54347976953b89896d","access_level":"public","create_time":"$D2020-09-13T20:53:40.976Z","update_time":"$D2020-09-14T13:52:42.998Z","view_time":null,"first_public_time":"$D2020-09-14T13:38:14.942Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"ae10740cf3156280","login":"nazareno","name":"nazareno","avatar_url":"https://avatars-next.observableusercontent.com/34fa5a0508d5de9838d59ff60b81f4badc7d57bd06b438e4891938fd223be2da","tier":"starter_2024"},"version":223,"publish_version":223,"role":null,"authored":false,"authors":[{"type":"individual","id":"84b22fbcd721be76","login":"nazareno","name":"nazareno","avatar_url":"https://avatars-next.observableusercontent.com/34fa5a0508d5de9838d59ff60b81f4badc7d57bd06b438e4891938fd223be2da","tier":null}],"members":[{"type":"individual","id":"84b22fbcd721be76","login":"nazareno","name":"nazareno","avatar_url":"https://avatars-next.observableusercontent.com/34fa5a0508d5de9838d59ff60b81f4badc7d57bd06b438e4891938fd223be2da","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"84e298c833fa737d","slug":"visualizacao-com-d3","title":"Visualização com D3: Intro e dados tabulares","owner":{"id":"ae10740cf3156280","login":"nazareno","name":"nazareno"}},"type":"notebook","body":{"titling":"auto","title":"Criando as marcas a partir de dados","cells":[{"id":0,"value":"md`# Criando as marcas a partir de dados\n\nEsse notebook explora como usar seleções D3 para ligar dados ao SVG e gerar elementos a partir desses dados. Ou seja, para desenhar a partir de dados. \n\n## Alterando os elementos de uma seleção \n\nNo notebook anterior, vimos como alterar os atributos de uma seleção. Podemos também adicionar um elemento a uma seleção com um *selection.append(). Execute o código na próxima célula com d3 algumas vezes para ver isso acontecendo. *`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3.select(\"#vis1\")\n .append(\"circle\")\n .attr(\"fill\", \"salmon\")\n .attr(\"stroke\", \"black\")\n .attr(\"fill-opacity\", .3)\n .attr(\"r\", 30)\n .attr(\"cx\", 40 + 30 * Math.random())\n .attr(\"cy\", 40 + 30 * Math.random());","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"md`#### Alterando vários elementos com select + selectAll\nJá já será muito útil podermos selecionar todos os círculos que estão dentro de um SVG ou de um grupo. A forma como faremos dentro de D3 é com uma seleção dentro da outra, assim (descomente e rode): `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"// d3.select(\"#vis1\")\n// .selectAll(\"circle\")\n// .attr(\"fill\", \"cyan\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"md`Repare que para mudar todos os pontos é preciso que a 2a seleção seja um *selectAll*. É um erro comum usar um select aí e ficar sem entender porque os pontos não estão mudando. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`## Sobre os dados\n\nOs dados depois de carregados em javascript estarão normalmente em um de 2 formatos: \n\n**1. Como um array de valores atômicos:** (geralmente em exemplos)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"dados1 = [40, 80, 96, 76, 23, 42, 32, 90, 11, 22, 14];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`**2. Como um array de objetos**, principalmente quando forem dados tabulares. Clique no triângulo preto junto de *Array* no resultado da célula pra inspecionar os dados.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"dados2 = [ // essa é uma lista de objetos json\n {'letra': 'A', 'valor': 12},\n {'letra': 'B', 'valor': 53},\n {'letra': 'C', 'valor': 62},\n {'letra': 'D', 'valor': 40},\n {'letra': 'E', 'valor': 35},\n {'letra': 'F', 'valor': 11},\n {'letra': 'G', 'valor': 22}\n ];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`Em notebooks futuros veremos como carregamos esses dados. Por enquanto vamos usar esses dois exemplos escritos direto no notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`## Adicionando elementos a partir de dados: *selection.data()* e *selection.join()*\n\nO join é um dos conceitos centrais em d3: \n\n*essa é a maneira pela qual a biblioteca cria para você um mapeamento entre elementos dos dados e elementos geométricos (marcas) na visualização*. \n\nO fluxo é o seguinte: você \n1. seleciona os elementos da visualização que quer mapear nos dados, \n1. informa os dados, \n1. faz um *selection.join()*, e\n1. informa ao d3 como mapear dados nas marcas e canais das marcas\n\nA ideia é simples, mas tem um pulo do gato: antes de desenharmos as marcas nós não temos nenhuma marca. O SVG começa vazio. D3 resolve isso permitindo com que você *opere em uma seleção vazia*. Assim, no início de tudo, no passo 1 do fluxo acima você informará um seletor que define o conjunto das marcas que usará, *mas que inicialmente será vazio*.\n\nNa prática, começando com um SVG vazio:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`Antes de descomentar e rodar a célula abaixo, veja que *select(\"#vis2\")* criará uma seleção com um elemento, mas *selectAll(\"circle\")* não encontrará elementos. \n\nO resultado desse selectAll *será uma seleção vazia*. Essa seleção é útil porque aí nós em seguida dizemos que esse conjunto de círculos que agora não tem nada deve passar a ter um elemento para cada item nos dados. Isso é feito informando os dados (*selection.data()*) e dizendo o que queremos fazer com os dados (*selection.join()*). Com isso d3 criará um círculo para cada item que não existe na visualização ainda. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"// d3.select(\"#vis2\")\n// .selectAll(\"circle\")\n// .data(dados1)\n// .join(\"circle\")\n// .attr(\"cx\", d => d * 5)\n// .attr(\"cy\", 50)\n// .attr(\"r\", 7)\n// .attr(\"fill\", \"steelblue\")\n// .attr(\"fill-opacity\", .7);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"md`Outra parte importante: nas chamadas a *attr* estamos informando ao d3 como usar os canais de percepção do círculo, possivelmente a partir dos dados. Por exemplo, o tom e o raio dos pontos não está decidido partir dos dados. Mas o *cx* dos pontos está.\n\nA sintaxe d => d*5 informa *uma função* que d3 deve usar para calcular o *cx* de cada círculo. Leia de novo: estamos passando uma função para que d3 use nos nossos dados. Essa função diz como o cx de cada círculo (que é em píxels) será calculado a partir de cada valor nos dados.\n\n#### Faça você\nMude a visualização para que o tamanho dos pontos também seja proporcional ao valor nos dados. Melhor ainda, faça com que a área (e não o raio) dos círculos seja proporcional ao valor. O canal de área é o que geralmente nós interpretamos quando vemos pontos de diferentes tamanhos.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"md`## Quando os dados são objetos\n\nA maior parte do tempo os dados não serão arrays simples; serão arrays de objetos. Para usar as propriedades desses objetos, usaremos algo como *d => d.propriedade*. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"{ \n d3.select(\"#vis3\")\n .selectAll(\"circle\")\n .data(dados2)\n .join(\"circle\")\n .attr(\"cx\", d => d.valor * 5) // também poderia ser d => d['valor'] * 5\n .attr(\"cy\", 40)\n .attr(\"r\", 7)\n .attr(\"fill\", \"steelblue\")\n .attr(\"fill-opacity\", .7);\n\n d3.select(\"#vis3\")\n .selectAll(\"text\")\n .data(dados2)\n .join(\"text\")\n .attr(\"x\", d => d.valor * 5 + 5) // +5 -> mais à direita\n .attr(\"y\", 40 + 14) // + 14 -> mais pra baixo\n .attr(\"font-size\", 12)\n .attr(\"fill\", \"steelblue\")\n .text(d => d.letra); // o conteúdo de texto não é um atributo, é o valor do elemento.\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md`Repare que pode ser *x => x.valor* ou qualquer outra letra: estamos definindo uma função que recebe um *d* (ou *x*). Essa função é chamada pelo D3 para cada elemento dos dados (ou seja, cada objeto).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"html`

Apêndice

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 2f:"$2e:body"