Skip to main content
100%

Marks as Links - Containment

✓ Published0🌍 Public
Aanqi-lu
Last edited Sep 24, 2017
Created on Sep 23, 2017

Eight circles and a set of semi-transparent gray squares illustrate the concept of containment as a visual channel for marks as links. The animation cycles through three square layouts, adding squares one at a time to show how the circles’ group membership changes with each new container. Built with D3 v4, the SVG renderer updates the `rect` and `circle` elements through data joins, using `enter()`, `merge()`, and `exit()` to handle the dynamic square data. The circles remain fixed while the containers change, emphasizing the spatial relationship between marks and their enclosing regions.

AI-generated description

Dynamic Illustration of Marks as Links - Containment from Chapter 5 of Visualization Analysis and Design by Tamara Munzner.

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Marks and Channels Shape using D3

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.

KKCachel
75% match
Loading thumbnail…

Marks and Channels

This visualization demonstrates the concept of marks and channels, showing how position (x and y), size, length, shape, and hue encode data in separate SVG panels. Each panel uses D3 joins to bind the array [0, 1, 2, 3, 4] to circle, rect, and path elements, with attributes like `cx`, `cy`, `r`, `height`, and `fill` set via scale-like functions. The code imports from the `d3` module, using `schemeCategory10` for color, `symbol()` and `symbolsFill` for shapes, and `selection.each()` to dispatch each mark function.

CCurran Kelleher
74% match
Loading thumbnail…

Circles_1

A D3.js visualization renders four static shapes on an SVG canvas: two circles and two rectangles, each with hardcoded coordinates and fill colors. The circles appear at the top-left, followed by the rectangles further right and downward, demonstrating how to bind data arrays to SVG elements. The code uses d3.select, append, data, and enter to create the shapes, grouping circles into a dedicated SVG group element (`g`) before setting their positional and styling attributes via function callbacks. The example uses d3.v4 from the official CDN and displays no interactivity or animation.

MMettiHoof
72% match
Loading thumbnail…

Circles

Twenty colored circles of varying sizes move through a rectangular chart, bouncing off the edges and reacting to user clicks. The example demonstrates a reusable chartlet built with D3 v4 and the d3Kit library, using `d3.scaleLinear` for positioning and radius, plus `d3.scaleOrdinal` for color. Circles animate via D3 transitions and toggle to black when clicked.

663anp3ca
72% match
Loading thumbnail…

D3 Marks & Channels

This example demonstrates five fundamental D3 marks and encoding channels using a small array of numbers. It shows circles positioned along the x-axis and y-axis, circles scaled by area, rectangles representing length, and symbols displaying different shapes. The visualization uses D3 v7 with the `select`, `symbol`, and `symbolsFill` APIs to bind data and generate SVG elements. The data is a simple fixed set of integers, rendered as multiple separate SVG canvases, each focusing on a distinct mark and channel combination.

SSubhendu Karmakar
72% match
Loading thumbnail…

Recreate Marks and Channels

This example recreates a visualization of marks and channels using a grid of eight circles mapped to categorical positions. A black line connects two circles, and clicking the “New Line” button draws a randomly selected red line between two different points, with previous red lines removed. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleLinear` for positioning, and includes hover tooltips that display circle names via a styled div. Interaction is driven by button-triggered `draw_line` functions and mouse events.

YYouthBread
72% match
Loading thumbnail…

Re-create Marks & Channels Graphic

Four simple SVG shapes—a cross, circle, square, and triangle—stand in a diagonal line, each rendered as a symbol from D3's `d3.symbol()` API. The shapes demonstrate distinct mark types using the `d3.symbolCross`, `d3.symbolCircle`, `d3.symbolSquare`, and `d3.symbolTriangle` generators. Each path is positioned via a `transform` attribute that calculates x-coordinates from an array index and adds a slight vertical offset, while a fixed `size` of 50 by 50 keeps them uniform. The code binds the data array with `selectAll` and `enter`, then applies attributes using `attrs` from d3-selection-multi, running entirely with D3 v4 in an SVG container.

RRainismZ
72% match
Loading thumbnail…

Marks and Channels

This visualization demonstrates the concept of marks and channels in data visualization, showcasing how different visual encodings represent the same dataset. Using D3 version 7.8.5, six separate SVG panels each apply a distinct channel—X position, Y position, size, length, shape, and hue (color)—to encode the data points [0, 1, 2, 3, 4]. The code leverages D3’s `selection.each()` to iterate through these channel modules, `d3.symbol()` for path generation, and `schemeCategory10` from D3 for color mapping. It also utilizes SVG rectangles, circles, and path elements with `transform` and `fill` attributes.

Mmelissastrong89@gmail.com
72% match