# In order to visualize concepts, we need to isolate specific ideas, identify underlying data structures, and leverage corresponding algorithms.

## Bouncing

### What algorithms are necessary to express this data?

``````// Select circles inside the svg and bind data to the selection
var bubbles = mySvg.selectAll('circle')
.data(myData);

// Use D3.js to create and position circles
bubbles
.enter()
.append("circle")
.attr("cx", (d) => xScale(d.x))
.attr("cy", (d) => yScale(d.y))
// Merge (updating) circles and stage a transition
.merge(bubbles)
.transition()
.delay(() => Math.random() * 50)
.ease(d3.easeBounce)
.attr("cx", (d) => xScale(d.x))
.attr("cy", (d) => yScale(d.y))``````

## Bouncing

### What algorithms are necessary to express this data?

``````// D3.js bouncOut algorithm
var b1 = 4 / 11,
b2 = 6 / 11,
b3 = 8 / 11,
b4 = 3 / 4,
b5 = 9 / 11,
b6 = 10 / 11,
b7 = 15 / 16,
b8 = 21 / 22,
b9 = 63 / 64,
b0 = 1 / b1 / b1;

export function bounceOut(t) {
return (t = +t) < b1 ? b0 * t * t :
t < b3 ? b0 * (t -= b2) * t + b4 :
t < b6 ? b0 * (t -= b5) * t + b7 :
b0 * (t -= b8) * t + b9;
}
``````