Skip to main content
100%

Position on common scale

✓ Published0🌍 Public
Aadamfknapp
Last edited Sep 23, 2017
Created on Sep 23, 2017

Four horizontal axes share a common scale, each drawn as a line with end caps, and each contains a single black circle positioned at a different value along the line. The example illustrates the concept of comparing positions on a common scale, as discussed in Munzner’s Visualization Analysis & Design. The visualization is built with D3 v4, using SVG primitives such as `append('circle')`, `append('line')`, and attribute setters like `.attr('cx')`, `.attr('x1')`, and `.attr('y1')` to define the geometry directly.

AI-generated description

Built with blockbuilder.org

This is a reproduction of a chart in chapter 5 of Visualization Analysis & Design by Tamara Munzner (2014) (Links to an external site.)Links to an external site. (ISBN 9781466508910)

mit Licensed

Similar vizzes

Loading thumbnail…

Position in Common and Unaligned Scales

Based on Tamara Munzner's "Visualization Analysis & Design," this D3.js example contrasts length and position encoding by rendering four horizontal lines with black tick marks at their endpoints and a square marker positioned along each line. The top two lines share a common x-axis scale, while the bottom two use unaligned scales, demonstrating how changes in square position can be read accurately on a common scale but become misleading when scales differ. The visualization uses d3.scaleLinear to map a 0–500 domain to a 0–500 pixel range, and SVG primitives (`line`, `rect`, `text`) are appended via d3.select and g.selectAll().data().enter(). Data is hardcoded as an array of coordinate objects.

RRobertDelgado
84% match
Loading thumbnail…

4 circulos

Four circles are arranged horizontally on an SVG canvas, with radii of 10, 25, 50, and 100 units, reflecting their numeric data values. The visualization uses D3 v3 to bind the data array to circle elements, positioning them with a linear scale based on index and scaling their radii via a square-root scale (`d3.scale.sqrt`) so area encodes value. The circles sit centered vertically on a 500-by-200 pixel canvas, demonstrating a simple proportional-size encoding with the SVG rendering approach.

Aaaizemberg
75% match
Loading thumbnail…

D3 Scale Function PRactice

This example demonstrates D3 scale functions by mapping a small array of numeric values to positions along an SVG axis. It renders circles and labels on a horizontal line using a linear scale, then displays the corresponding axis with `d3.axisBottom`. The code imports a custom `getScale` utility from `utils.js` that switches between D3’s scale types—including `scaleLinear`, `scaleSqrt`, `scaleLog`, and others—although only the linear scale is actively applied. The visualization uses SVG rendering with a fixed 960×500 canvas and D3 v7 via `bundle.js`.

SSubhendu Karmakar
74% match
Loading thumbnail…

Scales and Axes

This example demonstrates D3’s scale and axis functions by rendering an empty plotting area with a gray inner rectangle and labeled axes. It uses `d3.scaleLinear` to map data values from 0 to 100 to pixel coordinates, and `d3.axisBottom` and `d3.axisLeft` to generate tick marks and labels along the bottom and left edges. The visualization is drawn into an SVG container, with margins defined for the plot frame. No dataset is shown; the focus is purely on constructing a coordinate system with D3’s low-level utilities.

Mmelissastrong89@gmail.com
74% match
Loading thumbnail…

D3 Scale Functions

This example demonstrates how D3 scale functions map input data values to visual output positions. It plots a set of numeric data points as circles along a horizontal axis, with each value labeled above its corresponding circle. The code uses `d3.scaleLinear()` to map the domain (0–10) to a pixel range, and renders the result as SVG elements. An axis is added using `d3.axisBottom()`, and the utility function `getScale` supports multiple scale types, including `scaleSqrt`, `scaleLog`, and `scaleBand`, though only linear is actively applied here.

SSubhendu Karmakar
74% match
Loading thumbnail…

D3 - Axes

This example demonstrates how D3’s axis components render tick marks and labels for a linear scale. Four separate axes—left, right, top, and bottom—are drawn inside an SVG container, all sharing the same `d3.scaleLinear` domain of 0 to 100 mapped to a 400-pixel range. The code uses `d3.axisLeft`, `d3.axisRight`, `d3.axisTop`, and `d3.axisBottom` to generate the axes, then attaches each to a corresponding `<g>` group using `selection.call`. The visualization highlights the standard D3 approach for orienting axes around a plot area.

SSubhendu Karmakar
74% match
Loading thumbnail…

39. D3 Scale Plot Big

A scatterplot maps a small dataset of eleven coordinate pairs onto an SVG canvas, with circle positions scaled by d3.scaleLinear functions for the x- and y-axes, and circle radii scaled by another linear scale based on the y-value. Each point is labeled with its original coordinates in red sans-serif text. The chart demonstrates basic scaling and data-binding patterns within D3 version 4.5.0, using standard selection and enter-append methods to generate SVG elements from the array. No axes, tooltips, or interactivity are included.

Aamakanju@nyit.edu
74% match
Loading thumbnail…

Scales and Axes

This example demonstrates how D3.js maps data values to screen coordinates using linear scales and renders labeled axes. A grey inner rectangle spans the plotting area, and the `scaleLinear` function transforms the domain 0–100 into pixel positions for both x and y dimensions. The `axisBottom` and `axisLeft` components generate tick marks and labels along the bottom and left edges, while the `join` method efficiently manages SVG elements. The visualization is created using D3 version 7.8.5, with the chart’s dimensions and margins dynamically calculated from the container size.

CCurran Kelleher
74% match