VI4 - Identity as Spatial Region

100%

VI4 - Identity as Spatial Region

✓ Published0🌍 Public

Last edited Feb 17, 2016

Created on Feb 17, 2016

Five labeled circles sit in a row, their radii encoding identity for five college teams. The example swaps color for spatial size, mapping each team’s name to a distinct radius value on an SVG canvas. Built with D3.js version 3.5.5, it binds an array of [name, value] pairs to circles, then sets each circle’s `r` attribute directly from the dataset. The fixed horizontal positions and vertical centering create a simple, clean comparison of spatial magnitude as a categorical identity cue.

AI-generated description

James Eanes - VI4 - Identity as Spatial Region

This example is similar to the Identity as Color Hue example, but instead of changing the circle's color by identity, it changes the circle's radius.

Similar vizzes

Loading thumbnail…

VI4 - Identity as Color Hue

This example visualizes a small dataset of college football teams by encoding each team’s identity directly as a color hue. Five circles, one per team, are arranged horizontally, with each circle’s fill color matching a team-specific value from the dataset. The code uses D3.js (version 3.5.5) to select and append SVG circles, binding the data array that pairs team names with colors. The rendering approach relies on SVG attributes like `cx`, `cy`, `r`, and `fill`, with the fill determined by the second element of each data pair. The data source is a subset of a passing yards dataset, provided via gist.

JJamestiberiuseanes

86% match

Loading thumbnail…

Untitled

Five circles in a horizontal row show a small dataset of numeric values, sized proportionally and shaded with a sequential color scale from light to dark green, with each value labeled beside it. The code uses D3 v4’s data join to bind an array of five numbers to SVG group elements, then appends circles and text. Circle radii are scaled by the data value, and colors come from a hardcoded array, while dimensions are set directly on the SVG.

DDavid-Wong110723

74% match

Loading thumbnail…

Data join example

Five circles rendered in SVG display scores for named individuals from a hardcoded data array. The example demonstrates joining data to graphical elements: `d3.selectAll('circle')` selects the existing circle nodes, then the `.data(scores)` method binds each score object to a circle, and the `.attr('r', ...)` call sets circle radii proportionally to the score values. The visualization relies on the D3.js library (version 4.2.2) and uses plain JavaScript array manipulation.

FFrissAnalytics

73% match

Loading thumbnail…

Untitled

Three circles of different sizes and colors are rendered in an SVG, each labeled with its corresponding node name and filled with a diagonal stripe pattern. The visualization uses D3 version 3 to bind data from a JSON array containing node positions, radii, labels, and colors. The code appends a pattern definition to the SVG defs and creates two overlapping circles per node: a solid color base and a striped overlay, with text positioned relative to each circle’s radius.

MMokshithabhi

73% match

Loading thumbnail…

Circles

A static collection of six colored circles sits on a light green background, each with a distinct position, radius, and fill color. The visualization demonstrates basic D3.js shape rendering within a Svelte component using the `select` API to create an SVG canvas. Data is stored as an array of objects containing `x`, `y`, `r`, and `fill` properties, which are bound to `<circle>` elements via `attr` calls. The circles use a uniform opacity value of 0.708, creating a subtle translucency across all shapes.

Rrichard.adamson@hotmail.com

72% match

Loading thumbnail…

Circles Test

Three colored circles sit on a blank canvas, each representing a fruit: a yellow banana, a blue grape, and a red apple, with positions and radii set from an inline array. Built with D3 v4, the visualization appends an SVG element and uses `d3.select`, `selectAll`, and chained `.attr` and `.style` calls to map each data object’s x, y, r, and color properties directly to circle attributes. The rendering relies entirely on SVG shapes, with no axes, labels, or interaction.

JJn1532

72% match

Loading thumbnail…

Untitled

Five circles sit on a shared horizontal axis, each sized by a value from the current dataset. A button switches between two data arrays, triggering a one-second transition that repositions circle radii and x-coordinates. Using D3.js v6 with SVG and animation, the code employs data joins, `enter`/`exit` selections, and `transition` to update the visualization. An axis line and a title label (highlighting the active dataset) complete the chart, which renders entirely in the browser.

Ssgzzhinde

72% match

Loading thumbnail…

Untitled

Three circles of varying sizes and colors visualize three numeric values from a clay dataset, with each circle’s radius roughly corresponding to its value and a number label placed inside. The code builds an SVG using D3 v7 in a React-friendly HTML page, drawing the circles with fixed coordinates and styling them with opacity and white strokes. It directly appends SVG elements via `d3.select` and `.append`, setting circle positions, radii, and fill colors, while text elements display the values 62, 11, and 17 in font sizes tied to those numbers.

Rrykay

72% match