scrollytest6
This example, titled "scrollytest6," is an animated, scroll-driven data visualization that combines SVG and WebGL rendering within the D3.js framework. The visualization demonstrates a technique for synchronizing narrative content with user scrolling, likely transitioning between different chart states or datasets as the user progresses through the page. The visualization uses D3's data parsing capabilities (d3-dsv) and custom scroll-handling logic to create a dynamic, story-telling experience. The rendering is hybrid: SVG is used for crisp, interactive elements while WebGL handles performance-intensive graphics, with animations smoothly tying the scroll steps together. The example is part of a series of scroll-based experiments by the author 35degrees, building upon earlier iterations (scrollytest1-5) to refine the technique. The visualization is built with D3 and licensed under MIT.
AI-generated descriptionBuilt with blockbuilder.org
forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/e0f50f869689d25fc21b0456bdf77438'>scrollytest1</a>
forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/1760613608a5d8a62a7014fceb2176ed'>scrollytest2</a>
forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/8e0b1f092acfc25321a0207b10918273'>scrollytest3</a>
forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/82fb82f44dce1d3f2da793cc5b76fa19'>scrollytest5</a>