Fork of Marks and Channels

100%

Fork of Marks and Channels

✓ Published0🌍 Public

Last edited Feb 4, 2023

Created on Feb 4, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

82% 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…

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

80% match

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

79% match

Loading thumbnail…

Fork of Marks and Channels

This fork of Marks and Channels demonstrates fundamental D3 visualization concepts by plotting a small dataset of seven countries according to their personal freedom and capital scores. The visualization uses circles as point marks, with horizontal and vertical positions encoding the two metrics, while circle radius encodes the average of both scores and color distinguishes countries using `d3.scaleOrdinal` with `d3.schemeCategory10`. The implementation shows a bubble chart built with SVG circle elements, `d3.axisBottom` and `d3.axisLeft` for axes, and linear scales for positioning. Country labels are placed inside each circle using SVG text elements. The code illustrates scaling factors, SVG attributes `transform` and `fill`, and D3 color schemes.

Ppbruss@bu.edu

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…

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

78% match