Figure 5.12 - Popout

100%

Figure 5.12 - Popout

✓ Published0🌍 Public

Last edited Nov 1, 2019

Created on Nov 1, 2019

This visualization recreates Figure 5.12 from Tamara Munzner’s book, demonstrating how different visual channels enable pre-attentive popout: tilt, size, shape, proximity, and shadow direction, while parallel line pairs fail to stand out from distractors. The display arranges six labeled panels in a 2×3 grid, each containing a grid of marks where one target differs from the others. The code uses D3 v4 to append SVG rectangles and circles, applies drop-shadow SVG filters for the shadow-direction panel, and calculates frame positions and mark spacing programmatically.

AI-generated description

<h1>Popout</h1> <ul> <li>David J. C. Beach</li> <li>CS 573 - Data Visualization</li> <li>Prof. Curran Kelleher</li> </ul> <p>This is a recreation of Figure 5.12 of "Visualization Analysis and Design" by Tamara Munzner, ch 5, p 110.</p> <p>Many channels support visual popout, including (a) tilt, (b) size, (c) shape, (d) proximity, and (e) shadow direction. (f) However, parallel line pairs do not pop out from a sea of slightly tilted distractor object pairs and can only be detected through serial search. After <a href="http://www.csc.ncsu.edu/faculty/healey/PP">http://www.csc.ncsu.edu/faculty/healey/PP</a> by Christopher G. Healey.</p>

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/dbeach24/'>dbeach24</a>'s block: <a href='http://bl.ocks.org/dbeach24/bacaa17aa7e539dc3ffab8feed59daef'>Popout</a>

mit Licensed

Similar vizzes

Loading thumbnail…

d3 bootstrap popovers (exhibit A)

A grid of circles fills an SVG, each with a randomized radius. Hovering over a circle triggers a Bootstrap-style popover containing a title and a dynamically generated SVG rectangle whose width corresponds to the circle's radius. The example demonstrates a custom tooltip plugin for d3.v2 that integrates jQuery and Bootstrap CSS, supporting multiple placement and detection modes for interactive data annotation.

GGerHobbelt

69% match

Loading thumbnail…

d3 bootstrap popovers (fix)

A grid of randomly sized circles renders in SVG via d3.js, with each circle linked to a Bootstrap-styled popover that appears on hover. The popover displays a title and an embedded SVG showing a rectangle scaled to ten times the circle’s radius, positioned dynamically using the `tooltip` plugin. The code demonstrates a fixed popover placement with shape-based detection and includes fixes for race conditions in mouseout/mouseenter handling, ensuring the tooltip persists correctly when transitioning between circle and popover.

GGerHobbelt

67% match

Loading thumbnail…

Pseudo-Visualization

This visualization demonstrates the fundamental D3 concepts of marks and channels by rendering the same five-value dataset across six separate SVG panels. Each panel isolates a single encoding channel: x-position, y-position, circle size, rectangle length, symbol shape, and categorical color. The code uses D3 selections, `selection.join()`, and `selection.each()` to drive the panels, with explicit SVG attributes for positioning, sizing, and styling. It applies `d3.symbol()` for path-based shape generation, `d3.schemeCategory10` for color mapping, and uses modular JavaScript files to keep each channel’s logic separate.

Ssamozarif@gmail.com

67% match

Loading thumbnail…

Marks and Channels

This example demonstrates the core visualization concept of marks and channels by rendering five separate SVG panels. Each panel uses the same dataset of five values to illustrate different visual encodings: X position, Y position, circle size, bar length, shape variety, and color hue. The code leverages the D3.js library, specifically using `selection.each()` to iterate over the panel generator functions. It applies D3’s `schemeCategory10` for categorical colors, custom `symbol()` paths for varied shapes, and sets positions and dimensions via `attr()` calls. The visualization serves as a clear, side-by-side comparison of how different channels encode identical data.

Aabell@wpi.edu

66% match

Loading thumbnail…

circle popup

Six colored circles of varying sizes pop into view on a light green background, each growing from a radius of zero to its assigned size over an eight-second staggered transition. The circles remain static once fully expanded, with no further movement or interaction. The visualization uses D3.js selection joins with enter, update, and exit handlers, applying the `transition` API with `easeLinear` for the fast update phase. Hardcoded data defines each circle's position, radius, and fill color, with opacity set to 0.708 for a translucent effect.

NNeeraj Kumar

66% match

Loading thumbnail…

d3

This example demonstrates masked striped patterns overlaid on top of each other. It creates 100 horizontal rectangles and 100 vertical rectangles, each with a height or width of 10 pixels, spaced 20 pixels apart. The rectangles are masked using SVG masks with circular cutouts, creating a crosshatch effect with a circular reveal. The visualization uses D3 v6 with `select`, `selectAll`, and `data` joins to bind the mark arrays to the SVG elements, rendering the output as SVG in a React-styled HTML page.

Eelgato_1994

65% match

Loading thumbnail…

Fork of Marks and Channels

Five small multiples panels illustrate core D3 marks and channels. Each panel encodes the same five-value array through a different visual variable: x position, y position, size, length (bar height), shape (using `d3.symbol` and `symbolsFill`), and hue (using `schemeCategory10`). The `viz.js` file binds an array of functions to SVG elements via `selection.join`, applying each function to render its panel in separate SVG containers.

CCHANDU BHARGAVI

65% match

Loading thumbnail…

Untitled

This visualization creates a circular aperture effect on a full-screen grid of horizontal and vertical black bars. Using D3 selections and data joins, the code generates 30 horizontal and 80 vertical rectangular strips, then applies two SVG masks with white and black circles at the center to selectively reveal or hide intersections. The result resembles a moiré pattern or camera viewfinder, where overlapping bars form a circular optical illusion against the white background. The implementation uses D3’s `select`, `data`, and `enter` APIs along with SVG mask elements to achieve the layered visual effect.

Ssubratanp

64% match