Box

Creates SVG box-and-whisker plots based on an array of data, one per group of values.

Basic example

Points are grouped by their shared x category (“A” and “B”), which the x accessor maps to a horizontal pixel position, and each group’s raw y values are reduced to a box-and-whisker summary of quartiles and whiskers; orient switches between vertical and horizontal boxes.

Edit codeGet the code

Reset

const config = {
  data: [
    {x: "A", y: 40},
    {x: "A", y: 55},
    {x: "A", y: 70},
    {x: "A", y: 85},
    {x: "A", y: 110},
    {x: "A", y: 140},
    {x: "B", y: 90},
    {x: "B", y: 120},
    {x: "B", y: 150},
    {x: "B", y: 175},
    {x: "B", y: 210},
    {x: "B", y: 240},
  ],
  x: d => (d.x === "A" ? 130 : 270),
  y: "y",
};

Horizontal

With orient: "horizontal" the roles swap: x carries the values that are summarized and y places each group’s box, so the quartile boxes and whiskers run left to right.

Edit codeGet the code

Reset

const config = {
  data: [
    {group: "A", v: 40},
    {group: "A", v: 55},
    {group: "A", v: 70},
    {group: "A", v: 85},
    {group: "A", v: 110},
    {group: "A", v: 140},
    {group: "B", v: 90},
    {group: "B", v: 120},
    {group: "B", v: 150},
    {group: "B", v: 175},
    {group: "B", v: 210},
    {group: "B", v: 240},
  ],
  orient: "horizontal",
  x: "v",
  y: d => (d.group === "A" ? 110 : 230),
};

Outlier styling

Each group has one value far outside its interquartile range. Under the default whiskerMode (Tukey’s 1.5×IQR rule) those points are drawn as outliers beyond the whiskers, here as Rect markers instead of the default Circle; rectWidth widens the boxes.

Edit codeGet the code

Reset

const config = {
  data: [
    {x: "A", y: 90},
    {x: "A", y: 100},
    {x: "A", y: 110},
    {x: "A", y: 115},
    {x: "A", y: 125},
    {x: "A", y: 135},
    {x: "A", y: 20},
    {x: "B", y: 150},
    {x: "B", y: 160},
    {x: "B", y: 170},
    {x: "B", y: 180},
    {x: "B", y: 195},
    {x: "B", y: 205},
    {x: "B", y: 300},
  ],
  outlier: "Rect",
  rectWidth: 70,
  x: d => (d.x === "A" ? 130 : 270),
  y: "y",
};

Configuration

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

Extends BaseClass.

Filter 16 config keys

activefunction | null

The active highlight state for all sub-shapes in this Box.

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.

configpartial

Narrowed .config() for Box. Inherited surface from BaseClass.config(); the override exists only to surface per-shape keys (e.g. width/height for Rect) in autocomplete + type checks.

dataarray.<datapoint>

The data array used to create shapes.

hoverfunction | null

The hover highlight state for all sub-shapes in this Box.

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.

medianConfigrecord

Configuration object for the median line.

onstring

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

outlierConfigrecord

Configuration object for each outlier point.

parentunknown

Parent config used by the wrapper.

rectConfigrecord

Configuration object for the rect shape.

selectstring | htmlelement | svgelement | null

The SVG container element for this visualization. 3 selector or DOM element.

shapeConfigd3plusconfig

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

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.

whiskerConfigrecord

Configuration object for the whisker.