Published
Edited
Mar 30, 2021
3 stars
md `### Chaining transitions`
md `### on.end()
`
{
const [svgNode, svg] = getSVG(400, 200, 0, true);
const startRad = 20, endRad = 75;
const startColor = "black", endColor = "steelBlue";
const startTransform = "translate(75, 100)", endTransform = "translate(325, 100)";
const circle = svg.append("circle").attr("r",startRad).attr("transform",startTransform).style("color","black");
d3.select("#start2").on("click", function(){
circle
.transition()
.ease(d3[easing])
.duration(timeControl.duration)
.delay(timeControl.delay)
.attr("transform",endTransform)
.transition()
.attr("r",endRad)
.transition()
.attr("fill",endColor)
.on("end", function(){
circle
.transition()
.ease(d3[easing])
.duration(timeControl.duration)
.delay(timeControl.delay)
.attr("transform",startTransform)
.transition()
.attr("r",startRad)
.transition()
.attr("fill",startColor)
})
})
return svgNode;
}
mutable feedback = ""
md `### External Libraries and Imports`
import {getSVG} from "@spattana/topojson-and-geovisualization"
import {Button, Checkbox, Toggle, Radio, Range, Select, Text, Textarea, Search, Table} from "@observablehq/inputs"
import {columns} from "@bcardiff/observable-columns"
d3 = require("d3@6")
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.
