html `
<style>
#scroll {
overflow-y:scroll;
}
.panel.blue {
height: 800px;
background-color: lightblue
}
.panel.orange {
height: 400px;
background-color: orange
}
circle.animated_circles{
// mix-blend-mode: screen;
}
</style>
`
chartGSAPTween = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto; height: intrinsic;")
// function chart_animate() {
// const gEle = document.getElementById('chart-container')
// svg.removeChild(gEle)
svg.append("g")
.attr("id", "chart-container")
.attr("stroke", "none")
.attr("stroke-width", 2)
.selectAll("circle")
.data(data.filter(d => d.Year == 1950))
.join("circle")
.attr("class", "animated_circles")
.attr("cx", d => xScale(d.female))
.attr("cy", d => yScale(d.male))
.attr("opacity", 0.5)
.attr("r", 10)
.attr("fill", d => d.female > 60 && d.male > 60 ? "#B3806D": "#FCCE7C")
const yAxis = d3.axisLeft(yScale).ticks(height / 50)
svg.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(yAxis)
.call(g => g.select(".domain").remove())
.call(g => g.selectAll(".tick line").clone()
.attr("x2", width - marginLeft - marginRight)
.attr("stroke-opacity", 0.1))
.call(g => g.append("text")
.attr("x", -marginLeft)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start"))
const timeline = gsap.timeline()
timeline
.to(svg.node().querySelectorAll('circle.animated_circles'),{
cx: (i, target) => {
// console.log(data[i * 2])
return 2 * i + 1 <= 406 ? xScale(data[i * 2 + 1].female):null
},
cy: (i) => 2 * i + 1 <= 406 ? yScale(data[i * 2 + 1].male):null,
fill: (i) => data[i * 2 + 1].female > 60 && data[i * 2 + 1].male > 60 ? "#B3806D": "#FCCE7C",
duration: 2,
yoyo: true,
repeat: -1
})
// .to("#chart-container", {
// scale: 1.8,
// transformOrigin: "top right",
// duration: 2
// })
return svg.node()
}
yScale1950 = d3.scaleLinear(yDomain1950, yRange)
yScale1950.ticks(10)
yScale2020 = d3.scaleLinear(yDomain2020, yRange)
yScale2020.ticks()
yScale = d3.scaleLinear(yDomain, yRange)
xScale = d3.scaleLinear(d3.extent(d3.map(data, d => d.female)), xRange)
height = 500
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.
