Public
Edited
Jan 1, 2023
Paused
4 forks
1 star
<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>
three_circles = 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>`
styled_circles = {
const cloned_svg = three_circles.cloneNode(true);
const circle = d3.select(cloned_svg).selectAll("circle");
circle.style("fill", "steelblue");
circle.attr("r", 30);
return cloned_svg;
}
{
const cloned_svg = styled_circles.cloneNode(true);
const circle = d3.select(cloned_svg).selectAll("circle");
circle.attr("cx", function() { return Math.random() * 720; });
return cloned_svg;
}
{
const cloned_svg = styled_circles.cloneNode(true);
const circle = d3.select(cloned_svg).selectAll("circle");
while (true) {
circle.attr("cx", function() { return Math.random() * 720; });
await Promises.tick(2000);
yield cloned_svg;
}
}
circles_with_data = {
const cloned_svg = styled_circles.cloneNode(true);
const circle = d3.select(cloned_svg).selectAll("circle");
circle.data([32, 57, 112]);
circle.attr("r", function(d) { return Math.sqrt(d); });
return cloned_svg;
}
{
const cloned_svg = circles_with_data.cloneNode(true);
const circle = d3.select(cloned_svg).selectAll("circle");
circle.attr("cx", function(d, i) { return i * 100 + 30; });
return cloned_svg;
}
{
var svg = d3.create("svg")
.attr("width", 720)
.attr("height", 120);
var circle = svg.selectAll("circle")
.data([32, 57, 112, 293]);
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); });
return svg.node();
}
four_circles = {
const svg = d3.create("svg").attr("width", 720).attr("height", 120);
svg.selectAll("circle")
.data([32, 57, 112, 293])
.enter().append("circle")
.attr("cy", 60)
.attr("cx", function(d, i) { return i * 100 + 30; })
.attr("r", function(d) { return Math.sqrt(d); });
return svg.node();
}
two_circles = {
var cloned_svg = four_circles.cloneNode(true);
var circle = d3.select(cloned_svg).selectAll("circle")
.data([32, 57]);
circle.exit().remove();
return cloned_svg;
}
{
var cloned_svg = two_circles.cloneNode(true);
var circle = d3.select(cloned_svg).selectAll("circle")
.data([32, 57, 293], function(d) { return d; });
circle.enter().append("circle")
.attr("cy", 60)
.attr("cx", function(d, i) { return i * 100 + 30; })
.attr("r", function(d) { return Math.sqrt(d); });
circle.exit().remove();
return cloned_svg;
}
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.
