Seven Symbols

100%

✓ Published0🌍 Public

Last edited Sep 13, 2017

Created on Dec 8, 2015

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.

AI-generated description

The seven symbols supported by d3-shape. Each has a configurable area (here, 2500 square pixels) and is positioned around its centroid.

gpl-3.0 Licensed

Similar vizzes

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

83% match

Loading thumbnail…

Circles with D3

This example shows a set of seven colorful circles scattered across an SVG canvas, each with a distinct size, position, and fill color at 70% opacity. It demonstrates core D3.js v7 concepts including data binding, the General Update Pattern, and method chaining via `select`, `selectAll`, `data`, and `join` to render `circle` elements. The visualization uses static, data-driven coordinates and colors defined in a JavaScript array, rendered through an HTML import map loading D3 from a CDN. The code also showcases the `join` API for creating SVG circles within a container sized to the viewport.

CCurran Kelleher

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

77% match

Loading thumbnail…

Circles with D3

Seven circles of varying sizes and colors float on a muted pink background. The visualization demonstrates static circle generation using D3 v7, with each circle’s position, radius, and fill color defined in a hardcoded array. The code uses `select`, `join`, and attribute setters like `.attr('cx')` and `.attr('r')` to render the shapes. A fixed opacity of 0.63 is applied uniformly, and the SVG resizes to its container dimensions.

Iissam.benabid@gmail.com

77% match

Loading thumbnail…

fresh block

Seven circles are plotted diagonally across a small SVG canvas. Each circle is drawn twice, with the second copy rendered in red and only for data values excluding 6, creating a simple visual comparison of data point positions. Built with D3 v4, the code uses `d3.select`, `svg.selectAll`, and `append` to generate SVG groups and circles, with coordinates computed directly from the data array values.

BBrunoDumas

76% match

Loading thumbnail…

D3 Playground

This example demonstrates basic D3.js v7 shape generation and data binding on an SVG canvas. It renders a small bar chart from an array of four numbers, with black rectangles positioned through the enter selection pattern, and places a large red symbol from `d3.symbol` at the center of the viewport. The code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to draw the geometric forms, while sizing the visualization to match the full browser window dimensions.

BBryan Baird

75% match

Loading thumbnail…

HW Re-create Marks & Channels Graphic

This visualization recreates four basic symbol marks—cross, circle, square, and triangle—arranged horizontally across the center of an SVG canvas. The marks are generated using d3.symbol with a fixed size of 1000, while a d3.scaleLinear maps the array index to x-coordinates spaced 200 pixels apart. Each symbol is rendered as a purple-filled SVG path element, selected and bound to data via d3.select and data joins. The code uses d3 v5 and relies on importing select, scaleLinear, and symbol from the d3 module.

YYF

74% match

Loading thumbnail…

Spiral Triangle III

A grid of 71 small cross-shaped symbols rotates in a spiral pattern around a triangle, with colors shifting through a cubehelix scale. The animation is clipped into upper and lower regions of the SVG canvas, and each symbol moves outward while rotating at a constant angular speed. The code uses D3 v3's `d3.timer` for animation, `d3.svg.symbol` for cross paths, and a custom `d3.scale.cubehelix` with three HSL stops to interpolate fill colors over time.

Mmbostock

74% match