scatter = {
{
let xAxis = plotScatter.querySelectorAll('[aria-label="x-axis"] text')
let xText = xAxis[xAxis.length- 1]
let yAxis = plotScatter.querySelectorAll('[aria-label="y-axis"] text')
let yText = yAxis[yAxis.length- 1]
let plotCircles = plotScatter.querySelectorAll('circle')
let axis = plotScatter.querySelectorAll('.tick')
let sepalButton = document.getElementById("sepal")
let petalButton = document.getElementById("petal")
gsap.set(yText, {opacity: 0})
gsap.set(xText, {opacity: 0})
gsap.set(plotCircles, {opacity: 0})
gsap.set(axis, {opacity: 0})
gsap.registerPlugin(TextPlugin);
function renderAxis() { gsap.to(axis, {opacity:1, ease: 'back'}) }
sepalButton.onclick = () => {
renderAxis()
gsap.to('circle', {
delay: .5,
duration: 2,
opacity: 1,
cx: index => xScale(flowerData[index]["sepalLength"]),
cy: index => yScale(flowerData[index]["sepalWidth"]),
ease: "circ"
})
gsap.to(xText, {text:"sepalLength →", opacity:1})
gsap.to(yText, {text:"↑ sepalWidth", opacity:1})
}
petalButton.onclick = () => {
renderAxis()
gsap.to('circle', {
delay: .5,
duration: 2,
opacity: 1,
cx: index => xScale(flowerData[index]["petalLength"]),
cy: index => yScale(flowerData[index]["petalWdith"]),
ease: "circ"
})
gsap.to(xText, {text:"petalLength →"})
gsap.to(yText, {text:"↑ petalWidth"})
}
}
}