Skip to main content
SimilarExport ZIP
100%

Fork of Marks and Channels

✓ Published0🌍 Public
QQingyang Wang Profolio
Last edited Feb 6, 2023
Created on Feb 6, 2023
Forked from Marks and Channels

A scatterplot maps four data points along x and y axes, each representing paired win rates between two categories. The visualization uses d3.axisBottom and d3.axisLeft to render scales, while d3.scaleLinear maps the 0–100 data range to pixel coordinates within a fixed 400x150 SVG canvas. The chart demonstrates basic mark placement with spatial position channels, though it does not encode additional visual variables like shape or color.

AI-generated description
MIT Licensed

Similar vizzes

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
79% 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
77% 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
77% match
Loading thumbnail…

Fork of Marks and Channels

This fork of Marks and Channels demonstrates how different visual encodings—position, length, size, shape, and hue—can represent data, alongside a pie chart showing cuisine order counts. The example uses D3 v7 (`d3.select`, `d3.pie`, `d3.arc`, `d3.symbol`) to render circles, rectangles, and paths for each mark, with data for American, Japanese, Chinese, Indian, and Mexican cuisines. The pie chart applies a categorical color scale with labels positioned via `arcGenerator.centroid`, while the other marks use fixed or data-driven attributes to show alternative encodings.

Jjjlaber
76% 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
76% 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
75% match
Loading thumbnail…

Fork of Marks and Channels

This fork of the marks and channels example displays Stanley Cup win totals for the original six NHL teams in a donut chart. The visualization uses color as a channel to distinguish teams, with a legend absent. The code employs d3-shape’s `pie` and `arc` generators to compute the arcs, drawing them as SVG paths with fills from a hardcoded color array. Data is embedded directly in `viz.js`, and the chart renders centered in an SVG that fills the viewport.

Sstchiang
75% 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
75% match