Radar

Creates a radar visualization based on an array of data.

Basic example

metric names the field that becomes each spoke of the web while value sets how far along a spoke each point reaches; the two groupBy ids draw as separate polygons.

metric

Accessor function or string key for each data point's metric: every unique metric becomes one spoke (axis) of the radar.

value

Accessor function or string key for each data point's value, which sets its distance from the center along its metric's spoke.

Multiple series

Two series overlaid on the same axes, one filled polygon per group.

metric

Accessor function or string key for each data point's metric: every unique metric becomes one spoke (axis) of the radar.

value

Accessor function or string key for each data point's value, which sets its distance from the center along its metric's spoke.

More metrics

Eight metric values make eight evenly spaced spokes, and three groupBy series become three overlaid polygons, which is the typical skills-profile use of a radar.

metric

Accessor function or string key for each data point's metric: every unique metric becomes one spoke (axis) of the radar.

value

Accessor function or string key for each data point's value, which sets its distance from the center along its metric's spoke.

Levels and padding

levels sets roughly how many concentric rings are drawn behind the polygons (three here instead of the default six). Like axis ticks, the rings land on round values, so the count is a target rather than an exact number. By default the web is sized to fit its metric labels; a number for outerPadding (90 here) reserves exactly that many pixels around the web for them instead.

outerPadding

Room (px) the Radar reserves around its web for the metric labels. "auto" (the default) measures the labels and gives the web the largest radius at which every label fits inside the chart, wrapping long labels onto two lines (and truncating what still doesn't fit) rather than shrinking the web below half its largest possible size. A number reserves exactly that much room and wraps labels to that width.

90

Level labels

Each ring is labeled with its value along the vertical axis. Passing an array to levels sets the exact ring values (here a 0–100 scale), and levelFormat formats each label. Set levelLabels to false to hide them.

levelLabels

Whether the Radar labels each level ring with its value. Defaults to true.

Level label styling

levelLabelAngle turns the labels to any direction, in degrees clockwise from 12 o’clock — 22.5 runs them between the top two spokes instead of along one. levelLabelConfig styles the label text. The labels sit beneath the polygons, so data drawn over a ring covers its label.

levelLabelAngle

Direction of the Radar's level value labels, in degrees clockwise from 12 o'clock. 0 (the default) runs the labels straight up from the center. Each label sits just inside its ring, offset to the clockwise side of that direction so neither line crosses the text. Spokes start at 3 o'clock, so the spoke for the metric at index i of n sits at 90 + 360 * i / n degrees.

Long metric labels

With the default outerPadding: "auto", the web takes the largest radius at which every metric label fits inside the chart. A label too long for that wraps onto two lines (truncating only if it still doesn’t fit) instead of shrinking the web below half its largest possible size.

outerPadding

Axis styles

The rings and spokes are styled like a Plot axis: axisConfig.gridConfig styles the inner rings (faint gridlines by default), axisConfig.barConfig the outer ring (the axis line), and axisConfig.shapeConfig the spokes and their labels.

const skillData = ["Analyst", "Engineer", "Designer"].flatMap((group, g) =>
  [
    "Research",
    "Writing",
    "Coding",
    "Design",
    "Testing",
    "Planning",
    "Presenting",
    "Mentoring",
  ].map((metric, m) => ({
    group,
    metric,
    value: 3 + ((m * 3 + g * 5) % 7),
  })),
);

const config = {
  axisConfig: {
    barConfig: {stroke: "#495057", strokeWidth: 2},
    gridConfig: {strokeDasharray: "4 3"},
    shapeConfig: {stroke: "#adb5bd"},
  },
  data: skillData,
  groupBy: "group",
  metric: "metric",
  value: "value",
};

Configuration

import {Radar} from "@d3plus/core";

Extends Viz.

Filter 35 config keys

activefalse | function

The active callback function for highlighting shapes.

axisConfigobject

The Radar's axis styles, named after the parts of a Plot axis: the inner level rings are its gridlines (gridConfig, a faint stroke like Plot's gridlines), the outer ring is its axis line (barConfig, the chart's background ink), and the spokes and metric labels are its ticks (shapeConfig, with shapeConfig.labelConfig for the labels). Ring styles take stroke, strokeWidth, strokeOpacity, strokeDasharray, and opacity (or Plot's "stroke-width" spelling), each a value or a (ring, i) => value accessor.

classNamestring | array.<string> | undefined

CSS classes added to the outermost element this chart or component draws into, next to its fixed d3plus classes, so page CSS can target it: a chart's root <svg class="d3plus-viz"> (its <canvas> with the Canvas renderer) and a standalone component's <svg>. Takes a space-separated string or an array. A new value replaces the classes the previous one added; unset adds none. Tooltips take their own tooltipConfig.className.

colorDefaultscolordefaultsconfig

Overrides the default colors used when assigning fills from data and choosing legible text colors: dark and light (the text colors picked for contrast against a background), missing (null/undefined values), on/off (true/false values), sequential (the anchor hue for magnitude ramps), and scale (the categorical palette, given as a d3 ordinal scale or an array of colors). Keys are merged into the current defaults, and a Viz passes its overrides down to the shapes and components it draws.

configd3plusconfig

Methods that correspond to the key/value pairs and returns this class.

datastring | array.<datapoint> | object

The primary data array used to draw the visualization. The value passed should be an Array of objects or a String representing a filepath or URL to be loaded. The following filetypes are supported: csv, tsv, txt, and json.

If your data URL needs specific headers to be set, an Object with a "url" and "headers" (or any other fetch request option) may also be passed. An Object with any other key is a data row, not a request.

Additionally, a custom formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final array of obejcts to be used as the primary data array. For example, some JSON APIs return the headers split from the data values to save bandwidth. These would need be joined using a custom formatter.

