Public
Edited
May 5, 2023
height = 400;
dateParser = d3.timeParse("%Y-%m-%d");
query = year + "-" + month
viewof year = Inputs.select(["2020", "2021", "2022"], {label: "Year"})
viewof month = Inputs.select(["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"], {label: "Month"})
casos_x_100k = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("id", "container");
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis_100k);
svg.append("g")
.call(grid);
svg.append("g").selectAll("circle")
.data(current)
.join("circle")
.attr("cx", d => x(d.avg_risk_estimate))
.attr("cy", d => y_100k(d.cases_x_100k))
.attr("r", d => radius(d.population))
.style("fill", "steelblue")
.style("opacity", "0.7")
.call(circle => circle.append("title")
.text(d => d.localidad));
return svg.node()
}
x = d3.scaleLinear([0, 10], [margin.left, width - margin.right]); // riesgo
y = d3.scaleLinear().domain([0, d3.max(current, d => d.cases)]).range([height - margin.bottom, margin.top]);
y_100k = d3.scaleLinear([0, d3.max(current, d => d.cases_x_100k)], [height - margin.bottom, margin.top]);
radius = d3.scaleLinear([0, d3.max(current, d => d.population)], [8, 32]);
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.
