I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
selected
filtersAsArray = {
viewof selected;
return [...selected.status].map(([name, body]) => ({
name,
brushes: [...body.brushes.values()].map(
({
...rest
}) => rest
)
}));
}
// Fake input to persist the filters
filtersAsArray2 = {
selected; // for it to change on every selection
const filters = [...viewof selected.brushGroups.values()];
// return filters;
return filters
.map((filter) => {
return [...filter.brushes?.values()].map((timeBox) => ({
selectionDomain: timeBox.selectionDomain
}));
})
.flat();
}
Inputs.table(selectedTable)
selectedTable = [...selected.entries()]
.map(([group, m]) =>
[...m.entries()]
.map(([id, timeline]) => timeline.map((d) => ({ group, id, ...d })))
.flat()
)
.flat()
stats
referenceCurves = {
const statsSorted = stats.sort((a, b) => a.PERIODO - b.PERIODO);
const curvesColors = d3
.scaleSequential(
(t) => (console.log("t", t, 1 - t), d3.interpolatePurples(1 - t))
)
.domain([0, 3]);
function getCurve(sdDiff = 0) {
const avg = yAttr,
sd = `sqrt(var_pop(${yAttr.split("(")[1].slice(0, -1)}))`; // quirks of the data format
return {
name: `Avg +${sdDiff}sd`,
data: statsSorted.map((d) => [d.PERIODO, d[avg] + sdDiff * d[sd]]),
color: curvesColors(Math.abs(sdDiff)),
opacity: 0.7
};
}
return [-3, -2, -1, 0, 1, 2, 3].map(getCurve);
}
{
const timeSearchersGenero = ["M", "F", null].map((genero) =>
[genero, TimeSearcher(
data.filter(
(d) => selectedPeriodos.includes(d.PERIODO) && d.ESTU_GENERO == genero
),
{
x: (d) => d.PERIODO,
y: (d) => d[yAttr],
id: (d) => `${d.INST_COD_INSTITUCION}-${d.ESTU_GENERO}`,
defaultColor: color(genero),
width: width/2,
height: 200,
defaultAlpha: 0.2,
selectedAlpha: 0.5,
showGroupMedian: true
}
)]
)
return htl.html`${timeSearchersGenero.map(([genero,ts]) => htl.html`<h3>Genero = ${genero}</h3>${ts}`)}`
}
color = d3.scaleOrdinal(d3.schemeTableau10)
data = FileAttachment("resultados_agregados_medians.csv")
.csv({ typed: true })
.then((res) => res.sort((a, b) => b.PERIODO - a.PERIODO))
stats = FileAttachment("resultados_statistics.csv").csv({typed: true})
import {navio} from "@john-guerra/navio"
import {TimeSearcher} from "@john-guerra/timesearcher-example"
import {scentedCheckbox} from "@john-guerra/scented-checkbox"
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.
