2b:null 2c:["$","title",null,{"children":"Visualização com HTML e SVG como marcas: a ideia geral | nazareno | Observable"}] 31:[] 2f:{"id":"d638e4fb94f3bb90","slug":"visualizacao-com-html-e-svg-como-marcas-a-ideia-geral","title":"Visualização com HTML e SVG como marcas: a ideia geral","thumbnail":"27a2a631847043a9354b7e511d7741ca89e209adbaeb3e44b46be7763cf0ac55","access_level":"public","create_time":"$D2020-09-11T22:59:30.862Z","update_time":"$D2020-09-14T13:37:57.777Z","view_time":null,"first_public_time":"$D2020-09-12T00:47:35.511Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ae10740cf3156280","login":"nazareno","name":"nazareno","avatar_url":"https://avatars-next.observableusercontent.com/34fa5a0508d5de9838d59ff60b81f4badc7d57bd06b438e4891938fd223be2da","tier":"starter_2024"},"version":176,"publish_version":176,"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":2,"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":"Visualização com HTML e SVG como marcas: a ideia geral","cells":[{"id":0,"value":"md`# Visualização com HTML e SVG como marcas: a ideia geral\n\nEsse notebook explora a criação manual de algumas visualizações em html. Espero que você nunca precise criar visualizações como essas na prática, mas entendê-las ajudará muito você a criar coisas semelhantes programaticamente. \n\n## Usando apenas html e css\n\nEsse é um exemplo utilizando CSS e HTML puro para construir gráficos de barras. Para realizar essa tarefa, utilizamos *divs* que são estilizadas com a propriedade *width* para definir quantos píxels cada barra terá. Não precisamos se preocupar com a altura da barra nesse momento; o html já irá inferir um tamanho padrão pelos números que colocamos dentro de cada div.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"html`\nO mais interessante desse exemplo é notar que estamos traduzindo o atributo que queremos representar nos dados para uma quantidade de pixels que será a largura da barra. Se quiséssemos fazer um gráfico menos largo, poderíamos fazer algo assim, ainda representando corretamente os dados.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`Embora essa abordagem seja útil pedagogicamente, ela não é muito útil na prática porque o *divs* só podem ser retangulares. Assim as marcas que podemos usar ficam muito limitadas. Para desenhar formas mais interessantes precisamos de mais primitivas, que nos permitam desenhar círculos, linhas, etc. O padrão em HTML para fazer isso é usando elementos SVG.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`## Usando SVG\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`SVG é uma maneira de desenhar gráficos vetoriais em HTML. Os principais elementos são *rect*, *circle*, *polyline*, *polygon*, *path* e *ellipse*, além do *g*, que é um grupo de elementos que explicamos jajá. Cada elemento tem os atributos que usa para desenhar. Por exemplo: `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"md`O *g* é útil quando queremos tratar um grupo de elementos como uma unidade. Por exemplo, tendo um *g* pai de um conjunto de *rects*, podemos atribuir um atributo (incluindo estilo CSS) ao pai e todos os *rect* filhos desse *g* herdarão esse atributo. É meio como o *div* em HTML. Mas cuidado: um fillho só herda atributos que o elemento pai tem. E elementos *g* [têm por exemplo um atributo fill](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g), mas não têm atributo width ou height.\n\nUsando um *g* para ilustrar:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md`Com círculos:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"md`Um polígono`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"md`Claro, dá para juntar CSS e SVG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`A ideia de visualizar dados na web então é usar elementos de SVG como marcas geométricas. D3 é uma biblioteca que facilita a criação e manipulação dessas marcas a partir de dados.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md`## Extra: Mais exemplos de SVG\n\nTirados da [documentação de formas básicas com SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes) da mozilla.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 30:"$2f:body"