x = d3.scaleLinear()
.domain([
d3.min(data, d => d.Introduced),
d3.max(data, d => d.Resistance)
])
.range([margin.left, width - margin.right]);
y = d3.scaleBand()
.domain(data.map(d => d.Antibiotika))
.range([margin.top, height - margin.bottom ])
.round(true);
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x)
.tickFormat(d3.format(".0f")))
squareSize = 12
circleRadius = 6
data = FileAttachment("AMR_timeline_2023_07_11_a@1.csv").csv({typed: true}).then(data => {
const parseNumbers = (d) => Math.round(d);
return data.map(row => ({
Antibiotic: row.Antibiotic,
Antibiotika: row.Antibiotika,
Introduced: parseNumbers(row.Introduced),
Resistance: parseNumbers(row.Resistance),
}))
});
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.
