Skip to main content
100%

Pattern Module Demo 2

✓ Published0🌍 Public
Aandrew-reid
Last edited Jan 8, 2018
Created on Jan 9, 2018

Six circles in a row demonstrate six custom SVG pattern types generated by a reusable D3 module. The patterns include striped, plaid, square, symbol-based, dotted, and checkerboard designs, each created programmatically through the `d3.patternStripes`, `d3.patternPlaid`, `d3.patternSquares`, `d3.patternSymbols`, and `d3.patternDots` functions. Each circle uses a distinct pattern fill, with options such as custom colors, widths, angles, and opacity. The code relies on d3-selection-multi.v1 for attribute chaining and renders SVG with D3 v4.

AI-generated description

A second quick demo of this attempt at a d3 module for patterns.

This example shows how to modify the patterns, while the linked block only shows default characteristics.

Similar vizzes

Loading thumbnail…

Pattern Module Demo

This demo showcases a set of reusable SVG pattern generators for D3.js, implemented as custom functions in a module called d3Pattern.js. Six distinct patterns—stripes, plaid, squares, circles, symbols, and checkers—are each created as SVG <pattern> elements within a single SVG canvas. The patterns are applied as fills to six circles arranged horizontally, with each circle using one of the pattern types via the pattern's `use()` method. The patterns are defined in the SVG `<defs>` section and support configurable properties such as colors, stripe widths, angles, and opacity. The example demonstrates how to generate and apply SVG patterns dynamically with D3, using a default 960x500 SVG canvas. The code relies on d3-selection-multi for multi-attribute selections and renders entirely as SVG.

Aandrew-reid
95% match
Loading thumbnail…

Circles

This example demonstrates how multiple HTML input elements can control SVG circle properties in D3.js v6. It shows three interactive patterns: a number input that changes a circle’s radius, a dropdown menu that transitions a circle’s fill color via `selection.transition()`, and a range slider that resizes four circles simultaneously. The code uses `d3.select` to bind event listeners and `join` to populate options. The SVG is rendered directly in the DOM, with visual feedback updating in real time.

Bbepnye@gmail.com
77% match
Loading thumbnail…

Fork of Circles with D3 - jahanlon

This example demonstrates how to create and style SVG circles and rectangles with D3 v7 using the General Update Pattern and method chaining. The visualization renders seven semi-transparent circles with fixed positions, radii, and fill colors, alongside five rectangles of varied dimensions and colors against a pale green background. The code uses the `select`, `data`, and `join` methods to bind array objects to SVG elements, then sets attributes like `cx`, `cy`, `r`, `fill`, and `opacity` dynamically. The data is hardcoded as JavaScript arrays within the `main` function.

JJack Hanlon
76% match
Loading thumbnail…

Lichen.js Pattern Showcase

This block showcases the variety of pattern-generating methods available in Lichen.js, a utility for extending D3. Rendered as animated SVG, the display cycles through multiple pattern types, including chevron arcs, plaids, and stripes, with some patterns' parameters limited by the UI. The chevronArc.js module demonstrates the library's low-level path construction, using custom arc calculations to draw notched chevron shapes based on inner/outer radii, start/end angles, and indent values. The visualization highlights the flexibility of the library while acknowledging its interface constraints.

663anp3ca
75% match
Loading thumbnail…

Circular Geometric Patterns

Five circles appear around the center of an SVG, each drawn at a radius influenced by a factor of seven and connected by a closed polyline. The circles are sized by the distance between the first two points, creating an overlapping geometric composition. Implemented with React and D3 v5, the visualization uses `range`, `line`, and `curveLinearClosed` to generate the points and path, with the circles and stroke rendered directly as SVG elements. The example explores ordered circular symmetry through minimal code.

Mmshoer
75% match
Loading thumbnail…

Fork of Circles with D3

This example demonstrates the D3 General Update Pattern by rendering a set of seven circles of varying sizes and neon colors onto a light green SVG background. It uses D3's `select`, `join`, and attribute methods to bind an array of objects containing `x`, `y`, `r`, and `fill` properties to circle elements. The circles are positioned at fixed coordinates, with each radius ranging from 20 to 147 pixels and a uniform opacity of 0.7. The code showcases method chaining and dynamic styling with data-driven attributes.

Ssaditya495@gmail.com
75% match
Loading thumbnail…

SVG Image Background

This example shows eight geometric shapes—four rectangles and four circles—arranged in a grid, each filled with a different placeholder image from LoremPixel and outlined with a categorical color from D3’s `schemeCategory10`. The visualization demonstrates how SVG patterns can embed raster images via the `pattern` element and `image` reference. Using D3 v4’s selection and append methods, the code defines a pattern for each shape ID and then applies the pattern as the fill for each `rect` and `circle`, with `objectBoundingBox` units to tile the image evenly.

SSpaceActuary
75% match
Loading thumbnail…

Fork of Circles with D3

This example displays seven colored circles of varying sizes and positions on a pale green background. It demonstrates the D3 General update pattern for creating and managing SVG elements. The code uses `select`, `selectAll`, `data`, and `join` from D3 to bind circle data to SVG `<circle>` elements, then sets `cx`, `cy`, `r`, `fill`, and `opacity` attributes via method chaining. The data is an array of objects defining each circle's coordinates, radius, and color.

WWill Chen
75% match