The avatar for @bagami
Veli
Published
selection
Edited
Sep 9, 2021
5
selection
Weekly COVID deaths, USAIzbori test[EU] Vax rates vs median equivalised net incomeCOVID metrics EU rankings2020 Croatian Presidential Election Maps
USA vaccination rate by state, colored by 2020 election Dem/Rep ratio
Excess mortalityIntervencije pauka ZG HoldingCafés in ZagrebZagreb Carbon Monoxide levels, comparison of years 2012-2021The US COVID SyringeDistance from Zagreb (isochrone map)Spikemap of croatian voters
Insert cell
Insert cell
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

const updateBars = bars(svg);
const updateAxis = axis(svg);
const updateLabels = labels(svg);
const updateTicker = ticker(svg);
// svg
// .append("text")
// .style("font", `bold 12px var(--sans-serif)`)
// .style("font-variant-numeric", "tabular-nums")
// .attr("text-anchor", "end")
// .attr("fill", "grey")
// .attr("x", width - 6)
// .attr("y", height - margin.bottom - 100)
// .attr("dy", "0.32em")
// .text("Author: @velimirgasp");

// svg
// .append("text")
// .style("font", `bold 12px var(--sans-serif)`)
// .style("font-variant-numeric", "tabular-nums")
// .attr("text-anchor", "end")
// .attr("fill", "grey")
// .attr("x", width - 6)
// .attr("y", height - margin.bottom - 80)
// .attr("dy", "0.32em")
// .text("Data: Our World in Data");

yield svg.node();

for (const keyframe of keyframes) {
const transition = svg.transition().duration(duration).ease(d3.easeLinear);

// Extract the top bar’s value.
//x.domain([0, keyframe[1][0].value]);
x.domain([0, 100]);

updateAxis(keyframe, transition);
updateBars(keyframe, transition);
updateLabels(keyframe, transition);
updateTicker(keyframe, transition);

invalidation.then(() => svg.interrupt());
await transition.end();
}
}
Insert cell
Insert cell
duration = 250
// duration = 30
Insert cell
Insert cell
Insert cell
Insert cell
formatNumber = (d) => {
return d3.format(".1%")(d / 100);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
k = 10
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
barSize = 16
Insert cell
Insert cell
datePoints = d3.timeWeek.range(startDate, endDate, 4)
Insert cell
Insert cell
Insert cell
us_states_keys = Array.from(us_grouped.keys())
Insert cell
matchColor("Virginia")
Insert cell
matchColor = (state) => {
const index = us_states.indexOf(state);
const data = electionData[index];
return data.color;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
startDate = new Date(2021, 0, 20)
Insert cell
endDate = new Date(2021, 8, 8)
Insert cell
covidData.filter((d) => d.iso_code == "SWE")[556]
Insert cell
covidData = d3.csvParse(
await FileAttachment("owid-covid-data (1).csv").text(),
d3.autoType
)
Insert cell
us_grouped = d3.group(us_vaccinations, (d) => d.location)
Insert cell
us_vaccinations = d3.csvParse(
await FileAttachment("us_state_vaccinations@1.csv").text(),
d3.autoType
)
Insert cell
vaccinations = FileAttachment("vaccinations.json").json()
Insert cell
Insert cell
Insert cell
//n = euCountries.length
n = 52
Insert cell
Insert cell
Insert cell

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.
Learn more