The avatar for @esperanc
Claudio Esperança
Computer Graphics & Visualization @ufrj.br
Published
Data Visualization
Edited
Aug 11, 2022
2 stars
13
Data Visualization
37-75Introdução ao SVGIntrodução ao HtmlIntrodução às Cascading StyleSheets (CSS)SVG Dinâmico com D3Usando arquivos SVGEncapsulando um inputSorteando com probabilidades dadasHexagonal hierarchical cartogram for BrazilCategorical Treemap
Coral Vivo Diorama v3
Mapa do Brasil com Vega-LiteCategorical data visualization with t-SNEHierarchical Square PackingPhoto gallery with lensMapa de bairros do Rio com Vega-LiteMapa coroplético e cartograma Dorling de população dos municípios brasileirosDeformation with RBFsLane-Riesenfeld subdivision
Insert cell
Insert cell
Insert cell
width = 1024
Insert cell
Insert cell
Insert cell
converteLegendaCallback = setTimeout(converteLegenda,500);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mutable sideCount = 0
Insert cell
mutable bottomCount = 0
Insert cell
Insert cell
Insert cell
chart = d3PlotEspecieIndicador(recifeCurrent,selectedElement,indicadorCurrent)
Insert cell
Insert cell
Insert cell
card = cardInfo(selectedElement)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
coloniasHelp = html` `//main.querySelector(".sidepanel .species .categoria .coral");
Insert cell
popups = {
let title = main.querySelector(".title");
setMainDisplay;
speciesTable;
removePopups(title);
removePopups(main);
let titulo = title.querySelector("#titulo");
let colonias = coloniasHelp;
let pop1 = await addPopupHelp(titulo, {
contents: html`<div style="width:350px;padding-right:12px;">${textoTitulo}</div>`,
mode: "i",
popx: 30,
popy: 0,
insetCloseIcon: true,
insetTop: 0,
insetRight: 0
});
await Promises.delay(1000); // Wait for the diorama popup help image to load
let dioramaWidth = renderer.domElement.getBoundingClientRect().width;
let pop2 = await addPopupHelp(renderer.domElement, {
insetCloseIcon: true,
anchor: "ne",
popy: 3,
popx: 0, //35-dioramaPopup.width-(dioramaWidth-dioramaPopup.width)/2,
insetTop: 0,
insetRight: 0,
contents: dioramaPopup,
offsetx: 60 - dioramaWidth,
offsety: 12
});
pop2.popbox.style.padding = "0px";
pop2.popbox.style.width = dioramaPopup.width - 2 + "px";
pop2.popbox.style.height = dioramaPopup.height - 2 + "px";

let recife = title.querySelector("#menurecife");
let recifeHelp = html`<div style="width:350px;padding-right:8px;">${
textoRecife[mutable recifeCurrent]
}</div>`;
let pop3 = await addPopupHelp(recife, {
mode: "i",
contents: recifeHelp,
offsetx: recifeCurrent === "RFO" ? -75 : -110,
offsety: 2,
popx: -380,
popy: 0,
insetCloseIcon: true,
insetTop: 0,
insetRight: 0
});
let pop4 = await addPopupHelp(colonias, {
mode: "i",
contents: html`<div style="opacity:1;color:black;width:100px;font-size:12px">Recrutas são colônias pequenas</div>`,
offsetx: 133,
offsety: 20,
popx: -60,
popy: 30,
insetCloseIcon: true,
insetTop: 0,
insetRight: 0
});
return [pop1, pop2, pop3, pop4];
}
Insert cell
Insert cell
Insert cell
Insert cell
dioramaPopup = {
let svg = await FileAttachment("popup diorama5.svg").image();
return svg
}
Insert cell
`styles`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
speciesPanelWidth = 215
Insert cell
mutable drawingWidth = width
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
coralVivoDb = JSON.parse(await FileAttachment("coralDb@1.json").text())
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
let species = [... new Set(peixesData.map(c => c.species))];
return species.map(s => speciesInfo[s] ? speciesInfo[s] : s)
}
Insert cell
speciesName = {
let names = Object.keys(speciesInfo);
return name => {
let match = stringsim.findBestMatch(name, names).bestMatch;
if (match.rating >= 0.4) return match.target;
return null;
};
}
Insert cell
{
let corais = coraisData.filter(
c => c.time == timeCurrent && c.recife == recifeCurrent
);
return corais.map(c => [c.species, speciesInfo[c.species]]);
let crows = corais.map(c =>
[
`"${c.species.trim()}"`,
"coral",
speciesInfo[c.species].tamanho,
c.tipo == "colonias" ? c.value : 0,
c.tipo == "recrutas" ? c.value : 0
].join(",")
);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require.alias({'d3-selection': 'd3'})('d3@5', 'd3-simple-slider')
Insert cell
import {swatches} from "@d3/color-legend"
Insert cell
import {circleLayout, rectLayout} from "@esperanc/circle-packing-with-force-boundary"
Insert cell
stringsim = require('https://bundle.run/string-similarity@4.0.1')
Insert cell
import { slider, select } from "@bartok32/diy-inputs"
Insert cell
import { addPopupHelp, removePopups } from "230e02c4ae34f192"
Insert cell
import {importjs,importcss} from "@chomtana/import-external-library"
Insert cell
FontAwesome = importcss("https://use.fontawesome.com/releases/v5.7.2/css/all.css")
Insert cell
Insert cell
Insert cell
mutable timeCurrent = 2018.02
Insert cell
mutable recifeCurrent = 'ARA'
Insert cell
mutable indicadorCurrent = Array.from (indicadores)[1]
Insert cell
Insert cell

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.
Learn more