first_circles = { return htl.html`<svg width="720" height="120">
<circle cx="40" cy="60" r="10"></circle>
<circle cx="80" cy="60" r="10"></circle>
<circle cx="120" cy="60" r="10"></circle>
</svg>` }
s = {
var circle = d3.select(first_circles).selectAll("circle") // selection of circles
.style("fill", "crimson") // still the previous update selection
.data([32, 57, 112, 90]) // update selection of data
.attr("r", d => Math.sqrt(d)) // still the previous update selection
.enter().append("circle")
.style("fill", "blue")
.attr("r", (d) => Math.sqrt(d))
.attr("cy", 60)
.attr("cx", (d, i) => i * 100 + 30)
return circle;
}
s.enter().append("circle")
.style("fill", "blue")
.attr("r", d => Math.sqrt(d))
.attr("cy", 60)
.attr("cx", (d, i) => i * 100 + 30)
s = {s.enter().selectAll("circle")
.remove()
.exit()
}
my_circles = { return htl.html`<svg width="720" height="120">
<circle cx="40" cy="60" r="10"></circle>
<circle cx="80" cy="60" r="10"></circle>
<circle cx="120" cy="60" r="10"></circle>
</svg>` }
{
var circle = d3.select(my_circles).selectAll("circle") // selection of circles
.style("fill", "crimson") // still the previous update selection
.data([32, 57, 112, 90]) // update selection of data
.attr("r", d => Math.sqrt(d)) // still the previous update selection
return circle;
}
{
var svg = d3.select(my_circles)
var circle = svg.selectAll("circle")
.data([32, 57, 112, 200, 400])
var circleEnter = circle.enter().append("circle");
circleEnter.attr("cy", 60);
circleEnter.attr("cx", function(d, i){ return i * 100 + 30; });
circleEnter.attr("r", function(d) { return Math.sqrt(d); });
}
{
var svg = d3.select(my_circles);
var circle = svg.selectAll("circle")
.data([32, 57, 112, 293]);
var circleEnter = circle.enter().append("circle")
.attr("cy", 60)
.attr("cx", function(d, i) { return i * 100 + 30; })
.attr("r", function(d) { return Math.sqrt(d); });
}
viewof color_select_3 = Inputs.select(["steelblue", "crimson"], {label: "Color:"})
viewof data_input = Inputs.text({label: "Data", value: "32, 57, 112, 293"})
circle_3 = {
// Citation: https://stackoverflow.com/questions/16396124/how-to-convert-comma-separated-string-into-numeric-array-in-javascript
var my_data = data_input.split(",").filter(x => x.trim().length && !isNaN(x)).map(Number)
var svg = d3.select(my_circles_3);
var circle = svg.selectAll("circle").data(my_data);
circle.style("fill", color_select_3);
// I think adding this line fixed it, but I don't know why...
circle.attr("r", function(d) { return Math.sqrt(d); });
var circleEnter = circle.enter().append("circle");
circleEnter.attr("cy", 60)
.attr("cx", function(d, i) { return i * 100 + 30; })
.attr("cy", 60)
.attr("r", function(d) { return Math.sqrt(d); });
circle.exit().remove();
return circle;
}
circle_3.data()
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.
