Map id 11 & slider v1

100%

Map id 11 & slider v1

✓ Published0🌍 Public

Last edited Mar 6, 2018

Created on Mar 6, 2018

This example combines a Google Map with a D3.js time slider to explore a single timestamped location. A map centered on Lyon (map id 11) displays terrain, while the slider beneath it spans a time interval on December 7, 2014. Dragging the slider’s handle updates the displayed date and changes the SVG background color using `d3.hsl`. The implementation uses the Google Maps JavaScript API for the map and D3 v4’s `d3.drag` and `d3.scaleTime` for the interactive time axis, with SVG rendering for the slider.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Map id 11 & slider v1

This example combines a Google Map with a D3.js time slider to explore a single day’s data. The map is centered on Lyon, France, at zoom level 16, while a draggable slider spans from 5:20 AM to 12:10 PM on December 7, 2014. Dragging the handle updates a label with the selected time and changes the slider’s background color using `d3.hsl`. The visualization uses the Google Maps JavaScript API for the map and D3 v4 for the slider, ticks, and drag behavior.

LLucLafond

97% match

Loading thumbnail…

time slider

This example showcases various interactive slider configurations built with D3 v5 and the d3-simple-slider library. It demonstrates core functionalities like simple continuous sliders, step-based sliders for discrete values, and time-based sliders using the `d3.timeFormat` and `d3.timeScale` for date handling. Additional features include filled sliders, range selection, vertical orientation, customized handles, and smooth transitions. The visualization also presents practical applications, such as a New York Times-style slider and a color picker, all rendered as SVG elements with Bootstrap styling for layout.

Mmanoj-soft

74% match

Loading thumbnail…

d3-simple-slider

This example demonstrates four interactive slider configurations built with the d3-simple-slider library and D3 v4, each handling a different data type and scale. The sliders showcase value selection for percentages, discrete integer steps, time-based data using JavaScript `Date` objects formatted with `d3.timeFormat`, and dense value arrays with custom tick marks. The code renders each slider as an SVG element via `d3.sliderHorizontal()`, binding change events to update text displays in real time, and includes reset links that programmatically set slider values. The implementation highlights the library’s flexibility in adapting to varied input formats while maintaining a consistent, user-friendly interface.

AAlainRo

72% match

Loading thumbnail…

Drag Slider

This slider example demonstrates interactive color selection by dragging a circular handle along a horizontal track. The handle position maps linearly to hue values from 0 to 180 degrees, updating the SVG background color in real time. Built with D3 v4, it uses `d3.drag` for pointer interaction and `d3.scaleLinear` with clamping. A transition animates the initial hue from 0 to 70 on load, while tick labels show degree values. The visualization renders entirely in SVG, with layered track lines for visual depth.

Mmbostock

69% match

Loading thumbnail…

d3-simple-slider

This example demonstrates a variety of interactive slider configurations using the d3-simple-slider library, built on D3 v5. It showcases simple, stepped, time-based, filled, ranged, and vertical sliders, along with alternative handles and transitions, with each slider updating a displayed value. The page includes extended examples inspired by a New York Times article and a color picker, all rendered as SVG elements within a Bootstrap layout. The sliders are created using `d3.sliderBottom` and `d3.sliderTop` APIs, with options for tick formatting, step values, and fill colors, and respond to user input via the `onchange` event.

Ggotyou007

69% match

Loading thumbnail…

slider

A playable slider scrubs through a date range from January to July 2020, with a draggable handle and animated play button. The time-based scale uses `d3.scaleTime` with `d3.drag` for interaction, and the handle position updates a text label showing the formatted date. The animation advances the slider via `setInterval`, incrementing the current value until it reaches the end. Data comes from `circles.csv`.

Aashpradhan01123

69% match

Loading thumbnail…

Example of slider

A slider controls a dynamic scatterplot of 20 points, each representing a year from 2000 to 2020, with x and y positions generated randomly. The visualization shows how point positions change across years as the user drags the range input. The code uses D3.js v4 to bind data, create SVG circles, and update them via a transition. The slider’s input event triggers a filter on the pre-generated dataset, updating the circles’ coordinates and the displayed year label. Axes are rendered using d3.axisBottom and d3.axisLeft, with color mapping via d3.scaleOrdinal.

GGerardoFurtado

69% match

Loading thumbnail…

Leaflet Timeline Slider

This example uses the Leaflet mapping library to visualize a collection of geographic points as markers on an OpenStreetMap base layer. A timeline slider enables navigation through different story titles, such as "Day 1" and "1776," filtering the displayed GeoJSON features by their title property. When the slider value changes, the code removes existing markers and adds new ones from the filtered data, fitting the map bounds to the marker group and binding popups that show story content and progress. The implementation relies on jQuery and Leaflet's map, tileLayer, geoJson, and featureGroup APIs.

SSam Hege

69% match