Fork of Marks and Channels

100%

Fork of Marks and Channels

✓ Published1🌍 Public

Last edited Feb 5, 2023

Created on Feb 4, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

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

81% match

Loading thumbnail…

Fork of Marks and Channels

Five small multiples panels illustrate core D3 marks and channels. Each panel encodes the same five-value array through a different visual variable: x position, y position, size, length (bar height), shape (using `d3.symbol` and `symbolsFill`), and hue (using `schemeCategory10`). The `viz.js` file binds an array of functions to SVG elements via `selection.join`, applying each function to render its panel in separate SVG containers.

CCHANDU BHARGAVI

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

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

80% match

Loading thumbnail…

Marks and Channels_NH

This example demonstrates how different visual channels can encode the same quantitative data. Seven circles are horizontally positioned by value, with their size, position, and color all reflecting the data. The visualization cycles through three distinct encoding methods: length, where bars of varying height represent values; size, where circles use square-root scaling for area; and hue, which assigns categorical colors from `d3.schemeCategory10`. Built with D3 v7, it uses data joins and selection methods to render the SVG marks.

NNavak94

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

79% match

Loading thumbnail…

Fork of Marks and Channels

Fork of Marks and Channels demonstrates five distinct visual encodings for a dataset of indices 0 through 4: x-position, y-position, size, length, and shape, plus a final panel showing hue with `schemeCategory10`. Each panel renders as a separate SVG using `d3.select` and data joins via `.join()`. The code imports specific D3 APIs such as `symbol()` and `symbolsFill` for shape encoding, alongside basic `attr` assignments for positioning and scaling.

Mmavercikalvin

79% match

Loading thumbnail…

Marks and Channels

A small multiples grid of five D3.js plots demonstrates how the same dataset—the numbers zero through four—can be encoded through different visual channels. Each panel isolates a single mark or channel: x-position, y-position, size, length, shape, and hue, using circles, rectangles, and paths. The code uses D3’s selection and join API within a custom viz.js orchestrator, rendering SVG directly. Shape encoding leverages d3.symbol() with symbolsFill, while hue applies schemeCategory10.

SSubhendu Karmakar

79% match