I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Public
Edited
May 22, 2023
// viewof selectedDiseases = searchCheckbox(diseases, {label: "Select Diseases to show", value: diseases, height: 150})
viewof selected = TimeSearcher({
data: filteredParsedMetadata,
id: d => d.disease,
x: d => d.date,
y: d => d.count,
width: width*.8,
height: 300,
hasDetails: false,
detailsHeight: 100,
yScale: () => d3.scalePow().exponent(0.5)
})
diseasesSelectedByTimelines
selected
makeHist = (data, attr) => {
const bar = vl.markBar().encode(vl.y().fieldN(attr), vl.x().count());
const all = bar.data(referenceMetadata).encode(vl.color().value("#eee"));
const selected = bar.data(data);
return vl.layer(selected).title(attr).render();
}
referenceMetadata = diseases.map(d => mapMetadata.get(d))
metadata = {
const geos = d3.tsvParseRows(
await FileAttachment("results_out.json_geo_regions.txt").text()
);
const diseases = d3.tsvParseRows(
await FileAttachment("results_out.json_disease.txt").text()
);
const dates = d3.tsvParseRows(
await FileAttachment("results_out.json_dates.txt").text()
);
return diseases.map((d, i) => ({
id: d[0],
disease: d[1],
geo: geos[i][1],
date: dates[i][1]
}));
}
parsedMetaData2 = metadata
.map((d) => ({ ...d, pdate: new Date(d.date) }))
.filter(
(d) =>
d.pdate instanceof Date &&
!isNaN(d.pdate) &&
d.pdate >= new Date(1980, 0, 0) &&
d.pdate <= new Date(2024, 0, 0)
)
d3.rollups(
parsedMetaData2,
(v) => d3.count(v, (d) => d.pdate),
(d) => d.disease,
// (d) => d.geo,
(d) => d.pdate,
)
navio(parsedMetaData2)
vl.markLine({tooltip: true})
.encode(vl.x().fieldT("date").timeUnit("yearweek"), vl.y().count(), vl.detail().fieldN("disease"))
.width(width*.8)
.data(navioSelected)
.render()
clusters = d3.tsvParseRows(await FileAttachment("clusters_1000@1.txt").text())
vl.markBar().encode(vl.y().fieldQ("0"), vl.x().count()).data(clusters).render()
vl
.markBar()
.encode(vl.y().fieldQ("id"), vl.x().count())
.data(
metadata.map((d) => {
d.id = +d.id;
return d;
})
)
.render()
// metadata.map((d) => {
// d.id = +d.id;
// return d;
// })
mapMetadata = new Map(metadata.map(d => [d.disease, d] ))
// data = FileAttachment("timelines.csv")
// .csv({ typed: true })
// .then((res) =>
// res.map((d) => {
// d.disease = d.name.split("_").slice(1).join(" ");
// const metadata = mapMetadata.get(d.disease)
// return Object.assign(d, metadata);
// })
// )
import {navio} from "@john-guerra/navio"
import {TimeSearcher} from "@ivelascog/timesearcher-plus-usabilidad"
import {multiAutoSelect} from "@john-guerra/multi-auto-select"
import {searchCheckbox} from "@john-guerra/search-checkbox"
import {TimeParser, flatTree} from "@john-guerra/time-parser"
import {FacetedSearch} from "@john-guerra/faceted-search"
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.
