Passionate about viz & systems thinking. Stanford CS 2017
bottleWithDrawsSVG = {
// Constants
const milkBottleInfo = {
width: 100,
height: 300,
d:
"M74.9913 23.3778C75.9705 10.353 80.2138 0 80.2138 0H19.1762C19.1762 0 23.4195 6.3454 24.7251 23.3778C26.0307 40.4102 19.1762 52.767 14.2802 57.1086C9.38411 61.4502 2.85603 68.4636 1.22401 72.4712C-0.408012 76.4788 -0.407994 251.478 1.22401 272.852C2.85601 294.226 43.6565 300.906 52.7958 299.904C61.9352 298.902 95.8812 294.894 98.4924 272.852C101.104 250.81 99.798 76.1449 98.4924 72.4712C97.1867 68.7975 91.9643 63.1201 86.089 57.1086C80.2138 51.0972 74.0121 36.4026 74.9913 23.3778Z"
};
const strawPivot = { x: 70, y: 30 };
const strawEndpoint = 300;
const strawCoords = [
[0, 0],
[strawPivot.x, strawPivot.y],
[strawPivot.x, strawEndpoint],
[strawPivot.x, strawPivot.y],
[0, 0.1]
];
const SCALE_FACTOR = 0.67;
const bbWidth = 100;
const bbHeight = 300;
const COLORS = {
purple: '#AE71DF',
gold: '#EFCE59'
};
const introAnimation = (
selectedElement,
tweenFn,
reduceFactor = 0.05,
duration = 900
) => {
const expandFullyAndPresentPage = () => {
const currD = selectedElement.attr('d');
selectedElement
.transition()
.duration(duration)
.attrTween('d', () => flubber.interpolate(currD, tweenFn(1)))
.on('end', () => {
d3.select('.main-content-container')
.transition()
.duration(900)
.style('opacity', 1);
});
};
selectedElement
.transition()
.duration(duration)
.ease(d3.easeBackInOut)
.style('opacity', 1)
.attrTween('d', () => progress => tweenFn(reduceFactor * progress))
.on('end', () => {
selectedElement
.transition()
.delay(250 * Math.random())
.duration(duration)
.attrTween('d', () => progress =>
tweenFn(reduceFactor * (1 - progress))
)
.on('end', () => expandFullyAndPresentPage());
});
};
// Actual SVG elements:
const svg = d3
.create("svg")
.attr(
"viewBox",
`${bbWidth / 2} 0 ${SCALE_FACTOR * bbWidth} ${SCALE_FACTOR * bbHeight}`
)
.style('padding', '24px')
.style('overflow', 'visible');
const bottleAndStrawsGroup = svg
.append('g')
.attr('transform', 'translate(-10 -40)');
const milkBottleTweenFn = flubber.fromCircle(100, 100, 10, milkBottleInfo.d);
const milkBottle = bottleAndStrawsGroup
.append('path')
.attr('class', 'milk-bottle')
.attr('transform', 'translate(10 40)')
.attr('fill', '#fff')
.style('opacity', 0)
.attr('stroke-width', '8px');
introAnimation(milkBottle, milkBottleTweenFn);
const STRAW_STROKE = 8;
const straw1TweenFn = flubber.fromCircle(100, 100, 10, strawCoords);
const straw1 = bottleAndStrawsGroup
.append('path')
.attr('fill', COLORS.purple)
.attr('opacity', 0)
.attr('stroke', COLORS.purple)
.attr('stroke-width', STRAW_STROKE);
introAnimation(straw1, straw1TweenFn);
const straw2TweenFn = flubber.fromCircle(10, 10, 10, strawCoords);
const straw2 = bottleAndStrawsGroup
.append('path')
.attr('transform', 'translate(120 10) scale(-1,1)')
.attr('fill', COLORS.gold)
.attr('opacity', 0)
.attr('stroke', COLORS.gold)
.attr('stroke-width', STRAW_STROKE);
introAnimation(straw2, straw2TweenFn);
return svg;
}
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.
