Codu_presentation

Codu_presentation

A scatterplot of fruit-flavored water ratings animates its points into random positions on load. The visualization maps data showing whether each option is worse or better than water, with points colored by category such as orange, lemon, lime, and cucumber. Built with Svelte, it uses d3's scaleLinear and extent to position SVG circles along axes, while GSAP's gsap.to applies a bounce-out easing to displace each circle. Hover states are defined but not displayed.

74% match

scrollytest3

This scrolling visualization demonstrates a step-through narrative experience where sections of text are fixed to the left while a graph animates on the right, guided by the user's scroll position. Built with D3 v4 and the d3-dsv module for data parsing, it uses the graph-scroll library to trigger animated transitions between steps as the reader scrolls. The SVG rendering includes smooth, state-driven updates, likely showing a dataset that changes or highlights different aspects with each section. The design focuses on storytelling with data, letting the scroll control the flow of the visualization.

335degrees

71% match

Fork of Codu exercise 2

This visualization displays monthly homelessness figures in Dublin from July 2014 to June 2024, plotting total numbers over time with individual data points rendered as circles. The chart uses a dark background with white axis lines and text, and circles that expand on hover for interactivity. Built with Svelte and SVG, the code leverages d3's `scaleTime`, `scaleLinear`, and `line` functions for scaling and plotting, while gsap handles the hover animations.

71% match

Fork of Codu exercise 2

71% match

Codu demo

A scatterplot maps orange, lemon, lime, and cucumber data points from a CSV file along two axes that measure whether fruit-flavored water is perceived as worse or better than plain water. Each circle, rendered with Svelte and SVG, uses a random radius and displays its group label on hover. The visualization uses D3's `scaleLinear` and `extent` to position the points, with `autoType` parsing the data.

scrollytest1

This interactive scrollytelling visualization demonstrates the interplay between scrolling and data-driven graphics, built with D3 v4 and the graph-scroll library. The page uses a fixed-position chart that updates as the user scrolls through sections, with transitions between states driven by scroll position. The visualization leverages d3-dsv to parse tabular data, rendering it as an SVG/WebGL animation. As the user scrolls, the active section triggers changes in the displayed chart, creating a narrative flow. The design uses a clean, minimal aesthetic with the chart fixed on screen while text scrolls, and it supports both fixed and below-fold layouts for responsive storytelling.

335degrees

scrollytest3

This example demonstrates a scrolling narrative visualization built with D3.js, where user scroll progress drives animated transitions in an SVG/WebGL-rendered scene. The chart uses the `graph-scroll` library to bind scroll events to step-wise updates, likely revealing or transitioning between data states as the reader moves through the page. The visualization is generated from a Blockbuilder.org template and is part of a series of scrolling prototypes (scrollytest1/2), indicating iterative exploration of scroll-driven storytelling. Rendered with SVG and WebGL, it combines D3 v4 with jetpack utilities for concise coding. The MIT-licensed example shows how scrolling can act as an interactive narrative mechanism to sequence changes in the visualization.

335degrees

Svelte app

A real-time animated wave of 50 circles and connecting lines renders in an SVG, with vertical positions computed by a sinusoidal function of time. The Svelte 3 component uses `requestAnimationFrame` to update the array of numbers each frame, while `{#each}` blocks bind the data to circle and line elements. This experiment demonstrates reactive updates in Svelte for smooth, declarative animation without explicit DOM manipulation.

CCurran Kelleher