Swipe function

100%

Swipe function

✓ Published0🌍 Public

Last edited Jul 16, 2021

Created on Jul 6, 2021

This example demonstrates swipe detection on a web page, where a user can swipe left, right, up, or down on a touch surface to trigger a visual response. The interface displays a message indicating the direction of the swipe. The code implements a custom `swipedetect` function using the `touchstart`, `touchmove`, and `touchend` events, calculating distance traveled and elapsed time to determine the swipe direction. The result is shown in the `#touchsurface` div, which has a styled green border and yellow text, with the background set to black via CSS.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Page Swiping

Five vertical pages, each displaying a large index number on a radial gradient background, alternate between light and dark themes. Using touch input, the user can drag or flick through the pages with momentum-based scrolling. The D3 v3 code listens to touch events, records drag samples to calculate velocity, and animates the final page position and a CSS `translate3d` overscroll effect via `d3.interpolateNumber`.

Mmbostock

71% match

Loading thumbnail…

Multitouch

This multitouch visualization maps each finger contact to a colored circle on an SVG canvas, with touches tracked by identifier. The example uses D3’s `d3.touches` API to capture touch events and `d3.event` to prevent default scrolling. Newly detected touches enter with an elastic scaling animation via `transition.attr("r", …)`, while removed touches shrink and exit. Circle positions update directly from touch coordinates, and color assignment uses `d3.scale.category10`. The code relies on touch-supporting browsers, such as iOS Safari, to dispatch the appropriate events.

Mmbostock

60% match

Loading thumbnail…

Swipe

This example uses the ArcGIS API for JavaScript 4.15 and D3 v5 to create a map view of the Kilauea volcano eruption site. The Swipe widget compares two TileLayers—shortwave infrared and near-infrared satellite imagery from the WV03 satellite—by dividing the view at a draggable position. Layer visibility is controlled through the widget, while a LayerList provides additional map layer management. The map displays a satellite basemap centered on the volcano with constrained zoom levels.

Aala-wahibi

60% match

Loading thumbnail…

d3.js: mouse drag a la iphone: decceleration

This example demonstrates an interactive image viewer that supports panning, zooming, centering, and resetting using mouse drags, scrollwheel, and keyboard shortcuts. It implements a swipe gesture with deceleration, where releasing the mouse during a drag continues the image’s momentum. The interface also displays a cycling tip-of-the-day overlay after five seconds of inactivity, which fades in and out using D3 transitions. The code relies on `d3.behavior.drag`, `d3.timer`, and `d3.json` to load the configuration, while rendering a large external JPEG image inside a clipped container.

GGerHobbelt

58% match

Loading thumbnail…

d3

A playful set of five text elements counts up to 10 on load with staggered delays, then changes to 50 on mouseenter and back to 10 on mouseleave using `d3.transition` and `d3.interpolateRound` inside a custom `.tween`. The page background animates from red to green via a chained `transition().style()`, while an SVG renders six yellow circles with radii proportional to the square root of their data values using `d3.selectAll().data().enter().append()`. The example demonstrates D3 v7’s selection, transition, and tweening APIs in a plain HTML page.

Ssukumardunn

58% match

Loading thumbnail…

Movements/Actions

This example demonstrates interactive SVG animations for exploring user-driven movements and actions. Users can click and hover over rectangular elements to trigger color changes and animated transitions, such as moving a rectangle across the canvas or modifying bar heights and positions. The visualization uses D3 v5 with transitions, event handling, and a JSON data file containing country rankings over time. The code employs `d3.transition`, `d3.easeLinear`, and D3's data-binding methods to update elements dynamically.

Kkau91

57% match

Loading thumbnail…

Third Valence Arousal(Double swipe)

This example shows three segments of arousal and valence data plotted over time, with a gradient stroke transitioning from blue to red. A series of buttons lets the user switch between different data views, such as individual arousal or valence segments, or trigger a “Move” operation. The visualization uses D3.js version 3 to load CSV data, create scales, axes, and an SVG line chart, and update the display based on user input. The chart is rendered with an SVG path and a linear gradient, with circles marking each data point.

HHariprashanth75

57% match

Loading thumbnail…

Swiper Slider

This example demonstrates a coverflow-style destination slider for a travel website, featuring image cards for locations like Thailand, Belgium, and Nepal. It uses the Swiper library with its coverflow effect, incorporating 3D transforms, slide shadows, and responsive breakpoints to adjust cards per view. Navigation relies on the included `swiper-bundle` scripts and the jQuery-based `wte-elementor-widgets` integration. The slider is driven by inline HTML data attributes for configuration and pulls images from the WordPress theme’s media directory.

KKirun1

57% match