Interaction Designer, Creative Technologist, Professor and Researcher
meusdados = d3.json(
"https://opensheet.elk.sh/1tQTYk3-JoPGl1DUEl80-ZkO0Qf9pZl7JjDjif-1mFRA/MeusDados"
)
meugrafico = function (arr) {
let s = `<svg width="500" height="500" viewBox = "-70 -30 600 540">`;
for (let i = 0; i <= 100; i = i + 10) {
s =
s +
`<line x1="-10" y1="${500 - altura(i)}" x2="530" y2="${
500 - altura(i)
}" stroke="hsl(${minhapalette(i)}, 50%, 60%)" stroke-width="1" />
<text x="-65" y="${500 - altura(i)}" fill="#aaaaaa">${i} %</text>
`;
}
for (let i = 0; i < arr.length; i = i + 1) {
s =
s +
`<rect x="${i * tamanho(arr)}" y="${
500 - altura(arr[i].Porcentagem)
}" width="${tamanho(arr) - 5}" height="${altura(
arr[i].Porcentagem
)}" fill="hsl(${parseFloat(arr[i].Porcentagem) * 2}, 100%, 49%)" />`;
}
s = s + `</svg>`;
return s;
}
tamanho = function (arr) {
let t = 0;
t = 500 / arr.length;
return t;
}
altura = function (vlr) {
let meufloat = parseFloat(vlr);
let valorfinal = 500 * (meufloat / 100);
return valorfinal;
}
minhapalette = function (vlr) {
if (parseInt(vlr) < 40) {
return 0;
}
if (parseInt(vlr) >= 40 && parseInt(vlr) < 70) {
return 100;
}
if (parseInt(vlr) >= 70) {
return 200;
}
}
xpto = html`${meugrafico(meusdados)}`
teste = meugrafico(meusdados)
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.
