Skip to main content
100%

Martin Zalucki

✓ Published0🌍 Public
Aaaizemberg
Last edited Jun 25, 2019
Created on Jun 25, 2019

This example presents pairs of before-and-after images of Martin Zalucki, displayed as interactive sliders using the Knight Lab Juxtapose library. Each juxtapose container loads two Twitter-hosted JPEG images, allowing viewers to drag a handle to compare the two versions side by side. The page initializes the sliders by including Juxtapose’s CSS and JavaScript from a CDN, with no additional data processing or custom visualization logic. The images are static, and the interaction is limited to the library’s built-in comparison mechanism.

AI-generated description

Similar vizzes

Loading thumbnail…

d3 class practice

This example demonstrates a before-and-after image comparison slider with a draggable white divider. The interface lets users interactively reveal one of two photographs by dragging the resizer horizontally across the container. The implementation relies on plain JavaScript event listeners for mouse and touch interactions, manipulating DOM element widths and positions directly. It uses CSS gradients and flexbox for styling, with images sourced from Pexels, and does not utilize any D3 or React APIs despite the title.

TThandolwethu Shakes Dlamini
63% match
Loading thumbnail…

Image Carousel

This example demonstrates a simple image carousel, displaying a sequence of three thematically labeled images—Zip, Zap, and Zop—that users can cycle through. The code uses jQuery (via the `carousel.js` file) to handle click events on the previous and next frame links, shifting the horizontal position of a `.frames` list. The layout relies on a fluid CSS approach where the carousel container hides overflow, and each slide takes up a third of the overall track width. The styling, defined in `main.css`, includes navigation buttons and responsive image sizing. The data source is static image URLs embedded directly in the HTML, with no external data loading or animation libraries beyond core jQuery.

EElaineYu
62% match
Loading thumbnail…

sliders

This visualization demonstrates interactive sliders built with D3.js, where each slider’s filled portion changes color dynamically as the user drags the handle. The sliders use a brush interaction to capture input, and the fill color is mapped through a custom cubehelix color scale (d3.scale.cubehelix) based on the slider’s current value. The SVG rendering includes horizontal and vertical orientations, with text labels and a clean, minimal design. The code also includes an animated transition example, though it is commented out.

SSpaceActuary
61% match
Loading thumbnail…

parallel sliders

This example features a set of draggable sliders that control a parallel-coordinate-style visualization, with each slider’s value mapped to a color using a cubehelix scale. The sliders are implemented with D3’s brush API, and the filled portion of each slider dynamically updates its color and size as the user drags. Built with D3 v3 and SVG, the animation and interactivity respond directly to user input, while the cubehelix color interpolation provides a smooth rainbow gradient across the range.

SSpaceActuary
59% match
Loading thumbnail…

Auto Image Slider

This example displays an automatic image slider for navigating three nature photographs. It cycles through images every two seconds, with preview and next arrow buttons and clickable dots for direct slide selection. The code uses vanilla JavaScript with `getElementsByClassName`, `addEventListener`, and `setTimeout` for automation, while CSS manages positioning, transitions, and active states for navigation elements.

KKacieW
59% match
Loading thumbnail…

parallel sliders

Parallel sliders presents six horizontal sliders arranged in two rows, each controlling a value from 0 to 100 and displaying a dynamic color fill. The sliders are implemented with D3.js’s `d3.svg.brush` and a custom slider component, using a cubehelix color scale to map slider positions to a rainbow gradient. As a user drags a slider, an `onchange` callback updates the fill color and width, with the SVG animation responding in real time. The code also includes commented-out transitions using `brush.extent` for potential animated value changes.

SSpaceActuary
59% match
Loading thumbnail…

parallel sliders

A row of five independently draggable sliders uses a cubehelix color scale to fill each bar with a continuous rainbow gradient. As a slider handle moves, its bar dynamically changes length and color, while the fill proportion updates in real time. Built with D3.js and SVG, the custom reusable slider component leverages `d3.svg.brush`, `d3.scale.linear`, and the `cubehelix` interpolation plugin to create smooth, animated interactions.

SSpaceActuary
58% match
Loading thumbnail…

Gist 6fca8ef5ca087df8d88875360a27898e

This visualization arranges a set of ten idea images across three virtual panels (left, right, and back) in a 3D space using A-Frame entities with `media-loader` components. It captures and restores each image’s position, rotation, and scale via `getIdeasPoses()` and `setIdeasPoses()`, allowing users to switch between initial and new layouts through a dat.GUI control panel. The GUI also provides buttons to snap images back to their panels, pin or unpin them, and generate a fresh layout by sampling new random positions. Images are loaded from external PNG URLs, and the code demonstrates manual object3D manipulation rather than a physics or layout engine.

UUtopiah
58% match