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