// a stack container - big rectangle element
// keep a variable named stack_size representing the number of elements in the stack right now (keep track of the y-position for the necxt rectangle in svg)
// constant variable that keeps track of the height of the stack container
// constant variable for the height of a stack element
// constant for the width of the rectangle
d3 = require("d3@7")
viewof button = Inputs.button("Step through", {})
chart = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
svg
.append("rect")
.attr("x", 500)
.attr("y", 100)
.attr("width", 100)
.attr("height", 200)
.attr("stroke", "black")
.attr("stroke-width", 3)
.attr("fill", "none");
var rsp = svg
.append("g")
.attr("transform", "translate(500, 270)");
rsp
.append("rect")
.attr("width", 100)
.attr("height", 30)
.attr("stroke", "black")
.attr("stroke-width", 3)
.attr("fill", "none");
rsp
.append("text")
.text("%rsp")
.attr("y", 15)
.attr("x", 50)
.attr("alignment-baseline", "middle")
.attr("text-anchor", "middle");
var stack_element = svg
.append("g")
.attr("transform", "translate(500, 3)");
stack_element
.append("rect")
.attr("width", 100)
.attr("height", 30)
.attr("stroke", "black")
.attr("stroke-width", 3)
.attr("fill", "none");
stack_element
.append("text")
.text("element1")
.attr("y", 15)
.attr("x", 50)
.attr("alignment-baseline", "middle")
.attr("text-anchor", "middle");
stack_element
.transition()
.attr("transform", "translate(500, 270)")
.duration(2500);
// can you pls check ur email and send me the verification num?
rsp
.transition()
.attr("transform", "translate(500, 240)")
.duration(2500);
return svg.node();
}
height = 350
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.
