Public
Edited
Dec 17, 2023
chart1 = {
let svg = getSvg();
svg.update = function (shift) {
svg
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", (d) => d * 40 + 100 + shift)
.attr("cy", 50)
.attr("fill", "steelBlue")
.attr("opacity", 0.5)
.attr("r", 30);
svg
.selectAll("text")
.data(data)
.join("text")
.attr("x", (d) => d * 40 + 100 + shift)
.attr("y", 50)
.style("text-anchor", "middle") // centers horizontally
.style("dominant-baseline", "middle") // centers vertically
.attr("fill", "black")
.text((d) => d);
};
return svg;
}
{
let x = chart1;
x.update(50);
x.update(150);
return x.node();
}
chart2 = {
let svg = getSvg();
svg.update = function (shift) {
let g = svg.selectAll("g").data(data).join("g");
g.append("circle")
.data(data)
.join("circle")
.attr("cx", (d) => d * 40 + 100 + shift)
.attr("cy", 50)
.attr("fill", "steelBlue")
.attr("opacity", 0.5)
.attr("r", 30);
g.append("text")
.data(data)
.join("text")
.attr("x", (d) => d * 40 + 100 + shift)
.attr("y", 50)
.style("text-anchor", "middle") // centers horizontally
.style("dominant-baseline", "middle") // centers vertically
.attr("fill", "black")
.text((d) => d);
};
return svg;
}
{
let x = chart2;
x.update(50);
x.update(150);
return x.node();
}
chart3 = {
let svg = getSvg();
svg.update = function (shift) {
let g = svg
.selectAll("g")
.data(data)
.join(
(enter) => {
let g = enter.append("g");
g.append("circle")
.attr("cx", (d) => d * 40 + 100 + shift)
.attr("cy", 50)
.attr("fill", "steelBlue")
.attr("opacity", 0.5)
.attr("r", 30);
g.append("text")
.attr("x", (d) => d * 40 + 100 + shift)
.attr("y", 50)
.style("text-anchor", "middle") // centers horizontally
.style("dominant-baseline", "middle") // centers vertically
.attr("fill", "black")
.text((d) => d);
},
(update) => {
update
.select("circle")
.attr("cx", (d) => d * 40 + 100 + shift)
.attr("cy", 50)
.attr("fill", "steelBlue")
.attr("opacity", 0.5)
.attr("r", 30);
update
.select("text")
.attr("x", (d) => d * 40 + 100 + shift)
.attr("y", 50)
.style("text-anchor", "middle") // centers horizontally
.style("dominant-baseline", "middle") // centers vertically
.attr("fill", "black")
.text((d) => d);
},
(exit) => exit.remove()
);
};
return svg;
}
{
let x = chart3;
x.update(50);
x.update(150);
return x.node();
}
chart4 = {
let svg = getSvg();
svg.update = function (shift) {
const updateElements = (selection) => {
selection
.selectAll("circle")
.attr("cx", (d) => d * 40 + 100 + shift)
.attr("cy", 50)
.attr("fill", "steelBlue")
.attr("opacity", 0.5)
.attr("r", 30);
selection
.selectAll("text")
.attr("x", (d) => d * 40 + 100 + shift)
.attr("y", 50)
.style("text-anchor", "middle")
.style("dominant-baseline", "middle")
.attr("fill", "black")
.text((d) => d);
};
let g = svg
.selectAll("g")
.data(data)
.join(
(enter) => {
let gEnter = enter.append("g");
gEnter.append("circle");
gEnter.append("text");
updateElements(gEnter);
},
(update) => updateElements(update),
(exit) => exit.remove()
);
};
return svg;
}
{
let x = chart4;
x.update(50);
x.update(150);
return x.node();
}
getSvg = () => {
let svg = d3
.create("svg")
.attr("width", 500)
.attr("height", 100)
.attr("font-family", "sans-serif")
.attr("font-size", "12px");
return svg;
}
data = d3.range(5)
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.
