Spiderweb visualization

As explained in D3.js in Action, Third Edition

A spiderweb visualization is a custom graphic that encodes data attributes through the geometry and styling of a spiderweb-like form.

A spiderweb visualization encodes data attributes through a spiderweb-like graphic. Its geometry and styling can vary while retaining the recognizable web form. section 14.6

Map data to visible characteristics such as:

• overall size section 14.6
• number of spindles section 14.6
• number of concentric rings section 14.6
• web “sagginess” and associated spider color section 14.6

Horror novels

Represent each of the top 20 horror novels as a spiderweb. Derive its size, spindles, rings, web shape, and spider color from attributes including pages, genres, age, and general rating. section 14.6

Figure 14.21 The novels’ data is visualized with the size, number of spindles, number of concentric rings, and the “sagginess” of the spiderwebs, as well as the color of the associated spiders.

Inspect the figure showing how novel data controls web size, spindles, rings, sagging, and spider color. section 14.6

How D3.js in Action, Third Edition covers it

How deep it goes

Explains design mapping and dataset preparation but stops short of showing implementation code.

Examples

Uses top horror novels, book pages, genres, age, ratings, web geometry, and spider color.

What it assumes

Assumes access to raw data and some awareness of visualization tools such as D3.

What you can do after

Builds a data-driven spiderweb by selecting design variables and mapping attributes to them.

How it connects

Connects data visualization, D3, data collection, dataset integration, and visual encoding.

liveBookmanning.com

Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

Related concepts

• pseudocodeused by · Pseudocode is informal, language-independent notation that expresses an algorithm’s logic, structure, and steps without requiring executable syntax.
• scaleused by · A visualization scale maps data values to visual values such as positions, colors, or sizes.

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.