Fork of Marks and Channels

100%

Fork of Marks and Channels

✓ Published0🌍 Public

Last edited Sep 24, 2024

Created on Sep 23, 2024

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.

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

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

79% match

Loading thumbnail…

Fork of Pseudo-Visualization

This scatter-bubble plot visualizes the 2023 Global Country Development & Prosperity Index by comparing Personal Freedom and Social Capital scores for each country. Marks represent countries as points, with x/y positions encoding social capital and personal freedom, while circle radius encodes overall average score and color uniquely identifies countries. The visualization uses D3 scales (scaleLinear and scaleOrdinal) for positioning and aesthetics, with data loading from the Kaggle dataset. Axes labels and title are rendered using utility functions from the @curran/axis-labels module.

Ppbruss@bu.edu

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

79% match

Loading thumbnail…

Fork of Marks and Channels

This example illustrates the fundamental concept of marks and channels in data visualization by generating six separate SVG plots, each encoding the same array of five integers using a different visual channel: x position, y position, circle size, bar length, shape, and hue. The code leverages D3 v7 modules including `selection.join()`, `d3.symbol()` for generating shape paths, and the `schemeCategory10` color scheme. It demonstrates modular JavaScript by importing distinct functions like `xPosition` and `size` from separate files, with each function applying a unique scaling factor to the data. The rendered output shows how identical data can be represented through varied visual attributes.

Sste.jendritz@gmail.com

79% 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 ICE-6: Rendering Marks and Channels with React & D3

This dashboard plots country-level data as a scatterplot, using x/y positions to represent two quantitative variables and point color to encode a third. Built with React and D3 v5, the visualization constructs SVG circles from a dataset of countries and marks them with a linear color scale. The code explicitly uses `d3.scaleLinear` to map data values to positions and colors, and `d3.extent` to compute the domain from the underlying CSV data. The page title and data values are rendered directly from the dataset, showing the integration of React’s declarative UI with D3’s quantitative mapping functions.

SSweetierams

79% match

Loading thumbnail…

Pseudo-Visualization

This D3 scatter-bubble plot visualizes the 2023 Global Country Development & Prosperity Index dataset, comparing Personal Freedom and Social Capital scores for a sample of five countries. Each circle’s x-axis position encodes social capital, y-axis position encodes personal freedom, while the radius (scaled via `scaleLinear`) represents overall average score and color assigns each country a unique category from `schemeCategory10`. The visualization uses `d3.select`, `scaleOrdinal`, and custom modules for axes and circle rendering, with fixed domains from 0 to 100 for both axes.

Ppbruss@bu.edu

78% match