If you would like to specify certain configuration options based on the yet-to-be-loaded data, you can also return a full config object from the data formatter (including the new data array as a key in the object).

To re-fetch a URL on an interval and redraw when its data changes, set dataPollingInterval; each poll runs the same formatter.

Defaults to an empty array ([]).

discrete"x" | "y" | "radius" | "angle"Default "metric"

Sets orientation of main category axis.

Splits the chart into small multiples: a grid of equally sized panels, one per distinct value of this data key or accessor, each drawing the chart for that value's rows. The panels share one legend, color scale, title, and timeline, color each series the same way, and hover, tooltips, and legend clicks apply across all of them. Pass false to draw a single chart. See facetConfig for the grid's layout and shared scales.

facetConfigfacetconfig

Configuration for small multiples (see facet), merged into the current config: - columns / rows: the grid's shape. Chosen by default to make the panels as large as the chart's shape allows. - padding: the space between panels, in pixels (default 20). - sort: panel order — "ascending" (default), "descending", "data" (first appearance), a comparator over facet values, or an Array of values. - scales: "shared" (default) gives every panel of a chart with axes the same x/y domains; "independent" fits each panel to its own rows. Funnel defaults to "independent" (each panel sized to its own widest stage); "shared" sizes every panel against the widest stage across all panels. PolarArea and RadialBar default to "independent" (each panel's rings and ticks fit its own values); "shared" gives every panel the same value domain. - axes: with shared scales, "outer" (default) labels the axes only along the grid's left and bottom edges; "all" labels every panel. An object sets each axis on its own, as in {x: "all", y: "outer"}: every panel labels its x axis, only the left column labels its y axis, and the panels' plot areas line up. BumpChart defaults to "all", and Marimekko labels its categories on every panel and its 0–100% share axis only along the outer edge, even with independent scales. - title: a (value, data) => string function for each panel's title, or false to hide panel titles. - titleConfig: TextBox config for the panel titles (fontSize, fontWeight, fontColor, textAnchor, padding, …).

fontFamilystring | array.<string>

The font family used throughout the visualization.

groupBystring | function | array.<string | function>

Defines the mapping between data and shape. The value can be a String matching a key in each data point (default is "id"), or an accessor Function that returns a unique value for each data point. Additionally, an Array of these values may be provided if the visualization supports nested hierarchies.

highlightfalse | function

Persistently emphasizes the data points matching the given predicate: the matching marks keep their color while every other mark is de-emphasized to a neutral gray (the "emphasis" form — highlight one series, gray the rest). Unlike hover/active (transient, opacity-based), highlight is a standing state that survives pointer movement. Pass false to clear it.

hoverfalse | function

The hover callback function for highlighting shapes on mouseover.

levelFormatfunction

Formats the Radar's level value labels. Receives the ring's value and returns its label. Defaults to the abbreviated number format the axes use (1.5k, 2M, …).

levelLabelAnglenumberDefault 0

levelLabelConfigobjectDefault {}

Style of the Radar's level value labels.

levelLabelsbooleanDefault true

Whether the Radar labels each level ring with its value. Defaults to true.

levelsnumber | array.<number>Default 6

The Radar's level rings. A number (default 6) is the approximate ring count: the radial domain is rounded out to "nice" values and the rings sit on its ticks, the same way axis ticks are chosen. An array sets the exact ring values.

localestring | object

The locale used for all text and number formatting. Supports the locales defined in d3plus-format. The locale can be a complex Object, a locale code (like "en-US"), or a 2-digit language code (like "en"). If a 2-digit code is provided, the "findLocale" function is used to identify the most approximate locale.

metricstring | functionDefault "metric"

Accessor function or string key for each data point's metric: every unique metric becomes one spoke (axis) of the radar.

onstring

Event listener for the specified event typenames. Mirrors the core d3-selection behavior.

outerPaddingnumber | "auto"Default "auto"

parentunknown

Parent config used by the wrapper.

renderfunction

Draws the visualization given the specified configuration.

rendererboolean | "svg" | "canvas"

Selects which @d3plus/render backend paints the visible output. "svg" = SvgRenderer (default), "canvas" = CanvasRenderer. Boolean arguments both normalize to "svg".

selectstring | htmlelement

The SVG container element as a d3 selector or DOM element. Defaults to undefined.

shapestring | functionDefault "Path"

Changes the primary shape used to represent each data point in a visualization. Not all visualizations support changing shapes, this method can be provided the String name of a D3plus shape class (for example, "Rect" or "Circle"), or an accessor Function that returns the String class name to be used for each individual data point.

shapeConfigd3plusconfig

Configuration object with key/value pairs applied as method calls on each shape.

thresholdnumber | function

The threshold value for bucketing small data points together, as a share of the total. On a stacked Plot, the series whose summed value across every position is under that share of the whole chart's total merge into one series, stacked on top. A bucket needs at least two items, and its tooltips list them. Off (0) by default on Plot charts.

thresholdKeystring | function

Accessor for the value used in the threshold algorithm. A stacked Plot defaults to its stacked value.

timestring | false | function

Accessor function or string key for the time dimension of each data point.

timelineDefaultstring | date | array.<string | date>

The starting time or range for the timeline. Can be a single Date/String, or an Array of 2 values representing the min and max.

totalstring | boolean | function

Accessor function or string key for the total value displayed in the visualization.

translatefunction

Defines how informational text strings should be displayed. By default, this function will try to find the string in question (which is the first argument provided to this function) inside of an internally managed translation Object. If you'd like to override to use custom text, simply pass this method your own custom formatting function.

valuestring | functionDefault "value"

Accessor function or string key for each data point's value, which sets its distance from the center along its metric's spoke.