Fork of Marks and Channels

100%

Fork of Marks and Channels

✓ Published0🌍 Public

Last edited Oct 7, 2024

Created on Oct 7, 2024

This visualization demonstrates the core concepts of marks and channels by rendering the same dataset—comprising values for Singapore across four categories—using distinct visual encodings for each channel. It shows how point marks can encode data through x-position, y-position, size, and hue, while line length and shape are used for additional attributes. Built with D3.js version 7, the example employs JavaScript modules for each channel, using `d3.scaleLinear` for scaling, `d3.lineRadial` for radar lines, and SVG elements like circles, rectangles, and paths. The code also uses `selection.each()` and `d3.schemeCategory10` for color, with a radar chart layout for the final composite.

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…

Fork of Marks and Channels

This example breaks down the fundamental concepts of marks and channels in data visualization. It renders a radar-style chart from a small inline dataset of four skill categories. Each visualization module—controlling x-position, y-position, size, shape, hue, and line length—uses distinct D3 APIs, including `selection.each()`, `d3.symbol()`, `d3.schemeCategory10`, SVG attributes like `transform` and `fill`, and JavaScript modules. The view demonstrates how different channels can represent data values while maintaining consistent scales and positioning.

Ccrijos

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

88% match

Loading thumbnail…

plot

This visualization demonstrates the foundational concept of Marks and Channels through a series of simple, generated datasets. It renders points, lines, and rectangles using D3’s `select` and `join` API, with each channel—x-position, y-position, size, length, and color—varied independently to show how data attributes map to visual encodings. The bar chart uses horizontal line lengths, while scattered circles and a color scheme from `d3.schemeCategory10` illustrate categorical hue. The code is modular, with separate JavaScript files for each mark and channel, and relies on D3 modules for the SVG rendering.

Aalexwd019@gmail.com

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

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

87% match

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

87% match

Loading thumbnail…

Fork of Marks and Channels

This visualization demonstrates five distinct marks and channels—x-position, y-position, length, size, and shape—each rendered on separate SVG layers using d3-selection. The x-position layer maps population income groups to horizontal coordinates and life expectancy estimates to vertical positions, colored via d3.schemeCategory10. The hue channel uses d3.schemeCategory10 to color circles, while length encodes values through rectangle heights, size through circle radii, and shape through d3.symbol with predefined symbol types. The React-based interface includes a Dropdown component for user interaction.

KKhatera Alizada

84% match

Loading thumbnail…

Marks and Channels

This example illustrates the fundamental concept of encoding data through different visual channels—position, length, size, shape, and color—using D3.js. Five distinct marks, each with a static array of five data points, are rendered in separate panels to demonstrate how changing a single channel alters the representation of the same data. The code uses the D3 `select`, `join`, and `attr` API to build SVG circles, rectangles, and paths, applying `schemeCategory10` for categorical colors and custom functions for scaling and positioning.

Kkratikashetty1102@gmail.com

84% match