Public
Edited
Nov 2, 2022
1 fork
4 stars
Insert cell
Insert cell
Insert cell
Insert cell
plotScatter = {
return Plot.plot({
x: {
domain: [0,10]
},
y: {
domain: [0,10]
},
marks: [

Plot.dot(flowerData, {x: "sepalLength", y: "sepalWidth"})
]
})

}
Insert cell
scatter = {
{

/////Selections/////
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")

/////Set the text opacity to 0////
gsap.set(yText, {opacity: 0})
gsap.set(xText, {opacity: 0})
gsap.set(plotCircles, {opacity: 0})
gsap.set(axis, {opacity: 0})

////Register TextPlugin/////
gsap.registerPlugin(TextPlugin);


function renderAxis() { gsap.to(axis, {opacity:1, ease: 'back'}) }
////Question Time/////
//Do we make a timeline? Do we put our animation directly in the buttons?


sepalButton.onclick = () => {
renderAxis()
gsap.to('circle', {
delay: .5,
duration: 2,
opacity: 1,
cx: index => xScale(flowerData[index]["sepalLength"]), //access the index unlike data
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"})
}

}

}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more