Untitled

100%

✓ Published0🌍 Public

Last edited Nov 3, 2021

Created on Nov 2, 2021

This interactive scrollytelling visualization tells the story of a 2017 San Diego Data Visualization meetup, summarizing attendance, device types, and age ranges. As the user scrolls, animated SVG grids and bar charts transition with elastic easing, using D3.js v3 for data joins and transitions, while Waypoints triggers each scene. The data is generated with `d3.range` and random age values, rendered as colored rectangles and text labels.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Untitled

An interactive 3D bar chart displays floating cubes of varying heights on a grid, rendered as SVG paths with animated transitions. Dragging rotates the entire scene around its origin, sorting faces and text labels for correct depth perception. The visualization uses the d3-3d plugin for cube geometry and projection, with d3.drag handling user interaction and d3.transition animating position updates.

SSheshidharreddy

78% match

Loading thumbnail…

Untitled

This interactive scatterplot explores yearly changes across seven data categories (A–G), displaying each category as a dot plotted along an ordinal x-axis of bars. Users navigate between years with left and right arrow keys, with an automatic playback feature advancing through the dataset. Built with React and D3.js v3, the visualization uses SVG rendering with `d3.scale.ordinal`, `d3.svg.axis`, and `d3.scale.category10` for color encoding. Data loads from an external CSV file, and the chart includes keyboard event handling and dynamic axis updates.

TThandolwethu Shakes Dlamini

77% match

Loading thumbnail…

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

77% match

Loading thumbnail…

Untitled

This interactive visualization displays regional population data over time, where each region appears as a color-coded circle whose radius corresponds to a selected year’s population value. A slider controls the year from 1946 onward, triggering a smooth transition that resizes the circles to reflect changing data. The SVG renderer uses D3.js v3 scales and axes, with circle positions fixed by an ordinal x-axis and a linear y-scale for sizing. Hovering reveals tooltips with region and population details, while the data is loaded from an external CSV file.

Ssgalhamdani

77% match

Loading thumbnail…

Untitled

This example displays an interactive 3D bar chart built with D3.js v2 and jQuery. It renders an SVG-based visualization where bars are grouped by categorical x-axis values, with drop shadows applied via SVG filters to create a 3D effect. The chart uses ordinal and linear scales to map data, and includes custom axis tick formatting for captions. The code initializes on document ready, transforming input data and building the chart within a scrollable container.

Sskambhore04

77% match

Loading thumbnail…

Untitled

Interactive 3D bar charts made of cuboids render in SVG, with height mapped to randomly generated negative values. Users rotate the entire scene by dragging, which triggers recalculation of all cube faces and the sorting of drawn elements for correct depth perception. The visualization uses D3 v4 with the d3-3d plugin for 3D projection and perspective, updating positions and labels with D3 transitions. An update button randomly regenerates the dataset, animating the new bar heights over one second.

TTejamod

77% match

Loading thumbnail…

Untitled

This example presents an interactive bar chart visualization built with D3 v2 and React, rendering as an SVG with animated transitions. It displays categorical data along the x-axis with corresponding numeric values on the y-axis, using a drop-shadow filter effect on the bars. The chart dynamically rescales its ordinal and linear scales based on the input data, with axis tick labels drawn from a caption mapping. The code leverages jQuery for DOM manipulation, D3’s `d3.scale.ordinal`, `d3.scale.linear`, and `d3.svg.axis` APIs, and applies a custom SVG filter for visual styling.

Ssitaramchallapalli

76% match

Loading thumbnail…

Untitled

This visualization displays a stacked bar chart of U.S. state populations segmented by age groups, sorted by total population. The React-based example uses D3.js v3 to generate SVG bars with an ordinal x-axis, linear y-axis, and a color scale. Interactive features include hover tooltips showing segment values and a legend that filters bars on click. Data is loaded from an external CSV file, and animations are triggered through legend selections.

AAziz Jaffrey

76% match