30:[] 2e:{"title":"SVG Arc Slice View","cells":[{"id":0,"value":"# SVG Arc Slice View","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":333,"value":"

${graficoatividades}

","pinned":false,"hidden":false,"mode":"md"},{"id":285,"value":"graficoatividades = svgpiechart(titulos, 400)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":405,"value":"","pinned":false,"hidden":false,"mode":"html"},{"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"},{"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"},{"id":520,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":548,"value":"Função `svgpiechart(dados,tamanho)` constroi o código `

","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":18,"value":"

\n ${testeA}\n

","pinned":true,"hidden":false,"mode":"md"},{"id":16,"value":"testeA = `` +\n svgpiechart(dados, 520)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}