Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Marks and Channels Shape using D3

Public visualization

Viewing a saved revision (read-only)

d53a1c4592c9481a80554eae93372b71

Marks and Channels Shape using D3

1 star0🌍 Public
KKCachel
Last edited Nov 5, 2018
Created on Sep 7, 2018
Forked from HTML Cars Report

This example uses D3 to draw a square outline with a set of lines and circles within it, arranged to explore the marks-and-channels concept of shape. The code leverages D3’s SVG manipulators—appending a `<rect>`, `<line>`s, and `<circle>`s via `select`, `append`, and `attr`—with fixed coordinates to create a geometric composition. Rendered as SVG on a white background, the square’s stroke and fill, the gray lines, and the dark circles demonstrate varied visual channels.

AI-generated description

Shape attempt made by Kathleen Cachel

I learned from the face and pentagon examples. Along with looking up some syntax at dashing d3.

4