Interaction Designer, Creative Technologist, Professor and Researcher
Public
Edited
Jun 4, 2024
Importers
2 stars
Also listed in…
Creative Coding
graficoatividades = svgpiechart(titulos, 400)
titulos = ({
nome1: [68, 120, 0, 24, "#22ccff", "info 1", 30],
nome2: [68, 120, 25, 40, "#22ddff", "info 2", 30],
nome3: [68, 120, 66, 30, "#33ddff", "info 3", 30],
nome4: [68, 120, 110, 50, "#33eeff", "info4", 30],
teste1: [130, 220, -20, 30, "#bbFFFF", "acentuação", 10],
teste2: [140, 225, 10.5, 15, "#d5FFFF", "funciona aqui", 10],
teste3: [150, 230, 26, 15, "#ddFFFF", "mais testes", 10],
Roxo1: [10, 65, -90, 120, "#8888DD", "Base 1", -5],
Roxo2: [10, 65, 30, 120, "#888899", "Base 2", -5],
Roxo3: [10, 65, 150, 120, "#888855", "Base 3", -5],
nome5: [90, 140, 190, 130, "#FF337755", "Transparente", 20]
})
coord = function (raio, anguloemgraus) {
var anguloradianos = (anguloemgraus * Math.PI) / 180.0;
return {
x: raio * Math.cos(anguloradianos),
y: raio * Math.sin(anguloradianos)
};
}
arcslice = function (rS, rB, sA, eA, maskname, cor) {
var ponto1 = { x: 0, y: 0 };
var ponto2 = coord(rB * 2, 0);
var ponto3 = coord(rB * 2, eA);
var controlpoint34 = coord(rB * 2, eA / 2);
var ponto4 = { x: 0, y: 0 };
var rectP1 = { x: -1 * rB, y: -1 * rB };
var rectP2 = { x: rB, y: rB };
var rectWidth = rectP2.x * 2;
var svgpath = `<g transform="rotate(${sA})"><mask id="${maskname}"><path d="M${ponto1.x} ${ponto1.y} L${ponto2.x} ${ponto2.y} Q${controlpoint34.x} ${controlpoint34.y} ${ponto3.x} ${ponto3.y} L${ponto4.x} ${ponto4.y} L${ponto1.x} ${ponto1.y}" fill="white" /><circle r="${rS}" cx="0" cy="0" fill="black" /></mask><circle r="${rB}" cx="0" cy="0" fill="${cor}" mask="url(#${maskname})" /></g>`;
return svgpath;
}
arctext = function (rB, sA, eA, texto, delta) {
if (delta == undefined) {
delta = 0;
}
if (texto != undefined) {
var positx = rB - 30 + delta;
var angulo = sA + eA / 2;
var svgtext = "";
var patt = /^(-)/gm;
if (texto.match(patt) == null) {
if (sA + eA / 2 > 90 && sA + eA / 2 < 270) {
svgtext += `<g transform="rotate(${angulo})"><text transform="rotate(180)" text-anchor="end" class="pietexto" x="-${positx}" y="5">${texto}</text></g>`;
} else {
svgtext += `<g transform="rotate(${angulo})"><text class="pietexto" x="${positx}" y="5">${texto}</text></g>`;
}
}
return svgtext;
} else {
return "";
}
}
svgpiechart = function (data, w) {
var width = w;
var center = w / 2;
var constroigraph = `<svg viewBox="0 0 ${width} ${width}" class="piechartview">
<g transform="translate(${center} ${center})">`;
for (var key in data) {
var cor = "#000000";
if (data[key][4] != undefined && data[key][4] != "") {
cor = data[key][4];
}
constroigraph += arcslice(
data[key][0],
data[key][1],
data[key][2],
data[key][3],
key,
cor
);
}
for (var key in data) {
var cor = "#000000";
if (data[key][4] != undefined && data[key][4] != "") {
cor = data[key][4];
}
constroigraph += arctext(
data[key][1],
data[key][2],
data[key][3],
data[key][5],
data[key][6]
);
}
constroigraph += "</svg>";
return constroigraph;
}
dados = ({
nome1: [40, 73, 0, 24, "#22ccff", "informação 1", 30],
nome2: [40, 73, 25, 40, "#22ddff", "texto complementar", 30],
nome3: [40, 73, 66, 30, "#33ddff", "qualquer dado", 30],
nome4: [40, 73, 110, 50, "#33eeff", "testes múltiplos", 30],
teste1: [85, 220, -20, 30, "#bbFFFF", "acentuação", 10],
teste2: [90, 225, 10.5, 15, "#d5FFFF", "funciona aqui", 10],
teste3: [95, 230, 26, 15, "#ddFFFF", "mais testes", 10],
Roxo1: [0, 55, -90, 120, "#3300DD", "Base 1", -5],
Roxo2: [0, 55, 30, 120, "#332299", "Base 2", -5],
Roxo3: [0, 55, 150, 120, "#4311ff", "Base 3", -5],
nome5: [35, 73, 190, 130, "#FF337755", "Transparente", 20]
})
<div>
${testeA}
</div>
testeA = `<style> .piechartview { width:100%; height: 300px; }</style>` +
svgpiechart(dados, 520)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
