Skip to main content
SimilarExport ZIP
100%

Psuedo-viz

✓ Published0🌍 Public
AAri Schechter
Last edited Oct 11, 2024
Created on Sep 27, 2024
Forked from Marks and Channels

This demo showcases several basic D3.js concepts for encoding data with marks and channels. It uses point marks (circles) to map data to X position, Y position, and size, plus a line mark with varying length and colored rectangles for a bar-like display. The code relies on D3 modules such as `d3-scale` for linear and ordinal scaling, `d3-axis` for axes, and `d3-shape` with `symbol` for SVG path elements. It also applies `d3.schemeCategory10` for color encoding and uses `selection.each()` to orchestrate multiple sub-visualizations within a single SVG.

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…

Pseudo-Visualization

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.

Ssamozarif@gmail.com
82% 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
81% 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
79% 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
77% 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
77% 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
77% 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
76% match
Loading thumbnail…

Fork of Marks and Channels

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.

Ccrijos
76% match