CHPATER 3 PRACTICE

100%

CHPATER 3 PRACTICE

✓ Published2🌍 Public

Last edited Sep 9, 2025

Created on Sep 9, 2025

Eight horizontal rows of circles demonstrate how visual channels encode data. Each row represents a different channel: x position, y position, size, length, shape, hue, luminance, and saturation, using five data points per row. The code uses D3 v7 with SVG rendering, employing selection joins and attribute setters like `.attr('cx', ...)` and `.attr('fill', (d) => \`hsl(${d * 72}, 50%, 50%)\`)` to map values to visual properties.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of CHPATER 3 PRACTICE2

This visualization demonstrates the mapping of a five-point dataset to various visual channels, including x-position, y-position, size, length, shape, and color properties (hue, luminance, and saturation). Each row in the SVG output isolates one channel, using D3 v7's `select` and `.join` API to render and update circles or grouped shapes. The color examples employ `hsl()` color strings to encode the data values, while the shape example uses both circles and rectangles within a group.

BBismark Kofi Owusu Sarfo

87% match

Loading thumbnail…

D3 Selection Practice pt2

Fifteen circles arranged along a sine wave demonstrate basic D3 data joins and SVG rendering. The code uses `d3.range` to generate data points, then binds them to circle elements via `selectAll().data().enter().append()`, positioning each with `cx` and `cy` attributes. The example shows how D3 v3's selection API maps array values to visual properties, with commented alternative `cy` expressions hinting at layout variations. The SVG fills the browser window, and all rendering is done dynamically in the browser.

JJimMaltby

77% match

Loading thumbnail…

D3 Selection Practice

Fifteen circles, arranged in a sine-wave pattern across the viewport, demonstrate basic D3 data joins and selections. The example uses D3 v6's `select`, `range`, and `selectAll().data().enter().append()` to bind an array of numbers to SVG circle elements, positioning them with `cx` and `cy` attributes. Rendered as an SVG in a full-window `<svg>` element, it shows how D3's functional attribute syntax derives coordinates from the bound data. The circles are static, with no interactions or transitions.

JJimMaltby

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

76% match

Loading thumbnail…

Circles with D3

This example displays a static collection of eight colored circles of varying sizes and positions on an SVG canvas. Each circle’s radius, stroke color, stroke width, and fill color are defined in a JavaScript array and rendered using D3’s data join with `selectAll`, `data`, `enter`, and `append`. The visualization demonstrates basic SVG shape creation with D3 v7, using attributes like `cx`, `cy`, `r`, `stroke`, and `fill` to map data properties directly to visual elements.

BBismark Kofi Owusu Sarfo

76% match

Loading thumbnail…

Labeled Marks and Channels

This visualization demonstrates the variety of visual channels available for encoding data, presenting eight separate SVG panels—each labeled with a mark type (position, size, shape, color, texture) displayed as a row of five circles, rects, or paths. The example uses D3.js to construct the charts, with each mark’s properties (e.g., x-coordinate, radius, fill color via `hcl()`, or pattern fill) tied to the data index. The code provides a hands-on reference for how to implement different channels, from positional and size variations to color hue, luminance, saturation, and geometric or texture-based marks.

CCurran Kelleher

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

76% match

Loading thumbnail…

Marks and Channels_NH

This example demonstrates how different visual channels can encode the same quantitative data. Seven circles are horizontally positioned by value, with their size, position, and color all reflecting the data. The visualization cycles through three distinct encoding methods: length, where bars of varying height represent values; size, where circles use square-root scaling for area; and hue, which assigns categorical colors from `d3.schemeCategory10`. Built with D3 v7, it uses data joins and selection methods to render the SVG marks.

NNavak94

75% match