2d:null 2e:["$","title",null,{"children":"SVG Arc Slice View | Guilherme Ranoya | Observable"}] 33:[] 31:{"id":"aa715e191e5717fa","slug":"svg-arc-slice-view","title":"SVG Arc Slice View","thumbnail":"bebe1e3dacfa18fda4689ab761679722327e42530a6a334f9071dce21ced9502","access_level":"public","create_time":"$D2021-07-08T19:49:12.717Z","update_time":"$D2024-06-04T20:53:31.324Z","view_time":null,"first_public_time":"$D2021-07-09T16:24:04.683Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024"},"version":620,"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":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null,"role":"editor"},{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"1f93dabbc64393d6","slug":"dataviz","title":"Dataviz","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"type":"notebook","body":{"title":"SVG Arc Slice View","cells":[{"id":0,"value":"# SVG Arc Slice View","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"## Código para construção de visualização de dados no formato de PieChart em SVG\n\nO exemplo abaixo utiliza dados retirados diretamente de um banco de dados, contidos em um objeto `json` chamado `graficoatividades`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"

${graficoatividades}

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"graficoatividades = svgpiechart(titulos, 400)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"titulos = ({\n nome1: [68, 120, 0, 24, \"#22ccff\", \"info 1\", 30],\n nome2: [68, 120, 25, 40, \"#22ddff\", \"info 2\", 30],\n nome3: [68, 120, 66, 30, \"#33ddff\", \"info 3\", 30],\n nome4: [68, 120, 110, 50, \"#33eeff\", \"info4\", 30],\n teste1: [130, 220, -20, 30, \"#bbFFFF\", \"acentuação\", 10],\n teste2: [140, 225, 10.5, 15, \"#d5FFFF\", \"funciona aqui\", 10],\n teste3: [150, 230, 26, 15, \"#ddFFFF\", \"mais testes\", 10],\n Roxo1: [10, 65, -90, 120, \"#8888DD\", \"Base 1\", -5],\n Roxo2: [10, 65, 30, 120, \"#888899\", \"Base 2\", -5],\n Roxo3: [10, 65, 150, 120, \"#888855\", \"Base 3\", -5],\n nome5: [90, 140, 190, 130, \"#FF337755\", \"Transparente\", 20]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"lista = function (url) {\n let dados = fetch(url).then((response) => {\n return response.json();\n });\n\n return dados;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"## Funções de construção\n\n

\nFunção `coord(raio,angulo)` calcula a posição em coordenadas cartesianas de valores polares\n\n```js\nponto = coord(120,45);\n```\n\nCalcula as coordenadas x e y de um ponto com raio 120 e ângulo 45.\n\nRetorna os valores como `objeto.x` e `objeto.y`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"coord = function (raio, anguloemgraus) {\n var anguloradianos = (anguloemgraus * Math.PI) / 180.0;\n\n return {\n x: raio * Math.cos(anguloradianos),\n y: raio * Math.sin(anguloradianos)\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"Função `arcslice(raioMenor,raioMaior,AnguloInicial,DimensãoDoArco,nome,cor)` desenha uma secção de circunferência.\n\n```js\nsvgpath = arcslice(40,100,45,90,\"arco1\",\"#FF0000\");\n```\n\nDesenha uma secção de arco de raio menor 40, raio maior 100, iniciando em 45 graus com 90 graus de dimensão, com nome \"arco1\" e cor vermelha.\n\nA função retorna o trecho de código SVG que deve ser inserido dentro da tag `

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"Função `arctext(raioMaior, AnguloInicial, DimensaoDoArco, texto, DistanciaDoArco)` posiciona os labels de cada secção no desenho.\n\n```js\nsvgpath2 = arctext(40,100,45,90,\"Label do Arco\", 20);\n```\n\nPosiciona o label do arco a uma distância de 20 pontos do ponto central da secção, com o texto \"Label do Arco\"\n\nA função retorna o trecho de código SVG que deve ser inserido dentro da tag `

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"Função `svgpiechart(dados,tamanho)` constroi o código `

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"Dados para teste de construção, criados manualmente.\n\nO objeto `json` segue a seguinte estrutura:\n\n```json\n[\n { \"nomedoobjeto1\": [RaioMenor,RaioMaior,AnguloInicial,AnguloFinal,Cor,Label,LabelDistancia]\n },\n { \"nomedoobjeto2\": [RaioMenor,RaioMaior,AnguloInicial,AnguloFinal,Cor,Label,LabelDistancia]\n }\n]\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"dados = ({\n nome1: [40, 73, 0, 24, \"#22ccff\", \"informação 1\", 30],\n nome2: [40, 73, 25, 40, \"#22ddff\", \"texto complementar\", 30],\n nome3: [40, 73, 66, 30, \"#33ddff\", \"qualquer dado\", 30],\n nome4: [40, 73, 110, 50, \"#33eeff\", \"testes múltiplos\", 30],\n teste1: [85, 220, -20, 30, \"#bbFFFF\", \"acentuação\", 10],\n teste2: [90, 225, 10.5, 15, \"#d5FFFF\", \"funciona aqui\", 10],\n teste3: [95, 230, 26, 15, \"#ddFFFF\", \"mais testes\", 10],\n Roxo1: [0, 55, -90, 120, \"#3300DD\", \"Base 1\", -5],\n Roxo2: [0, 55, 30, 120, \"#332299\", \"Base 2\", -5],\n Roxo3: [0, 55, 150, 120, \"#4311ff\", \"Base 3\", -5],\n nome5: [35, 73, 190, 130, \"#FF337755\", \"Transparente\", 20]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"

\n ${testeA}\n

","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"testeA = `` +\n svgpiechart(dados, 520)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"