Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Jul 23, 2021

Created on Jul 23, 2021

This example demonstrates a custom time-based slider widget built with D3.js v5, allowing users to drag a handle across a timeline to select a date range. The slider displays tick labels formatted as days or times depending on the span between start and end dates, and updates a handle position in response to drag events. It uses d3.scaleTime, d3.drag, and d3.timeFormat to map dates to pixel coordinates and render the interactive controls. The SVG rendering includes a track, overlay, ticks, and handle, with event handlers dispatching slider position changes to an external store.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a custom time-based slider widget built with D3.js v5, rendered as an SVG element. The slider allows users to drag a handle across a timeline to select a date range, with tick marks displaying formatted dates or times depending on the duration. It uses `d3.scaleTime` for mapping dates to pixel positions and a custom drag interaction to update the handle. The code also includes a `triggerEvent` function that dispatches a message when the slider position changes, though the surrounding application logic is not shown.

Mmayuri-gosapphire

98% 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

80% match

Loading thumbnail…

Fork of d3-simple-slider

This example demonstrates a slider component built with the d3-simple-slider library, rendered as SVG with animation support. It showcases various slider configurations, including simple, step-based, time-based, fill, range, and vertical orientations, plus extended features like alternative handles and transitions. The slider updates displayed values dynamically via the `onchange` event. The code integrates Bootstrap for layout and uses D3 v5 for DOM manipulation. Data is not explicitly sourced, though the slider’s range and tick formatting adapt to numeric, date, and percentage inputs.

Llimenzi

80% match

Loading thumbnail…

Fork of d3-simple-slider

This fork of d3-simple-slider demonstrates the basic and extended functionality of the slider component. It showcases six core configurations—simple, step, time, fill, range, and vertical—along with an alternative handle and a transition option. Each slider is paired with a live value display, updating on user interaction. The example also includes recreations of the New York Times rent-or-buy slider and a color picker, all rendered as interactive SVG elements using the d3.sliderBottom and related APIs.

AAdan Rodriguez

79% match

Loading thumbnail…

Fork of d3-simple-slider

This fork of d3-simple-slider demonstrates various interactive slider configurations, including simple, step, time, fill, range, vertical, and transition options. Built with D3 v5 and the d3-simple-slider library, the page also integrates a small multi-line chart that visualizes estimated death counts across different age brackets from the q3.csv dataset. The chart uses D3's scaleLinear, scaleTime, axisBottom, axisLeft, line, and curveCatmullRom APIs to render the data with SVG paths and animated transitions.

AAdan Rodriguez

78% match

Loading thumbnail…

Fork of Fork of HTML Starter

An interactive line chart displays a time series with a circular marker tracking the latest data point. The visualization uses D3 v5 to render an SVG path from sample data, with axes and labels generated via D3 scales. A dropdown menu likely filters the displayed series, though the selection logic resides in the bundled React component. The chart updates dynamically, highlighting the most recent value with a labeled circle. The implementation combines D3’s selection, scale, and axis APIs within a React framework, styling the output through external CSS.

NNandini Maddula

78% 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

78% 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

77% match