Area

Creates SVG areas based on an array of data.

Basic example

The six points share one id, so they join into a single filled area; fillOpacity renders it as a translucent band, and the curve control changes how the vertices are interpolated.

const config = {
  // The default accessors read the `x`/`y`/`id` keys directly, so the data
  // keys are chosen to match them. `fill`/`fillOpacity` take constant values.
  data: [
    {id: "a", x: 40, y: 80},
    {id: "a", x: 160, y: 180},
    {id: "a", x: 280, y: 110},
    {id: "a", x: 400, y: 200},
    {id: "a", x: 520, y: 90},
    {id: "a", x: 640, y: 160},
  ],
  fill: "#3a7ca5",
  fillOpacity: 0.5,
};

Band

Setting both y0 and y1 draws a band between two edges instead of filling down to a baseline, which is how confidence intervals and min/max envelopes are drawn behind a line.

The y0 (top edge) position accessor for the area.

ƒ (function)

The y1 (bottom edge) position accessor for the area.

ƒ (function)

Curve and series

Each distinct id becomes its own area, and curve picks the d3 interpolation between points; monotoneX rounds the corners without overshooting the data.

const config = {
  data: [
    {id: "a", x: 40, y: 120},
    {id: "a", x: 200, y: 200},
    {id: "a", x: 360, y: 90},
    {id: "a", x: 520, y: 180},
    {id: "a", x: 680, y: 110},
    {id: "b", x: 40, y: 220},
    {id: "b", x: 200, y: 150},
    {id: "b", x: 360, y: 240},
    {id: "b", x: 520, y: 130},
    {id: "b", x: 680, y: 210},
  ],
  curve: "monotoneX",
  fill: d => (d.id === "a" ? "#3a7ca5" : "#cc4b4b"),
  fillOpacity: 0.45,
};

Configuration

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

Extends Shape → BaseClass.

Filter 23 config keys

activefunction | null: The active callback function for highlighting shapes.
activeStylerecord: The style to apply to active shapes.
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.
dataarray.<datapoint>: The data array used to create shapes. A shape will be drawn for each object in the array.
hoverfunction | null: The hover callback function for highlighting shapes on mouseover.
hoverStylerecord: The style to apply to hovered shapes.
labelConfigrecord: A pass-through to the config method of the TextBox class used to create a shape's labels.
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.
onstring: Event listener for the specified event typenames. Mirrors the core d3-selection behavior.
parentunknown: Parent config used by the wrapper.
selectstring | htmlelement | svgelement | null: The SVG container element as a d3 selector or DOM element.
shapeConfigd3plusconfig: Configuration object with key/value pairs applied as method calls on each shape.
sortfunction | null: A comparator function used to sort shapes for layering order.
textureDefaultrecord: A series of global texture methods to be used for all textures (ie. {stroke: "darkorange", strokeWidth: 2}).
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.
xnumber | accessorfn: The x position accessor. Also sets x0 to the same value.
x0number | accessorfn: The x0 (left edge) position accessor for the area.
x1number | accessorfn | null: The x1 (right edge) position accessor for the area.
ynumber | accessorfn: The y position accessor. Also sets y0 to the same value.
y0number | accessorfn: The y0 (top edge) position accessor for the area.
y1number | accessorfn | null: The y1 (bottom edge) position accessor for the area.