Swipe

100%

✓ Published0🌍 Public

Last edited Apr 26, 2020

Created on Apr 26, 2020

Forked from ACS

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.

AI-generated description

[arcgis.com]

MIT Licensed

Similar vizzes

Loading thumbnail…

ArcGIS: JavaScript starter app

This example demonstrates interactive 2D and 3D map visualization using ArcGIS JavaScript APIs alongside D3.js for a dropdown menu interface. The application loads a NatGeo World Map tile layer over various Esri basemaps, with a 2D MapView centered on coordinates [34.8021, 38.9968] at zoom level 5. The code includes commented-out 3D SceneView functionality with elevation settings and camera positioning. The dropdown menu, built with D3’s `select`, `append`, `merge`, and `attr` methods, lets users switch between different basemap options.

Aala-wahibi

64% match

Loading thumbnail…

ArcGIS: BaseMap

This example uses ArcGIS API for JavaScript and D3 v5 to create an interactive base map viewer. It shows how a user can switch between multiple ArcGIS basemaps (such as hybrid, streets, and terrain) and toggle between 2D MapView and 3D SceneView perspectives using two D3 dropdown menus. The 2D view centers on coordinates [34.8021, 38.9968] with a zoom level of 4, while the 3D view includes world-elevation ground and a perspective camera. The interface renders the map in a full-page div using ArcGIS’s `Map` and `MapView`/`SceneView` classes.

Aala-wahibi

64% match

Loading thumbnail…

Fork of Volcano

This interactive visualization animates contour lines of the volcano dataset, showing a smooth morphing effect as the contour thresholds transition between successive intervals. The display uses a plasma color scale to differentiate elevation bands, with white strokes delineating each path. The code constructs GeoJSON MultiPolygons from the gridded `volcano.json` data using `d3.contours` and projects them with `d3.geoNaturalEarth1` and `d3.geoPath`. A continuous loop drives a `transition` of 2000ms duration, interpolating threshold values and updating both the path shapes and fill colors to create a perpetual pulsing animation.

DDonald Bagwell

61% match

Loading thumbnail…

Volcano

This visualization animates contour lines of volcano elevation data, smoothly interpolating between threshold boundaries to create a flowing, morphing effect over a geographic projection. The contours are generated using `d3.contours` from a grid of elevation values in `volcano.json`, projected with `d3.geoNaturalEarth1` and rendered as SVG paths via `d3.geoPath`. A sequential plasma color scale encodes elevation values, while an infinite loop transitions path shapes and fills every 200 milliseconds using `d3.transition`. The animation cycles through paired thresholds, creating continuous, fluid distortions of the terrain.

Vvivianaaai@qq.com

61% match

Loading thumbnail…

04: Custom Map Controls

This example demonstrates a map with two toggleable layers—hexbins and crash points—overlaid on a Mapbox GL base map. The hexbins are generated from a GeoJSON dataset of NYC crashes using Turf.js to create a hex grid and count incidents per cell, colored with a Jenks natural breaks classification. Custom UI buttons let users toggle each layer on and off, with active states highlighted. The code also shows how to filter invalid geometries and style layers dynamically.

55un

60% match

Loading thumbnail…

Swipe function

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.

HHariprashanth75

60% match

Loading thumbnail…

Tile Viewer

This example shows a zoomable map interface where the user can pan and zoom across geographic tiles. It displays each tile as a numbered 256-by-256-pixel square with a red border and its coordinates as text, updating the visible grid as the viewport changes. The code uses d3.geo.tile, d3.geo.mercator, and d3.behavior.zoom, applying a CSS 3D matrix transform to reposition tiles during zoom events. It relies on a gist by mbostock and the d3.v3 library, with tile positions computed from the current zoom scale and translation.

Mmbostock

59% match

Loading thumbnail…

Leaflet - MapTiles

This example shows a full-screen interactive map that allows the viewer to switch between dozens of different tile layers, ranging from satellite imagery and street maps to terrain, watercolor, and dark matter styles. The code uses the Leaflet library to render the map and manage layer switching, while pulling tile URLs and attribution strings from the viz.js `viz.leaflet.tiles` API. It includes base layers from providers such as OpenStreetMap, Thunderforest, Stamen, Esri, and CartoDB, demonstrating how to assemble a multi-provider tile switcher in a single HTML page.

NNPashaP

59% match