{
const svg = d3.select(DOM.svg(width, height))
.style("width", width)
.style("height", height)
svg
.append("g")
.attr("class", "bottom")
.attr("transform", "translate(0," + (height-margin.bottom) + ")")
.call(d3.axisBottom(x));
svg.append("g")
.attr("class", "left")
.attr("transform", "translate("+ (margin.left) + ",0)")
.call(d3.axisLeft(y));
svg.append("circle")
.attr("cx", x(movingX))
.attr("cy", y(movingY))
.attr("r",5)
.style("fill", "black")
.style("stroke","black")
const line = d3.line()
.x(function(d) { return x(d[0]); })
.y(function(d) { return y(d[1]); })
svg.append("path")
.attr("d",line(pathCoordinates))
.style("fill", "none")
.style("stroke","black")
/* var count = 0;
while (movingX < 636) {
var status = 0;
for (var i = 0; i < count; i++) {
if ([movingX, movingY] == figureData[i][i])
status = 1
}
if (status = 0)
figureData.push([movingX, movingY])
count++;
}
*/
yield svg.node()
}
pathCoordinates = [[0,220], [195, 220], [215, 110], [325, 110], [340,220], [640,220]]
draw = {
const svg = d3.select(DOM.svg(width, height))
const path = svg.append("path")
.attr("d",d3.line()(pathCoordinates))
return path.node()
}
l = draw.getTotalLength();
timer = {
for (var i = 0; i < parseInt(l); ++i) {
yield i = (i==(parseInt(l)-2)) ? 0 : i;
}
}
movingX = { yield draw.getPointAtLength(timer).x }
movingY = { yield draw.getPointAtLength(timer).y }
x = d3.scaleLinear()
.domain(d3.extent(pathCoordinates,(d,i)=>d[0]))
.range ([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain(d3.extent(pathCoordinates,(d,i)=>d[1]))
.range ([ height - margin.bottom, margin.top ])
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.
