Interaction Designer, Creative Technologist, Professor and Researcher
Public
Edited
Apr 23, 2024
1 fork
Importers
lista = function (url) {
let dados = fetch(url).then(response => {
return response.json();
});
return dados;
}
resultados = getcsvdata(GoogleSheetCsvURL(planilha))
criatabela = function (meusdados) {
var tabela =
"<div style='display: grid; grid-template-columns: 120px 80px 80px; column-gap: 10px; row-gap: 5px; fonta-family: Arial; color: grey; font-size: 18px;'>";
// Cria Divs com os dados, estruturados como Grid por CSS
for (var i = 0; i < meusdados.length; i++) {
tabela +=
"<div style='border: 1px solid #008cca; text-align: center;'>" +
meusdados[i].Nome +
"</div><div style='border: 1px solid #008cca; text-align: center;'>" +
meusdados[i].Inicial +
"</div><div style='border: 1px solid #008cca; text-align: center;'>" +
meusdados[i].Final +
"</div>";
}
tabela += "</div>";
// Retorna a a string para ser implementada como um elemento HTML no documento
return tabela;
}
gerasvg = function (meusdados) {
let meusvg = `<svg style='margin: 0; padding: 0; width: 600px; height: 160px;'>`;
// Cria linhas horizontais
for (var k = 100; k < 600; k += 10) {
meusvg +=
`<line x1=` +
k +
` y1=5 x2=` +
k +
` y2=140 style='stroke: #008cca33; stroke-width: 1' />`;
}
// Cria barras com os valores
for (var i = 0; i < meusdados.length; i++) {
meusvg +=
`<text x='0' y='` +
(i * 30 + 20) +
`' style='fill: #008cca; font-size: 16px; font-family: Arial; font-weight: bold;'>` +
meusdados[i].Nome +
`</text>
<rect x='` +
(parseFloat(meusdados[i].Inicial) + 100) +
`' y='` +
(i * 30 + 10) +
`' width='` +
(parseFloat(meusdados[i].Final) - meusdados[i].Inicial) +
`' height='10' fill=#008cca />`;
}
meusvg += `</svg>`;
// Devolve o código SVG para ser incluíndo como elemento HTML no documento
return meusvg;
}
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.
