button

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.

76% match

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

74% match

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.

73% match

shape

Five squares demonstrate different texture patterns from the `textures` library applied as SVG fills. Each rect uses a distinct generator—circles, vertical lines, transparent circles, hexagons, and crosses—created via `textures.circles()`, `textures.lines()`, and `textures.paths()`. The examples show varied stroke widths, radii, and fill opacity for the texture elements, all rendered on a 960×500 SVG canvas using D3 v5 to append and style the rectangles.

shape

HTML Starter

This example presents three animated circle charts, each with its own dataset and button. Clicking a button cycles through data values, causing the corresponding circle’s radius to transition smoothly while its numeric label updates. The visualization uses D3 v4 with `d3.select`, `d3.scaleLinear` for mapping data to radius and color, and `transition().attr` to animate changes. Each circle’s fill shifts along a gradient, and buttons trigger the updates through custom click handlers.

Ssgalhamdani

HTML Starter

Ssgalhamdani

orientation

This example demonstrates how to dynamically change a circle’s fill using a texture pattern. The circle, drawn with D3, initially has no fill, and clicking buttons applies or removes a texture generated by the `textures` library’s `paths()` API. The texture is set via `.url()` and passed to a `changeColor` function, which updates the circle’s `style("fill")`. Rendering is SVG-based, with the D3 v5 selection and attribute methods controlling the visualization.