2b:null 2c:["$","title",null,{"children":"SVG | Guilherme Ranoya | Observable"}] 31:[] 2f:{"id":"2024e650835182d5","slug":"livrojavascript-18","title":"SVG","thumbnail":"759fbbb1ec0aa86eac778b4d339335e649198094976539df7da79e9c4694df1b","access_level":"public","create_time":"$D2025-08-04T15:27:50.685Z","update_time":"$D2025-08-04T23:13:04.314Z","view_time":null,"first_public_time":"$D2025-08-04T15:27:50.685Z","fork":{"id":"f5385809a3e37a00","slug":"livrojavascript-11","title":"SVG","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024"},"version":210,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null}],"members":[{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024","role":"editor"},{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"a809548a33c31ed6","slug":"livro-javascript","title":"Livro - Javascript","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"type":"notebook","body":{"title":"SVG","cells":[{"id":0,"value":"# SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"### Dataviz: programando um gráfico de barras com SVG\n\n------\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"Iremos aqui abordar um passo-a-passo para a criação de um gráfico de barras (*chart*) em *SVG* demonstrando de forma aplicada seu processo de desenvolvimento. Iremos supor que uma pesquisa foi realizada avaliando a preferência de 4 opções de layout, e que seus resultados podem eventualmente mudar se mais pessoas forem entrevistadas. Parece mais adequado gerar o gráfico de forma programada do que construir uma imagem estática em um editor gráfico, e ter que alterá-la a cada mudança.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":12,"value":"O primeiro passo deste trabalho será criar o elemento *SVG*, ainda que vazio, para que o desenho seja construído:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":47,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":23,"value":"A primeira parte do desenho é elaborar a escala do gráfico, com linhas indicado em que nível cada opção atingiu nas entrevistas:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":121,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":130,"value":"Precisaremos também incluir um valor textual para cada ponto da escala, como é feito na abaixo na linha 33:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":133,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":128,"value":"Como na computação, o campo cartesiano em Y vai de cima para baixo, e não de baixo para cima como é utilizado normalmente na geometria, todo o sistema de coordenadas precisa ser invertido... para invertê-lo, é necessário subtrair os tamanhos do campo total. Se temos um campo de 300 pontos de altura no total, como nos gráficos acima, e temos uma barra com 50 pontos de altura para desenhar nele, ela deverá começar na coordenada 250 em Y... ou seja, o campo total subtraído do tamanho da barra.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":124,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":136,"value":"Cada voto de preferência na entrevista, ou seja, cada ponto a mais na escala, representam 10 pontos em Y no gráfico. O tamanho da barra gerada com 3 votos é de 30 pontos; o tamanho da barra gerada com 10 votos é de 100 pontos. Desta forma é possível construir geometricamente cada uma das barras. Faremos isso de uma forma estática e caso a caso no início para explicar o processo. Consideremos então que o primeiro layout teve 5 votos, o segundo layout teve 2, e o terceiro layout 11:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":140,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":144,"value":"Desenhando cada barra individualmente resolvemos o problema de forma estática, mas não simplificamos o processo se os dados mudarem, exigindo que todo o código do desenho seja alterado. Para criar isso de forma mais automática, usaremos uma *Array* com os dados de votação, e criaremos um *loop* que passará por cada um destes dados desenhando a devida barra:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":146,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":148,"value":"Os resultados desta alteração não serão diferentes visualmente do último exemplo, mas, por causa dela, se adicionarmos mais um valor ao dados, como se houvesse um layout 4 também que tivesse sido votado, o código geraria automaticamente a barra com este valor, sem que mais nada fosse modificado:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":150,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":157,"value":"Da mesma forma, os dados podem ser alterados na *Array*, e os gráficos gerados serão proporcionais à informação dada.\n\nCada barra tem 30 pontos de espessura na vertical. Elas se iniciam na coordenada 60, e se deslocam 50 pontos uma das outras. Isto é controlado no código pela variável `px` declarada na linha 39. Para incrementar o gráfico, seria interessante também colocar um label para cada coluna (L1, L2, L3 e L4), gerados automaticamente abaixo de cada barra: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":160,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":25,"value":"
\n\n### Download do SVG na forma de arquivo\n\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":28,"value":"Para que seja possível fazer o download deste *chart* como um arquivo `.svg` para que ele possa ser utilizado em um editor gráfico, incluiremos um link (tag ``), e a programação necessária para encodificá-lo como um arquivo:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":167,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":169,"value":"
\n\n### Criando as barras com dados externos\n\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":56,"value":"Os dados de uma votação, ou de qualquer registro feito, não ficam (normalmente) no código. Puxamos estes dados de bases de dados ou de arquivos online que são constantemente atualizados com eles.\n\nEm nosso caso utilizamos uma planilha do Google Docs para atualizar a votação. Ela pode ser acessada [neste link](https://docs.google.com/spreadsheets/d/1utMS_ubGKavjrTucwA8YoFAj1tz93_8YiIcol0myH14).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":171,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":177,"value":"Iremos agora utilizar os dados da planilha para plotar a visualização.\n\nAlgumas alterações são necessárias na arquitetura do código, uma vez que só será possível gerar os elementos do *SVG* depois que os dados forem obtidos do documento externo.\n\nPrimeiro será necessário incluir a biblioteca `datat` que contém os recursos para lidar com dados tabulares. Com ela incluída, utilizaremos a *função* `gsdata()` que carrega dados de uma planilha do Google, e processa um código utilizando os dados. Este código é exatamente o código que utilizamos anteriormente, apenas entendendo que os dados dos votos não serão mais `dados[d]` mas `dados[d].Votos`, e os labels serão `dados[d].Layout`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":197,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":200,"value":"As visualizações de dados costumam ser bem mais complexas do que isso, e utilizando bases de dados também mais complexas. Mas este é o princípio elementar pelo qual um gráfico (*chart*) é gerando no formato vetorial (*SVG*), de forma que possa ser aproveitado em editores gráficos, e que as informações apresentadas possam ser atualizadas sem que seja necessário refazer o código.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":91,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"