Cookbook — Radar Plot — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/cookbook/radar-plot

Radar Plot

Radar charts (also called spider or star charts) compare multiple quantitative attributes across several entities, making it easy to spot which entity excels in which dimension. This recipe uses StreamOrdinalFrame's radial projection with connectors to create a Pokemon stat comparison chart.

The Visualization

A comparison of attributes across multiple attributes. This data is from Pokemon Database

import { StreamOrdinalFrame } from "semiotic" const frameProps = { /* --- Data --- */ data: [{ name: "Pikachu", color: "#e0d33a", attribute: "attack", value: 55, defense: 40, speed: 90, hp: 35 }, { name: "Pikachu", color: "#e0d33a", attribute: "defense", value: 40 }, ... ], chartType: "point", /* --- Size --- */ size: [500,450], margin: { left: 40, top: 50, bottom: 75, right: 120 }, /* --- Layout --- */ connectorAccessor: (d12) => d12.name, projection: "radial", /* --- Process --- */ oAccessor: "attribute", rAccessor: "value", rExtent: [0,], /* --- Customize --- */ pieceStyle: (d12) => ({ fill: d12.color, stroke: "white", strokeOpacity: 0.5 }), connectorStyle: (d12) => ({ fill: d12.color, fillOpacity: 0.15, stroke: d12.color, strokeWidth: 2, opacity: 0.5 }), title: "Pokemon Base Stats", showAxes: true, foregroundGraphics: [ <g transform="translate(400, 73)" key="legend"> <text key="pikachu" fill={"#e0d33a"}> Pikachu </text> <text key="bulbasaur" y={20} fill={"#9fd0cb"}> Bulbasaur </text> <text key="charmander" y={40} fill={"#E0488B"}> Charmander </text> <text key="squirtle" y={60} fill={"#7566ff"}> Squirtle </text> </g> ], /* --- Interact --- */ enableHover: true, /* --- Annotate --- */ oLabel: true } export default () => { return <StreamOrdinalFrame {...frameProps} /> }

How It Works

The radar chart is simply an StreamOrdinalFrame withprojection: "radial". Each attribute (attack, defense, speed, etc.) becomes an ordinal category arranged around the circle, and each Pokemon's stats become connected points:

JSX

oAccessor: "attribute", rAccessor: "value", rExtent: [0], type: "point", projection: "radial", connectorType: d => d.name, connectorStyle: d => ({ fill: d.source.color, stroke: d.source.color, strokeOpacity: 0.5, fillOpacity: 0.5 }), pieceHoverAnnotation: true

The connectorType function returns the Pokemon name, linking the same Pokemon's stats across attributes into a filled polygon. Each connector is styled with the entity's color at half opacity so overlapping shapes remain visible:

JSX

style: d => ({ fill: d.color, stroke: "white", strokeOpacity: 0.5 }), oLabel: true, foregroundGraphics: [ <g transform="translate(400, 73)" key="legend"> <text fill={theme[3]}>Pikachu</text> <text y={20} fill={theme[2]}>Bulbasaur</text> <text y={40} fill={theme[1]}>Charmander</text> <text y={60} fill={theme[4]}>Squirtle</text> </g> ]

Key Takeaways

Setting projection: "radial" on StreamOrdinalFrame turns any ordinal layout into a circular (radar) chart.
connectorType with a grouping key creates filled polygons connecting an entity's values across all axes.
Radar charts work best when all attributes share the same scale (all starting from zero with comparable ranges).
pieceHoverAnnotation enables hover tooltips on individual data points within the radar.

StreamOrdinalFrame — the underlying frame with radial projection
Slope Chart — another multi-entity comparison using connectors