Skip to main content
SimilarExport ZIP
100%

slider

✓ Published2🌍 Public
Zzoniyac
Last edited May 14, 2020
Created on May 13, 2020
Forked from button

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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.

Mmayuri-gosapphire
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
81% match
Loading thumbnail…

Slider test 1

A range slider, built with the d3-simple-slider library, selects an interval on a horizontal axis. The slider’s default value is set between 0.015 and 0.02, and its current selection is displayed as a formatted percentage range in a paragraph. A D3 v6 SVG visualization renders the control, with the slider’s fill color set to blue. The underlying data, drawn from a CSV file, is not used in the interaction.

Llarsboergo
76% 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
76% match
Loading thumbnail…

D3 sliders

This example shows an interactive bar chart of a small dataset where dragging a vertical HTML range slider recolors bars below a threshold value from light blue to dark blue. The chart uses D3 version 7 scales (`scaleBand` and `scaleLinear`) to position and size SVG rectangles, and React is mentioned as the framework context. The slider’s `change` event triggers a D3 transition over 500 milliseconds to animate the fill color change, demonstrating linked interaction between an HTML input and D3-managed SVG elements.

KKaustav Sen
74% match
Loading thumbnail…

Input test (circle)

This example demonstrates how an HTML range input slider can control the radius of an SVG circle drawn with D3.js. Moving the slider updates the displayed radius value and resizes the circle's `r` attribute in real time. The code uses a `<input type="range">` element with an `input` event listener, and D3's selection methods (`d3.select`, `.on`, `.property`, `.attr`) to synchronize the slider, text label, and circle. The visualization is rendered as an SVG element in the browser without any external data source.

Dd3noob
74% match
Loading thumbnail…

Untitled

This example shows four circles arranged horizontally, each with a fixed radius of 10 pixels. A slider control allows the user to select a value between 2 and 40, and the chosen value is written to the document via `document.write` in the `changeSize` function. The visualization uses d3.v4 to bind an array of X positions to the circles and listens for slider changes with `d3.select("#mySlider").on("change")`. The SVG is rendered directly in the HTML with a fixed width of 400 pixels and height of 200 pixels.

Zzoniyac
73% match
Loading thumbnail…

Circular Layout (Slider)

A circular layout of 180 arc-shaped segments, colored on a brown-to-steelblue scale, visualizes random values distributed by angle and radius. A range slider controls the radial display, fading arcs in and out based on their angular distance from the slider’s current value. The d3.v3 code builds the visualization using nested `g` elements, `d3.svg.arc` for geometry, and `d3.scale.linear` for mapping. The animation reveals each arc via chained transitions on `fill-opacity`, while the slider input event updates the opacity based on angular difference.

Mmbostock
73% match