Pseudo-Visualization

100%

Pseudo-Visualization

✓ Published0🌍 Public

Last edited Sep 28, 2024

Created on Sep 28, 2024

This visualization demonstrates the fundamental D3 concepts of marks and channels by rendering the same five-value dataset across six separate SVG panels. Each panel isolates a single encoding channel: x-position, y-position, circle size, rectangle length, symbol shape, and categorical color. The code uses D3 selections, `selection.join()`, and `selection.each()` to drive the panels, with explicit SVG attributes for positioning, sizing, and styling. It applies `d3.symbol()` for path-based shape generation, `d3.schemeCategory10` for color mapping, and uses modular JavaScript files to keep each channel’s logic separate.

AI-generated description

A demonstration of basic D3 usage to implement the concept of Marks and Channels. Includes usage of:

Point Marks by X, Y, Size
Line mark varying in length
Scaling factors
SVG Rectangles
selection.each()
SVG Path Elements
d3.symbol()
SVG attributes transform and fill
D3 Color Schemes
JavaScript Modules

Part of the Constructing Visualizations Playlist.

See also blocks.roadtolarissa.com: Marks and Channels (a vanilla JavaScript version of this).

MIT Licensed

Similar vizzes

Loading thumbnail…

Marks and Channels

This example demonstrates the core visualization concept of marks and channels by rendering five separate SVG panels. Each panel uses the same dataset of five values to illustrate different visual encodings: X position, Y position, circle size, bar length, shape variety, and color hue. The code leverages the D3.js library, specifically using `selection.each()` to iterate over the panel generator functions. It applies D3’s `schemeCategory10` for categorical colors, custom `symbol()` paths for varied shapes, and sets positions and dimensions via `attr()` calls. The visualization serves as a clear, side-by-side comparison of how different channels encode identical data.

Aabell@wpi.edu

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

87% match

Loading thumbnail…

Pseudo Visualization

This example demonstrates fundamental D3 visualization concepts by encoding a simple array of five values through multiple mark types and channels. The visualization presents the same data points as circles varied by x-position, y-position, and size, as bars with varying length, and as distinct SVG path symbols, with one view using a red hue. The implementation uses D3's `select`, `join`, and `.each()` methods, along with SVG attributes like `transform` and `fill`, and the `d3.symbol()` function to generate shapes.

PParth Shroff

85% match

Loading thumbnail…

Fork of Marks and Channels

This example visualizes the fundamental concept of marks and channels in data visualization, using six small multiples to demonstrate how the same dataset can be encoded through position, size, length, shape, and color. Each SVG panel uses a distinct D3 encoding, such as circles scaled by radius or symbols generated via `d3.symbol()`. The code relies on D3's selection API with `.join()` and `.each()` to create and update the graphics, along with color schemes like `schemeCategory10` and JavaScript modules to organize the distinct channel implementations.

NNICHAPA

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

83% match

Loading thumbnail…

Fork of Marks and Channels

This example illustrates the fundamental concept of marks and channels in data visualization by generating six separate SVG plots, each encoding the same array of five integers using a different visual channel: x position, y position, circle size, bar length, shape, and hue. The code leverages D3 v7 modules including `selection.join()`, `d3.symbol()` for generating shape paths, and the `schemeCategory10` color scheme. It demonstrates modular JavaScript by importing distinct functions like `xPosition` and `size` from separate files, with each function applying a unique scaling factor to the data. The rendered output shows how identical data can be represented through varied visual attributes.

Sste.jendritz@gmail.com

83% match

Loading thumbnail…

Marks and Channels

Six small multiples demonstrate how different visual channels encode the same five-point dataset. Each panel maps a value to a different mark property: x-position, y-position, rect length, circle area, symbol shape, and categorical color via `schemeCategory10`. Panels are rendered as separate SVGs using `select` and `join` from the v7 D3 API, with each channel defined in its own module (`xPosition.js`, `length.js`, `hue.js`, etc.) and composed in `viz.js`.

LLauren

82% match

Loading thumbnail…

MZ Marks and Channels

This example demonstrates six fundamental marks and channels in D3, each rendered as a separate SVG panel using `d3.select`, `selection.join`, and `selection.each`. It sequentially applies positional encodings (x, y), size (radius), bar length, shape via `d3.symbol` with contrasting symbols, and hue using `d3.schemeCategory10` color scheme. Each panel uses static synthetic data—an array [0,1,2,3,4]—and explicit pixel mappings for scales, with circles, rectangles, and paths drawn as SVG elements. The main `index.js` orchestrates multiple modules, importing named functions and binding them to data-driven SVG containers.

Mmzujewski@wpi.edu

82% match