content = md`${lorem}`
Public
Edited
Dec 5
1 fork
1 star
curtainCount = 12
interlude = d3.select(DOM.element('div'))
.on("click", function() {
const { layerX, layerY } = d3.event;
d3.select(this).selectAll('defs mask circle')
.attr('r', 0)
.attr("cx", layerX)
.attr("cy", layerY)
.transition()
.delay((d, i) => i * 50)
.ease(d3.easeCubicInOut)
.duration(1000)
.attr("r", (d, i) => width - i * 10);
})
.call(div => div.selectAll('svg')
.data(d3.range(curtainCount))
.join('svg')
.call(curtain))
.node()
curtain = s => s
.attr("width", "100%")
.attr("height", "100%")
.attr("style", (d, i) => `
z-index: ${curtainCount - d};
`)
.call(s => s.append('defs').call(defs))
.call(s => s.append('rect').call(rect))
html`<style>
svg {
position: absolute;
top: 0; left: 0;
}
svg:last-child {
filter: drop-shadow(-2px 2px 6px rgba(50, 50, 0, 0.4));
}
</style>`
defs = d => d
.call(d => d
.append('mask')
.attr('id', (d, i) => `mask-${i}`)
.call(m => m
.append('rect')
.attr('width', '100%')
.attr('height', '100%')
.attr('fill', 'white'))
.call(m => m
.append('circle')
.attr('r', 0)
.attr('cx', 0)
.attr('cy', 0)
.attr('fill', 'black')))
rect = r => r
.attr('width', "100%")
.attr('height', "100%")
.attr('mask', (d, i) => `url(#mask-${i})`)
.attr('fill', fill)
fill = d3.scaleSequential(d3.interpolateCool).domain([0, curtainCount]);
text = html`<div>${md`${lorem}`}</div>`
lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nulla justo, fringilla et quam at, sodales tincidunt erat. Vestibulum ullamcorper tortor lectus, vel fringilla dolor consequat sed. Nullam sollicitudin id ipsum at cursus. Etiam nulla nisl, laoreet sit amet odio id, rutrum bibendum libero. Integer hendrerit, enim a tincidunt volutpat, enim libero lobortis nulla, ac ultrices velit ante quis est. Duis ultricies, mauris non bibendum dictum, libero dolor accumsan libero, in ultrices dui tortor vitae justo. Vivamus convallis id nisi sed interdum. Donec pulvinar [suscipit justo](javascript:void(0)), vitae lacinia ipsum tincidunt id. Etiam augue ex, convallis a cursus eget, dictum auctor dolor. In posuere feugiat dui id vestibulum. Vivamus non justo aliquam velit varius aliquam. Phasellus eu molestie nisl. Donec ullamcorper risus quam, a commodo neque vulputate vel.
Fusce suscipit scelerisque nisl, nec ullamcorper libero dapibus sed. Proin sit amet scelerisque sem. Aenean a nulla eu felis fringilla mollis nec nec augue. Vivamus id volutpat quam. Maecenas nisi metus, dictum ut sem sit amet, interdum pellentesque justo. In quis volutpat velit. Aliquam quis cursus dolor. Proin at aliquam sapien. Ut vestibulum nulla ut sapien ultrices, egestas cursus orci vulputate. Etiam tempor massa eget est placerat, sit amet egestas metus blandit. Nullam posuere elit metus. Sed eget semper dui, et sagittis ipsum. Quisque lorem nulla, bibendum non rhoncus eu, pharetra eget justo. Fusce tempor varius nisi vel ornare. Nam a lorem nulla. Pellentesque condimentum sem in turpis maximus, non viverra felis rhoncus.`
height = 300
d3 = require("d3@5")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.