Skip to main content
SimilarExport ZIP
100%

Fork of Marks and Channels

✓ Published0🌍 Public
NNICHAPA
Last edited Jul 22, 2023
Created on Jul 22, 2023
Forked from 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.

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

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
90% 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
89% 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
89% 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
88% match
Loading thumbnail…

Marks and Channels

This example demonstrates D3 marks and channels by rendering six small multiples, each using a different visual channel—x position, y position, size, length, shape, and hue—to encode the same array `[0,1,2,3,4]`. Each SVG is generated using D3’s `select`, `selectAll`, and `join` API, with channels implemented via attribute callbacks like `attr("cx", ...)` and `attr("r", ...)`. It also uses `d3.symbol()` for generating SVG path symbols, `d3.schemeCategory10` for color, and the `selection.each()` method to apply each channel’s function. The code uses the `d3` module from a local script, relying on `d3.select`, `d3.selectAll`, and `d3.join` to build and update the SVG elements.

CCurran Kelleher
88% 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
87% 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
87% 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
86% match