I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
viewof map = {
const map = spikeMapColombia();
d3.select(map)
.append("text")
.attr("transform", `translate(${width - 10}, ${height-70})`)
.attr("text-anchor", "end")
.style("font-size", "18pt")
.style("font-family", "sans-serif")
.call(text => text.append("tspan").attr("class", "date"))
.call(text =>
text
.append("tspan")
.attr("y", 23)
.attr("x", 0)
.style("font-style", "italic")
.style("font-size", "12pt")
.text("Twitter: @guerravis @duto_guerra")
);
return map;
}
dataForMap = cachedData
update = {
hDomain; // redraw after updating the domain
//update
map(datesMap, {
dynamicScale: false,
normalize: normalize,
duration: 200,
sort: "ascending",
normalizeFactor: 100000,
legendTitle: normalize ? "Casos por 100k habitantes" : "Número de Casos"
});
d3.select(viewof map)
.select(".date")
.text(currentDate.toLocaleDateString("es", { dateStyle: "long" }));
}
datesMap = {
const initialObj = Object.fromEntries(
Object.keys(dataForMap[0]).map(city => [city, 0])
);
const avgData = dataForMap
.filter(
d =>
d.date_diff > currentDateDiff - movingAverageDays &&
d.date_diff <= currentDateDiff
)
.reduce((p, d) => {
for (let city in d) {
p[city] += d[city];
}
return p;
}, initialObj);
for (let city in avgData) {
avgData[city] /= movingAverageDays;
}
return new Map(Object.entries(avgData).map(([k, v]) => [codFmt(k), v]));
}
maxValue = normalize ? 300 : 2000
hDomain = {
color.domain([0, maxValue * .3]);
return h.domain([0, maxValue]);
}
movingAverageDays = 7
cachedData
.slice(currentDateDiff - Math.floor(movingAverageDays), currentDateDiff)
.map(d => d[5079])
datesMap.get("05079")
codFmt = d3.format("05d")
originalDate = new Date("2020/03/06")
cachedData = {
const res = (await FileAttachment("countsByMunDate3.csv").csv()).map(d => {
for (let c in d) d[c] = +d[c];
return d;
});
return res;
}
viewof byDateMun = dt
.groupby(referenceDate, "ciudad_municipio")
.orderby(referenceDate)
.count()
.view()
viewof pivotMun = byDateMun
.derive({
...aq.all(),
date_diff: `d => (d[${referenceDate}] - ${+originalDate})/(1000*24*3600) `
})
.groupby("date_diff")
.pivot("ciudad_municipio", { count: d => op.sum(d.count) })
.orderby("date_diff")
.view(5)
countsByMunDate = pivotMun.objects()
mapByMun = new Map(
byDateMun.objects().map(d => ["" + d.ciudad_municipio, d.count])
)
data = getData()
viewof dt = aq.from(filteredData).view({ limit: 25 })
dateParse = d3.timeParse("%d/%m/%Y %H:%M:%S")
// dataForCSV = {
// const keys = Object.keys(data[0]);
// return filteredData.map(d =>
// Object.fromEntries(
// keys.filter(k => !k.startsWith("__")).map(k => [k, d[k]])
// )
// );
// }
duration = 200
height= 750
async function* getData() {
console.log("get Data");
yield (await FileAttachment("fullDataOct31_2020_head.csv").csv()).map(
d3.autoType
);
console.log("returning cached");
// // 900k + a 20k cases per day since Oct 31
// const start_offset =
// 900000 + Math.floor((+new Date() - +new Date(2020, 9, 31)) / 24 / 360);
// const before = new Date();
// const gen = loadSocrata(
// "https://www.datos.gov.co/resource/gt2j-8ykr.csv",
// // "https://www.datos.gov.co/resource/gt2j-8ykr.csv?$ORDER=fecha_reporte_web DESC",
// {
// // max_pages: 2,
// progressive: false,
// start_offset
// }
// );
// const data = (await gen.next()).value.map(d => {
// d = d3.autoType(d);
// columnFechas.forEach(f => {
// if (d[f]) d[f] = dateParse(d[f]);
// });
// return d;
// });
// console.log("got data, time= ", (new Date() - before) / 1000);
// yield data;
// // yield new Promise((resolve, reject) => {
// // resolve(recentData);
// // });
console.log("returning bigger one");
}
viewof columnFechasSelected = checkbox({
options: columnFechas,
value: columnFechas,
title: "Fechas Visualizadas"
})
columnFechas = [
"fecha_inicio_sintomas",
"fecha_muerte",
"fecha_reporte_web",
"fecha_recuperado",
"fecha_de_notificaci_n",
"fecha_diagnostico"
]
Object.keys(data[0]).filter(a => a.includes("fecha"))
deriveFechas = Object.fromEntries(
columnFechasSelected.map(f => [
`${f}_rel`,
`d => d["${f}"] ? ( d["${referenceDate}"] - d["${f}"])/86400000 : null` // in days
])
)
viewof fechas = dt
.sample(10000)
.filter(`d => d["${referenceDate}"]`)
.derive(deriveFechas)
.fold(Object.keys(deriveFechas))
.select(
"key",
"value",
"id_de_caso",
referenceDate,
"departamento_nom",
"ciudad_municipio_nom"
)
.filter(d => d.value !== null)
.orderby(aq.desc("value"))
.view()
// viewof byDept = dt
// .groupby(["departamento_nom", "ciudad_municipio_nom"])
// .rollup({ edadMedia: d => op.mean(d.edad), count: op.count() })
// .orderby(aq.desc("count"))
// .view({ limit: 25 })
import { aq, op } from '@uwdata/arquero'
import { file, checkbox, select } from "@jashkenas/inputs"
import { vl } from "@john-guerra/vega-lite-api"
d3 = require("d3@6")
import { navio } from "@john-guerra/navio"
import { loadSocrata } from "@john-guerra/socrata-load-multiples-pages"
import { spikeMapColombia, color, h } with {height} from "@john-guerra/spike-map-colombia"
import { Scrubber } from "@mbostock/scrubber"
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.
