Fitted Symbols (d3v4)

100%

Fitted Symbols (d3v4)

✓ Published0🌍 Public

Last edited Apr 26, 2019

Created on Nov 8, 2016

This example cycles through a sequence of D3 symbols, scaling each one to fit precisely within a fixed rectangular bounding box. It uses `d3.symbol` and `d3.symbols` to generate the shapes, and `getBBox()` on the SVG path to measure the symbol’s actual footprint. A `setInterval` loop selects a new symbol every two seconds, then employs a `transition` on the path’s `d` attribute to animate the scaling over 1.5 seconds. The code renders with SVG and leverages the D3 v4 API from `https://d3js.org/d3.v4.min.js`.

AI-generated description

This example demonstrates how to scale a D3 symbol to fit inside a specified rectangular bounding box using getBBox.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3dd515e692504c92ab65'>Fitted Symbols (d3v3)</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Fitted Symbols

This example cycles through D3’s built-in symbol types, scaling each shape to fit a fixed rectangular bounding box. A symbol path’s type changes every two seconds, and its size is recalculated from the bounding box’s aspect ratio using `getBBox`. The SVG rendering includes a gray rectangle as the target region, with a 1.5-second transition animating the shape’s new area. The code uses `d3.svg.symbol`, `d3.svg.symbolTypes`, and path transitions to demonstrate dynamic fitting.

Mmbostock

91% match

Loading thumbnail…

Symbol Fork of SVG Fundamentals - D3 (group)

This example shows a grid of horizontal and vertical bars overlaid on an SVG canvas, with a circular symbol-shaped mask revealing a cross-hatched pattern at the center. The visualization uses D3 v7 to generate 100 rectangles in each direction, positioning them by index and sizing them to cover the full viewport width and height. Two masks, created with `d3.symbol` and a star symbol type, are applied to the rectangles to alternate black and white fills, producing the contrasting central motif.

SSidney Oluoch

73% match

Loading thumbnail…

D3 Shapes

This example displays the seven built-in D3 symbol types (circle, cross, diamond, square, star, triangle, and wye) rendered as stroked SVG paths along a horizontal scale. It uses `d3.symbol()` with a `d3.scaleLinear()` to position each shape, and applies each symbol generator via `d3[d]` lookups. Labels below each path show the corresponding API name. The data is a static array of symbol type strings, with the visualization rendered entirely in SVG.

SSubhendu Karmakar

71% match

Loading thumbnail…

Seven Symbols

Seven small SVG canvases each display a distinct geometric symbol—circle, cross, diamond, square, star, triangle, and wye—from the d3-shape library. A red reference circle outlines the same area (2500 square pixels) for each symbol, positioned around its shared centroid. The visualization uses `d3.symbol()` with a configured size and animates each path’s rotation via a `d3.timer` callback, while `d3.selectAll` binds the appropriate symbol type from the data-type attribute. The paths are rendered as SVG with dynamic `d` and `transform` attributes.

Mmbostock

71% match

Loading thumbnail…

Sol Lewitt Reproduction with D3 multiple symbols

This example reproduces a Sol LeWitt-style drawing using D3’s `symbol` and `symbols` API to generate five geometric shapes (circle, cross, diamond, square, and star) that act as masks. Two sets of horizontal and vertical striped rectangles are drawn, each masked by a different pattern of symbols; the first mask uses black-filled symbols on white, the second inverts this. The `renderMask` function appends SVG `mask` elements, mapping each symbol to a `path` via `symbol(d, 8000)()` at evenly spaced translations. The code relies on `select`, `range`, and `join` for data-driven rendering.

GGullyPlook

71% match

Loading thumbnail…

Fork of d3-get-it-right-04

This example creates a hundred horizontal and vertical striped rectangles overlaid to form a grid, with a symbol-shaped hole cut through the pattern. The code uses d3.select, d3.range, and d3.join to bind data to SVG rect elements. Two SVG masks, one inverted and one normal, are built with d3.symbol and a d3.symbols[0] path (a circle) to punch a central circular reveal. The result shows layered d3.mask and d3.symbol APIs combined on a full-window SVG canvas.

Tthymdi

70% match

Loading thumbnail…

D3-Arrays

Fifteen black circles undulate in a vertical sine-wave pattern across a full-screen SVG. Each circle updates its vertical position based on a time-incremented angular offset, creating a smooth, animated wave. The example uses D3 v7's `select`, `range`, and `symbol` APIs, with a JavaScript `setInterval` driving the animation loop. Data is generated on the fly as an array of position objects, bound to circle elements via D3's data join, while SVG attributes are updated each tick.

Gg1g10

70% match

Loading thumbnail…

D3 all symbols

This example displays a grid of horizontal and vertical stripes overlaid with all D3 symbols. The code generates two sets of 100 rectangles each, using D3’s `range` and `selectAll` with `join` to create the stripes, and applies two SVG masks to reveal the symbols through the grid. Each mask is built by iterating over D3’s `symbols` array and rendering each symbol using the `symbol()` API, with the second mask inverted to create a contrasting overlay effect.

Jjony6290

70% match