Professor Big Data Science at Ghent University.
{
const hover = vl.selectSingle()
.encodings('x') // limit selection to x-axis value
.fields('date')
.on('mouseover') // select on mouseover events
.nearest(true) // select data point nearest the cursor
.empty('none'); // empty selection includes no data points
const graph = vl.markLine()
.encode(
vl.x().fieldT("date").title(null),
vl.y()
.sum("percent")
.stack(true)
.axis({format: "%"})
.scale({domain: [0, 1]})
.title("Percentage van de gemeenten"),
vl.order().fieldQ("weeks"),
vl.opacity().value(0.9),
vl.color()
.fieldN("weeks")
.scale({scheme: "greens", reverse: true, domain: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]})
.legend(null)
)
.width(800)
.height(500);
return vl.data(data.filter(d => d.weeks === 0)).layer(
graph,
// add a rule mark to serve as a guide line
vl.markRule({color: '#aaa'})
.transform(vl.filter(hover))
.encode(vl.x().fieldT("date")),
// add circle marks for selected time points, hide unselected points
graph.markCircle()
.select(hover) // use as anchor points for selection
.encode(
vl.stroke().value("white"),
vl.strokeWidth().value(1),
vl.opacity().if(hover, vl.value(1)).value(0)
),
graph.transform(vl.filter(hover))
.markText({align: 'left', dx: 5, dy: -5}, {fill: "black"})
.encode(
vl.text().sum("percent").format(".1%")
),
)
.title("Percentage gemeenten met minstens 1 positieve covid test in de laatste 7 dagen")
.padding({right: 30, top: 10, bottom: 10})
.render();
}
data = dates.map(currentDate => {
const filteredData = caseData.filter(d => Date.parse(d.DATE) <= Date.parse(currentDate));
const perDate = Array.from(d3.rollup(filteredData, v => d3.max(v, d => d.DATE), d => d.NIS5).values())
const output = [];
d3.rollup(perDate, v => v.length, d => d).forEach((value, key) => output.push({date: currentDate, daysAgo: diffDays(currentDate, key), count: value, weeks: Math.floor(diffDays(currentDate, key)/7), percent: value / 581 }));
return output;
}).flat()
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.