The avatar for @d3
D3
Bring your data to life.
Published
Edited
Aug 27, 2020
Fork of Easing Graphs
•
2 forks
Importers
56 stars
d3-ease
transition.easeVarying
Easing Animations
Easing Graphs
Also listed in…
d3-transition
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function chart(ease, invalidation) {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("max-width", `${width}px`)
.style("overflow", "visible")
.style("cursor", "pointer")
.on("click", () => animate(0));

const circle = svg.append("circle")
.attr("cx", x(0))
.attr("cy", (height - margin.bottom + margin.top) / 2)
.attr("r", 12);

svg.append("g")
.call(xAxis);

function animate(delay) {
circle.transition()
.ease(ease)
.delay(delay)
.duration(1500)
.attrTween("r", () => (circle.attr("r", 12), null))
.attrTween("cx", () => x)
.transition()
.delay(1500)
.duration(250)
.ease(d3.easeCubicIn)
.attr("r", 0)
.transition()
.attr("cx", x(0))
.transition()
.ease(d3.easeCubicOut)
.attr("r", 12);
}

const observer = new IntersectionObserver(entries => {
const entry = entries.pop();
if (entry.intersectionRatio >= 0.9) animate(500);
else if (entry.intersectionRatio <= 0) circle.interrupt();
}, {
threshold: [0, 0.9]
});

observer.observe(svg.node());
invalidation.then(() => observer.disconnect());
return svg.node();
}
Insert cell
x = d3.scaleLinear().range([margin.left, width - margin.right])
Insert cell
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom + 6})`)
.call(d3.axisBottom(x.copy().interpolate(d3.interpolateRound)).ticks(width / 60))
.call(g => g.select(".domain").remove())
.call(g => g.selectAll(".tick line").clone()
.attr("stroke-opacity", 0.1)
.attr("y1", margin.bottom + margin.top - height - 12))
Insert cell
width = 640
Insert cell
height = 48
Insert cell
margin = ({top: 10, right: 20, bottom: 20, left: 30})
Insert cell
d3 = require("d3@6")
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