chart = { const container = html `

Data is from OurWolrd in Data. It's about the average life expectancy of male and female in 284 countries. This is 1950's data

However, in the 2020s, the average life expectancy moved above 50 years old

` const svg = d3.select(container).append("svg") .attr("id", "chart") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") const marginTop = 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels inset = 12 const xRange = [marginLeft + inset, width - marginRight - inset] const yRange = [height - marginBottom - inset, marginTop + inset] //////////////////// Scales //////////////////// const xScale = d3.scaleLinear(d3.extent(d3.map(data, d => d.female)), xRange) const yScale = d3.scaleLinear(d3.extent(d3.map(data, d => d.male)), yRange) //////////////////// circles //////////////////// const circles = 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") //////////////////// Axis //////////////////// const yAxis = svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(yScale).ticks(height / 50)) .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 xAxis = svg.append("g") .attr("transform", `translate(0, ${height - marginTop})`) .call(d3.axisBottom(xScale)) .call(g => g.append("text") .attr("x", 0) .attr("y", 10) .attr("text-anchor", "middle") ) //////////////////// Scrolling Animation //////////////////// function enterAnimation() { circles .transition() .duration(1500) .attr("cx", (d, i) => { // console.log(data[i * 2]) return 2 * i + 1 <= 406 ? xScale(data[i * 2 + 1].female):null }) .attr("cy", (d, i) => { // console.log(data[i * 2]) return 2 * i + 1 <= 406 ? yScale(data[i * 2 + 1].male):null }) .style('opacity', 0.5) yScale.domain(d3.extent(d3.map(data.filter(d => d.Year == 2020), d => d.male))) yAxis .transition() .delay(1500) .duration(1000) .call(d3.axisLeft(yScale)) xScale.domain(d3.extent(d3.map(data.filter(d => d.Year == 2020), d => d.female))) xAxis.transition() .delay(1500) .duration(1000) .call(d3.axisBottom(xScale)) circles .transition() .delay(1500) .duration(1500) .attr("cx", (d, i) => { // console.log(data[i * 2]) return 2 * i + 1 <= 406 ? xScale(data[i * 2 + 1].female):null }) .attr("cy", (d, i) => { // console.log(data[i * 2]) return 2 * i + 1 <= 406 ? yScale(data[i * 2 + 1].male):null }) .style('opacity', 0.5) } function enterBackAnimation() { // circles // .transition() // .duration(1500) // .attr("cx", d => xScale(d.female)) // .attr("cy", d => yScale(d.male)) // .style('opacity', 0.5) yScale.domain(d3.extent(d3.map(data, d => d.male))) yAxis .transition() .duration(1000) .call(d3.axisLeft(yScale)) xScale.domain(d3.extent(d3.map(data, d => d.female))) xAxis.transition() .duration(1000) .call(d3.axisBottom(xScale)) circles .transition() .delay(1500) .duration(1500) .attr("cx", (d, i) => { // console.log(data[i * 2]) return 2 * i <= 406 ? xScale(data[i * 2].female):null }) .attr("cy", (d, i) => { // console.log(data[i * 2]) return 2 * i <= 406 ? yScale(data[i * 2].male):null }) .style('opacity', 0.5) } return Object.assign(container, { enterAnimation, enterBackAnimation }) }