Skip to main content
SimilarExport ZIP
100%

D3 Shapes

✓ Published1🌍 Public
SSubhendu Karmakar
Last edited Dec 29, 2023
Created on Dec 29, 2023

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.

AI-generated description

D3 Scales - scaleTime()

MIT Licensed

Similar vizzes

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

Shapes

The visualization displays a collection of basic geometric shapes—an ellipse, rectangle, and circle—colored individually and grouped to illustrate SVG styling and transformation. A second group applies a uniform fill and stroke, while a line and an unclosed path demonstrate stroke properties and line joins. The example is built with d3.v5, using the `select` API to target the SVG, and relies on raw SVG elements and CSS classes for rendering, with a fixed viewport enforced by the stylesheet.

Bbakstorage00001
80% match
Loading thumbnail…

D3 Shapes - Star shaped scatter plot

Six points, plotted along the x-axis from 0 to 500, each render as a hollow, gray star symbol. The visualization demonstrates D3’s `d3.symbol()` generator with the `d3.symbolStar` type and a fixed `size(80)`, applied as the `d` attribute for every SVG `<path>`. All stars share the same path data, and their positions come from a hardcoded `points` array, translated via each datum’s coordinates. The example uses a static SVG container with a `g` element, showing how a single generated symbol can be reused through D3’s data join.

SSubhendu Karmakar
80% match
Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shape creation using D3 version 6, showing circles, rectangles, lines, and paths rendered inside a 960×500 SVG canvas. The code uses the `select` function from the D3 library to display a text message, while shapes are styled through inline attributes and CSS classes. A group element with a transform translates and fills shapes with a light blue color and black stroke. The visualization highlights how SVG elements and D3’s selection API work together in a simple, static scene without data binding.

Jjakenachlas
79% match
Loading thumbnail…

Shapes SVG

This example demonstrates the basic SVG shapes—circles, rectangles, lines, and paths—rendered with both default and explicit fill and stroke styling. A nested group transforms shapes by translating them and applying a blue fill with a black stroke, while a separate group uses no fill and a thick stroke for line and path elements. The visualization is built with D3.js v5 and relies on static SVG markup, with a scale transform applied to enlarge the entire graphic.

SShirley Guo
79% match
Loading thumbnail…

Basic shapes

This example demonstrates a collection of fundamental D3.js shapes, including circles, rectangles, arcs, lines, and paths, all rendered as SVG elements on a canvas. It showcases various ways to construct these shapes, such as using the `d3.arc` function for annular sectors, `d3.line` for splines, and data-driven bindings with `.datum()` and `.data()`. The scene also includes programmatically generated rectangles with a purple fill, a pink circle, and a custom path created via `d3.path`. A small CSV dataset is linked but not directly used. The code relies on D3 v6 for shape creation and SVG manipulation.

Hhanulik.ondrej@gmail.com
79% match
Loading thumbnail…

D3 - Shapes Practice

This example demonstrates a simple D3.js line chart that plots a set of six coordinate points on an SVG canvas. The visualization shows how the `d3.line()` function generates a smooth path connecting the specified data points, which are hardcoded as an array of x and y coordinates. The code renders the path using an SVG `<path>` element with a gray stroke and no fill, following the D3 v3 approach documented in the provided reference. The visualization serves as a basic practice exercise for understanding shape generation and path creation in D3.

SSubhendu Karmakar
78% match
Loading thumbnail…

D3.js| Path

The example displays a collection of primitive shapes and line types in an SVG canvas using D3.js v4. It shows circles, rectangles, and various path elements, including arcs drawn with the `arc()` function and lines generated by `d3.line()` and `d3.path()`. The visualization uses D3’s selection, data-binding with `.datum()`, and data-driven loops via `.data()` and `.enter()` to create elements from an array of values. The SVG background is green, with a GeeksforGeeks header, and all shapes are rendered statically without interaction.

Hhanulik.ondrej@gmail.com
78% match