Fork of slider

100%

Fork of slider

✓ Published0🌍 Public

Last edited Jul 26, 2021

Created on Jul 26, 2021

Forked from slider

This example demonstrates how to adjust the density and size of a textured pattern applied to an SVG rectangle. A native HTML range slider controls the visual property, updating the display in real time. The code uses the `textures` library to generate a circle-based texture pattern via `textures.circles()`, then applies it to the rectangle using D3.js v4’s `selection.attr()`. The SVG is rendered with a fixed width and height, and the slider’s value modifies the texture’s radius, though the density control is currently commented out.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

slider

Two range sliders control the density and radius of a procedural circle texture applied to a rectangular SVG shape. Dragging either slider updates a texture generated with the `textures` library, which is then used as the rectangle’s fill via `textures.circles().size()` and `.radius()`. The SVG is rendered with d3.v4, which appends the rectangle to the chart area. Each slider also displays its current numeric value in an accompanying HTML paragraph.

Zzoniyac

84% match

Loading thumbnail…

Untitled

This example demonstrates how a slider controls the size of a pattern-filled circle in an SVG. The circle’s radius stays fixed, but the pattern scale changes as the slider moves between 2 and 40. The code uses the `textures` library to generate the fill, applying it via `t1.size(size)` and `svg.call(t1)`, with updates triggered by the slider’s `change` event. The visualization is rendered using D3 v4 and React, with the SVG drawn at 400 by 200 pixels.

Zzoniyac

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

76% match

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

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

74% match

Loading thumbnail…

button

Four buttons cycle a rectangle’s fill through four SVG textures generated by the textures library: circles, lines, crosses, and a custom banana-shaped path. The example demonstrates how to apply texture definitions to an SVG node via `svg.call(t1)`, then update the rectangle’s fill on button click with `changeColor(t.url())`. A slider, wired through `d3.select("#mySlider").on("change", ...)`, adjusts the line texture’s size, though the slider element itself is not defined in the visible markup. All rendering uses D3 v4 and SVG.

Zzoniyac

74% match

Loading thumbnail…

Fork of HTML Starter

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.

Mmayuri-gosapphire

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

72% match