Fork of CHPATER 3 PRACTICE2

100%

Fork of CHPATER 3 PRACTICE2

✓ Published0🌍 Public

Last edited Sep 9, 2025

Created on Sep 9, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

CHPATER 3 PRACTICE

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.

BBismark Kofi Owusu Sarfo

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

80% match

Loading thumbnail…

Fork of CHPATER 3 PRACTICE 3.4

This fork of Chapter 3 Practice 3.4 renders the classic Iris dataset as a set of eight SVG strip charts, each plotting one numeric attribute or species category along a horizontal axis. The visualization shows distributions for sepal length, sepal width, petal length, petal width, sepal ratio, petal ratio, petal area, and species using circles. Built with d3 v7 and SVG, it uses d3.csv to load the data and d3.scaleLinear for positioning. Each row’s title is added via a custom renderTextLabel function, with species color-coded by category.

BBismark Kofi Owusu Sarfo

78% match

Loading thumbnail…

Fork of Fork of Circles with D3

This example demonstrates how to create and manipulate circles using D3.js, showing a collection of colored circles positioned at specified x and y coordinates with varying radii and fill colors. The visualization uses the d3.select and data join pattern with method chaining to bind data to SVG circle elements, setting attributes like cx, cy, r, and fill through functions. It incorporates the D3 General update pattern with a join operation on an SVG selection, enabling efficient re-rendering. The example sources an external CSV dataset for an alternate area chart showing store sales by store area.

RRohithNaiduDevareddy@my.unt.edu

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

77% match

Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to draw a set of circles with D3.js, positioning them using explicit x and y coordinates and styling each with a distinct fill color and opacity. It shows the core data-join pattern by binding an array of circle objects to SVG elements, then using method chaining to set attributes like center position, radius, and color. The visualization uses the D3 `select` function and the `join` method to manage the SVG container and its children. The approach emphasizes a clean separation between data and rendering logic, making it easy to swap in different datasets or apply thematic modifications.

RRohithNaiduDevareddy@my.unt.edu

77% match

Loading thumbnail…

Fork of Circles with D3

This example uses D3.js to render seven colored circles of varying sizes and positions on a dynamically sized SVG canvas. The visualization demonstrates the D3 data join pattern, binding an array of objects containing x, y, radius, and fill properties to circle elements with a uniform opacity. The code employs `select`, `join`, and `.attr` methods to create and style the shapes, showcasing method chaining and the General Update Pattern for dynamic SVG rendering.

JJohn J. Pinckney

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