md`Starting with the data.`
radio_scatter = {
const svg = d3.select(DOM.svg(width, height));
//Create circles
var allCircles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale2(d[0]);
})
.attr("cy", function(d) {
return yScale2(d[1]);
})
.attr("r", 2.5);
//Create X axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (height - padding) + ")")
.call(xAxis);
//Create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
//On radio button change, update styling
d3.selectAll("input[type='radio']")
.on("click", function() {
allCircles.attr("fill", "black")
.filter(function(d) {
return d[0] <= +r;
})
.attr("fill", "red");
});
return svg.node();
}
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.
