Computer Graphics & Visualization @ufrj.br
Public
Edited
Jun 24, 2023
1 fork
Importers
3 stars
mutable clearWindowSelection = false
clearButton = svg`<svg width="18" height="18" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg" style="padding:5px;background:white;border-radius:10px;">
<path d="M7.1595 0H3.47242C1.56577 0 0 1.55368 0 3.47373V6.50535C0 6.78325 0.227241 7.01057 0.505035 7.01057C0.782828 7.01057 1.01007 6.78325 1.01007 6.50535L1.01016 3.47373C1.01016 2.12209 2.10868 1.02317 3.45979 1.02317H7.13425C8.51057 1.02317 9.60914 2.12211 9.60914 3.47373V6.1264C9.60914 7.47804 8.51061 8.57696 7.1595 8.57696L2.60116 8.57687L4.12907 7.04838C4.33112 6.84625 4.33112 6.53046 4.12907 6.32833C3.92702 6.1262 3.61134 6.1262 3.40929 6.32833L1.01016 8.72836C0.808105 8.93049 0.808105 9.24628 1.01016 9.44841L3.40929 11.8484C3.51031 11.9495 3.63653 12 3.77542 12C3.90173 12 4.04063 11.9495 4.14156 11.8484C4.34361 11.6463 4.34361 11.3305 4.14156 11.1284L2.60116 9.60017H7.1595C9.07882 9.60017 10.6319 8.04649 10.6319 6.12644V3.47378C10.6319 1.55373 9.06615 4.72183e-05 7.1595 4.72183e-05L7.1595 0Z" fill="#151472"/>
</svg>`
viewof colorSel = Inputs.select(variables, {
label: "Cor",
format: (d) => d.name,
value: variables[3]
})
colorSel
mutable colorVar = colorSel
viewof intervaloNascimentos = sliderArray(
{
range: [1, 10, 1e2, 1e3, 1e4, 5 * 1e4, 1e5],
value: [1, 6],
ticksLabelFormatter: (i) =>
["0", "10", "100", "1K", "10K", "50K", "100K"][i],
width: 310,
height: 56
},
sliderRangeBase
)
mutable xAxisVar = xAxisSel
mutable yAxisVar = yAxisSel
colorScale = d3.scaleThreshold(colorVar.thresholds, colorVar.range)
colorLegend = Legend(colorScale, { width: 300, title: TL(colorVar.label) })
scatterplot = {
let muncolor = (d) =>
munSelecionados.filter((mun) => mun.cod == d.CODMUNRES)[0].cor;
let plot = Plot.plot({
width: scatterConfig.width,
height: scatterConfig.height,
marginBottom: 40,
x: {
line: true,
ticks: 10,
label: TL(xAxisVar.label),
domain:
xAxisVar.name == "IDH 2010" && dataRange.xmin < 0
? xAxisVar.domain
: undefined
},
y: {
line: true,
label: TL(yAxisVar.label),
domain:
yAxisVar.name == "IDH 2010" && dataRange.ymin < 0
? yAxisVar.domain
: undefined
},
marks: [
Plot.dot(data, {
x: "x",
y: "y",
title: (d) =>
nomeMunicipio(d.municipio) +
`\n${TL(xAxisVar.label)}: ${d.x.toFixed(2)}` +
`\n${TL(yAxisVar.label)}: ${d.y.toFixed(2)}` +
`\n${TL(colorVar.label)}: ${d.val.toFixed(2)}`,
fill: (d) => colorScale(d.val),
stroke: "rgba(0,0,0,0.1)"
}),
Plot.dot(highlightData, {
x: "x",
y: "y",
symbol: { draw: flagDraw },
title: (d) =>
nomeMunicipio(d.municipio) +
`\n${TL(xAxisVar.label)}: ${d.x.toFixed(2)}` +
`\n${TL(yAxisVar.label)}: ${d.y.toFixed(2)}` +
`\n${TL(colorVar.label)}: ${d.val.toFixed(2)}`,
stroke: "currentColor",
fill: (d) => muncolor(d),
r: 1.7,
strokeWidth: 1
})
]
});
plot.style.fontFamily = scatterConfig.fontFamily;
plot.style.fontSize = 11;
plot = rectSelect(plot, (range) => {
mutable dataRange = range;
});
plot = dblClickInteraction(plot, (datum) =>
alteraMenuLocalidade(datum.municipio)
);
plot = hoverInteraction(
plot,
(sel) => {
if (sel.attr("r") == 3) sel.attr("stroke", "black");
},
(sel) => {
if (sel.attr("r") == 3) sel.attr("stroke", "rgba(0,0,0,0.1)");
}
);
plot = applyDotAnimation(plot, [data, highlightData]);
const container = htl.html`<div style="position:relative;display:inline-block;">`;
container.append(plot);
if (dataRange.xmin != Number.NEGATIVE_INFINITY) {
container.append(clearButton);
clearButton.style.position = "absolute";
clearButton.style.right = "10px";
clearButton.style.top = "10px";
clearButton.onclick = () => {
mutable dataRange = allRange;
};
}
return container;
}
mutable scatterConfig = ({
width: 400,
height: 300,
fontFamily : "Roboto Condensed"
})
alteraMenuLocalidade = (municipio) => {
const collection = viewof munSelecionados.value;
const index = collection.map((d) => d.cod).indexOf(municipio.cod);
if (index < 0) {
if (collection.length < 4) {
const obj = Object.assign({}, municipio);
obj.cor = corMunNaoUsada(collection);
console.log(obj);
collection.push(obj);
}
} else {
if (collection.length > 1) {
collection.splice(index, 1);
}
}
viewof munSelecionados.value = collection; //collection.map((d) => d.nome);
}
mutable debug = null
coresMunicipios = ["#2F87F5", "#D8C56C", "#DC5988", "#6CC28D"]
//
// Retorna a próxima cor ainda não usada em munSel (tipicamente munSelecionados)
//
corMunNaoUsada = function (munSel) {
let cores = [...coresMunicipios];
for (let mun of munSel) {
let i = cores.indexOf(mun.cor);
if (i >= 0) cores.splice(i, 1);
}
if (cores.length > 0) return cores[0];
}
htl.html`<button style="background:${corMunNaoUsada(
munSelecionados
)};">Próxima cor`
flagCanvasTest = {
const canvas = DOM.canvas(200, 200);
const mySymbol = { draw: flagDraw };
const ctx = canvas.getContext("2d");
ctx.translate(100, 100);
ctx.strokeStyle = "black";
mySymbol.draw(ctx, 30);
ctx.stroke();
canvas.mySymbol = mySymbol;
return canvas;
}
flagSvgTest = htl.svg`<svg width=200 height=200>
<path transform="translate(100,100)"
d="${flagPath(30)}" stroke=black fill=none />
</svg>`
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
data = dadosMunicipio
.map((d) =>
Object.assign(d, {
x: +xAxisVar.field(d),
y: +yAxisVar.field(d),
val: +colorVar.field(d),
regiao: ["N", "NE", "SE", "S", "CO"][
Math.floor(d.CODMUNRES / 100000) - 1
],
municipio: codigoToMunicipio.get(d.CODMUNRES)
})
)
.filter(
(d) =>
d.municipio &&
dataFilter(d) &&
d.x >= dataRange.xmin &&
d.y >= dataRange.ymin &&
d.x <= dataRange.xmax &&
d.y <= dataRange.ymax
)
mutable dataFilter = {
const [totalMin, totalMax] = intervaloNascimentos.map(
(i) => [0, 10, 10e2, 10e3, 10e4, 5 * 10e4, 10e5][i]
);
return (d) => d.ANO == ano && d.TOTAL >= totalMin && d.TOTAL <= totalMax;
}
highlightData = {
const codigos = munSelecionados.map((d) => d.cod);
return data.filter((d) => codigos.includes(d.CODMUNRES));
}
//
// Variables that can be plotted and functions to compute them from dadosMunicipio rows
//
variables = [
{
label: "Média anual de poluição (µg/m³)",
labelBarChart: "Poluição média por ano (µg/m³)",
labelRanking: "Ranking por média de poluição",
labelTooltip: "média anual (µg/m³)",
name: "Poluição",
field: (d) => d.AVG_PM25,
domain: [0, 70],
thresholds: [5, 15, 25, 35],
range: ["#260800", "#662514", "#B26B59", "#E5B8AC", "#FFD6CC"].reverse()
},
{
label: "Baixo peso (por cem nascidos vivos)",
labelBarChart: "Baixo peso médio anual (por 100 N.V.)",
labelRanking: "Ranking por média de baixo peso",
labelTooltip: "por cem nascidos vivos",
name: "Baixo peso",
field: (d) => (100 * (d.BAIXO_PESO || 0)) / (d.TOTAL || 1),
domain: [0, 200],
thresholds: [5.2, 6.8, 8.3, 100],
range: ["#00261D", "#125948", "#4D9986", "#99CCC0", "#CEF2E9"].reverse()
},
{
label: "Óbitos perinatais (por mil nascidos vivos)",
labelBarChart: "Óbitos perinatais anuais (por mil N.V.)",
labelRanking: "Ranking por média de óbitos perinatais",
labelTooltip: "por mil nascidos vivos",
name: "Mort. Perinatal",
field: (d) => (1000 * (d.OBITOS_PERINATAIS || 0)) / (d.TOTAL || 1),
domain: [0, 20],
thresholds: [0, 0.6, 1.4,3.9],
range: ["#070040", "#291C8C", "#6359B2", "#A9A3D9", "#DDD9FF"].reverse()
},
{
label: "Óbitos neonatais (por mil nascidos vivos)",
labelBarChart: "Óbitos neonatais anuais (por mil N.V.)",
labelRanking: "Ranking por média de óbitos neonatais",
labelTooltip: "por mil nascidos vivos",
name: "Mort. Neonatal",
field: (d) => (1000 * (d.OBITOS_NEONATAIS || 0)) / (d.TOTAL || 1),
domain: [0, 30],
thresholds: [0, 0.7, 1.7,3.9],
range: ["#200040","#541C8C","#8659B2","#BEA3D9","#ECD9FF"].reverse()
},
{
label: "Óbitos infantis (por mil nascidos vivos)",
labelBarChart: "Óbitos infantis anuais (por mil N.V.)",
labelRanking: "Ranking por média de óbitos infantis",
labelTooltip: "por mil nascidos vivos",
name: "Mort. Infantil",
field: (d) => (1000 * (d.OBITOS_INFANTIS || 0)) / (d.TOTAL || 1),
domain: [0, 100],
thresholds: [0, 9, 14, 20],
range: ["#260024", "#661461", "#B259AD", "#E5ACE2", "#FFD9FD"].reverse()
},
{
label: "Índice de Desenvolvimento Humano (2010)",
labelBarChart: "Índice de Desenvolvimento Humano (2010)",
labelRanking: "Ranking por IDH (2010)",
labelTooltip: "",
name: "IDH 2010",
field: (d) => d.IDH || 0,
domain: [0.4, 0.9],
thresholds: [0.6, 0.65, 0.7, 0.75],
// range: ["#261800", "#66430A", "#B27D25", "#E6B667", "#FFD899"].reverse() // idh laranja
// range: ["#200040","#541C8C","#8659B2","#BEA3D9","#ECD9FF"].reverse()
range: ["#001A40", "#1C498C", "#597DB2", "#A3B8D9", "#D9E8FF"].reverse()
}
]
function selectRange(range) {
return data.filter(
(d) =>
d.x >= range.xmin &&
d.y >= range.ymin &&
d.x <= range.xmax &&
d.y <= range.ymax
);
}
allRange = ({
xmin: Number.NEGATIVE_INFINITY,
ymin: Number.NEGATIVE_INFINITY,
xmax: Number.POSITIVE_INFINITY,
ymax: Number.POSITIVE_INFINITY
})
mutable dataRange = {
mutable clearWindowSelection;
return allRange;
}
hoverInteraction = (plotElement, fover, fleave) => {
const circles = d3.select(plotElement).selectAll("circle");
circles.on("mouseover", function () {
let circle = d3.select(this);
fover(circle);
});
circles.on("mouseleave", function () {
let circle = d3.select(this);
fleave(circle);
});
return plotElement;
}
dblClickInteraction = (plotElement, func) => {
const circles = d3.select(plotElement).selectAll("[aria-label=dot]>circle");
circles.on("dblclick", function () {
let circle = d3.select(this);
func(data[circle.datum()]);
});
const paths = d3.select(plotElement).selectAll("[aria-label=dot]>path");
paths.on("dblclick", function () {
let path = d3.select(this);
func(highlightData[path.datum()]);
});
return plotElement;
}
rectSelect = function (plotElement, selFunction) {
const xscale = plotElement.scale("x");
const yscale = plotElement.scale("y");
const rect = {};
const svg = d3.select(plotElement).style("user-select", "none");
plotElement.onmousedown = (e) => {
rect.x0 = rect.x1 = e.offsetX;
rect.y0 = rect.y1 = e.offsetY;
rect.dx = rect.dy = 0;
rect.sel = svg.append("rect").attr("fill", "rgba(0,0,0,0.2)");
};
plotElement.onmousemove = (e) => {
if (!e.buttons) return;
[rect.x1, rect.y1] = [e.offsetX, e.offsetY];
rect.dx = Math.abs(rect.x1 - rect.x0);
rect.dy = Math.abs(rect.y1 - rect.y0);
rect.x = Math.min(rect.x0, rect.x1);
rect.y = Math.min(rect.y0, rect.y1);
rect.sel.attr("x", rect.x);
rect.sel.attr("y", rect.y);
rect.sel.attr("width", rect.dx);
rect.sel.attr("height", rect.dy);
};
plotElement.onmouseup = (e) => {
rect.sel.remove();
if (rect.dx > 2 && rect.dy > 2) {
selFunction({
xmin: Math.min(xscale.invert(rect.x0), xscale.invert(rect.x1)),
xmax: Math.max(xscale.invert(rect.x0), xscale.invert(rect.x1)),
ymin: Math.min(yscale.invert(rect.y0), yscale.invert(rect.y1)),
ymax: Math.max(yscale.invert(rect.y0), yscale.invert(rect.y1))
});
}
};
return plotElement;
}
function applyDotAnimation(plotElement, datasets) {
let dataMap = datasets.map((dataset, i) => ({
dataset,
map: new Map(),
oldMap: mutable oldDataMap[i] ? mutable oldDataMap[i].map : new Map()
}));
d3.select(plotElement)
.selectAll("g[aria-label=dot]")
.each(function (_, markGroupIndex) {
const markGroup = d3.select(this);
const { dataset, map, oldMap } = dataMap[markGroupIndex];
markGroup.selectAll("circle").each(function (_, circleIndex) {
let circle = d3.select(this);
let key = dataset[circleIndex].CODMUNRES;
let newPos = {
cx: +circle.attr("cx"),
cy: +circle.attr("cy")
};
map.set(key, newPos);
if (oldMap.has(key)) {
const oldPos = oldMap.get(key);
circle.attr("cx", oldPos.cx);
circle.attr("newcx", newPos.cx);
circle.attr("cy", oldPos.cy);
circle.attr("newcy", newPos.cy);
}
});
});
d3.select(plotElement)
.selectAll("circle[newcx]")
.transition()
.duration(1500)
.attr("cx", function () {
return d3.select(this).attr("newcx");
})
.attr("cy", function () {
return d3.select(this).attr("newcy");
});
mutable oldDataMap = dataMap;
return plotElement;
}
//
// Obsoleto. Substituído pelo componente menuLocalidade
//
function munInput() {
const container = htl.html`<div style="caret-color:transparent;display:inline;tabindex=-1">`;
let collection = [];
const suggestion = (txt) => {
txt = txt.toUpperCase();
return municipios
.filter((d) => d.municipio.includes(txt))
.sort((a, b) => a.municipio.localeCompare(b.municipio));
};
const search = () =>
SearchForm({
placeholder: "Novo local...",
format: (d) => d.municipio,
suggestion
});
const refresh = () => {
container.innerHTML = "";
for (let mun of collection) {
const remButton = htl.html`<span style="padding:0px 4px;font-size:10pt;"> ⊝ </span>`;
remButton.onclick = () => {
collection.splice(collection.indexOf(mun), 1);
refresh();
};
container.append(
htl.html`<button style="padding-right:0px;border-radius:15px;border-width:thin;
font-size:8pt;margin-right:2px;caret-color: transparent">
${nomeMunicipio(mun)} ${remButton}`
);
}
if (collection.length < 4) {
const form = search();
form.style.display = "inline";
form.style.caretColor = "black";
container.append(form);
form.focus();
form.addEventListener("change", () => {
if (form.value != "" && collection.indexOf(form.value) < 0) {
collection.push(form.value);
}
refresh();
});
}
container.value = collection;
container.dispatchEvent(new CustomEvent("input"));
};
const setValue = (newVal) => {
collection = newVal;
refresh();
};
refresh();
container.setValue = setValue;
return container;
}
//Inputs.table(dadosMunicipio)
codigoToRegiaoSaude = new Map(
d3
.dsvFormat(";")
.parse(await FileAttachment("regiaosaude.csv").text())
.map((d) => [d.CODMUNRES, `${d.UF}, ${d.REGIAOSAUDE}`])
)
regioesSaude = new Set(codigoToRegiaoSaude.values())
codigoToMunicipio = new Map(municipios.map((d) => [d.cod, d]))
function nomeMunicipio(registro) {
try {
if (registro.nome[registro.nome.length - 1] == ")") return registro.nome;
return `${registro.nome} (${registro.uf})`;
}
catch (error) {
mutable debug = {error, registro};
return "UNKNOWN";
}
}
//import { dadosMunicipio } from "@esperanc/amplia-dados-mapa"
dadosMunicipio = FileAttachment("dadosMunicipio.csv").csv()
mutable TL = (txt) => txt
function setTranslation(newTL) {
mutable TL = newTL;
}
import { SearchForm } from "@floatingpurr/input-autocomplete"
import { menuLocalidade, municipios } from "b02783c63cc0070b"
import {
sliderbase,
sliderArray,
sliderRangeBase,
style_slider
} from "f493b3d6ad410bbc"
import { Legend } from "@d3/color-legend"
estiloFonteMenuLocalidade = htl.html`<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');
</style>`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.