MAIDR Documentation - v4.4.0
    Preparing search index...

    Interface D3AreaConfig

    Configuration for binding a D3 area chart (plain, stacked, or 100% stacked).

    Extends D3LineConfig because an area is a line with the band under it filled: selector matches one <path> per series, and the same accessors read each sample.

    Supports both common D3 patterns:

    1. Plain point arrays — d3.area() over an array of { x, y } rows, one array bound per <path> (or per-point elements via pointSelector).
    2. d3.stack() output — the datum bound to each <path> is the series array itself, carrying .key, whose items are [y0, y1] tuples with a .data back-reference to the row. The binder recognises that shape and unwraps it: x is read from the row, y is the band's own height (y1 - y0), and the series' .key becomes its name.

    In that second shape the two accessors address different objects, because that is where the two values live: x is resolved against the row — function accessors included, so write d => d.year, not d => d.data.year — while an explicit y is resolved against the tuple, keeping d => d[1] - d[0] and any custom offset expressible.

    // d3.stack() + d3.area().y0(d => y(d[0])).y1(d => y(d[1]))
    bindD3Area(svg, {
      selector: 'path.area',
      type: TraceType.STACKED_AREA,
      axes: { x: 'Year', y: 'Revenue', fill: 'Product' },
      x: 'year',   // a key on the stacked row, not on the [y0, y1] tuple
    });
    interface D3AreaConfig {
        id?: string;
        title?: string;
        subtitle?: string;
        caption?: string;
        axes?: { x?: D3AxisInput; y?: D3AxisInput; fill?: D3AxisInput };
        format?: AxisFormat;
        autoApply?: boolean;
        selector: string;
        pointSelector?: string;
        x?: DataAccessor<string | number>;
        y?: DataAccessor<number>;
        fill?: DataAccessor<string>;
        stepDirection?: StepDirection;
        type?: AreaTraceType;
    }

    Hierarchy (View Summary)

    Index

    Properties

    id? title? subtitle? caption? axes? format? autoApply? selector pointSelector? x? y? fill? stepDirection? type?

    Properties

    id?: string

    Unique identifier for the chart. Used as the MAIDR id.

    title?: string

    Chart title displayed in text descriptions.

    subtitle?: string

    Chart subtitle.

    caption?: string

    Chart caption.

    axes?: { x?: D3AxisInput; y?: D3AxisInput; fill?: D3AxisInput }

    Axis configuration. Each axis may be provided as either a plain string (shorthand for { label: value }) or a full AxisConfig object (for per-axis format, or grid navigation on scatter).

    For heatmaps and segmented bar charts, use fill for the color/category axis; the binder maps it to the canonical z axis in the MAIDR schema.

    Type Declaration

    format?: AxisFormat

    Optional formatting configuration applied to axes that do not specify their own format. Per-axis format on AxisConfig takes precedence.

    autoApply?: boolean

    When true (the default), the binder writes the generated MAIDR schema to the SVG as a maidr-data attribute so vanilla-JS users don't need to call svg.setAttribute(...) themselves. The returned result is unchanged either way.

    Set to false if you are driving MAIDR yourself — e.g. passing the returned schema to <Maidr data={...}> or persisting it elsewhere. The React adapter (useD3Adapter, MaidrD3) forces this to false internally so it can stay in control of the schema.

    true
    selector: string

    CSS selector for the line path elements (e.g., 'path.line', '.line'). Each matched element represents one line/series.

    pointSelector?: string

    CSS selector for the data point elements per line (e.g., 'circle'). If not provided, data is extracted from the line path __data__ binding.

    x?: DataAccessor<string | number>

    Accessor for the x-axis value of each point.

    'x'
    y?: DataAccessor<number>

    Accessor for the y-axis value of each point.

    'y'
    fill?: DataAccessor<string>

    Accessor for the series/fill label.

    'fill'
    stepDirection?: StepDirection

    Which way the risers of a step curve go, when the line is drawn as one.

    'hv' holds the level and jumps at the next sample, which is d3.curveStepAfter; 'vh' jumps at the current one, d3.curveStepBefore; 'mid' jumps halfway between the two, d3.curveStep. Declaring it is what turns a bindD3Line bind into a step reading — navigated by transition rather than by sample, and described in terms of its runs — and what tells an area's trace that the extra vertices in the rendered path are risers rather than samples.

    Left undefined by default rather than guessed, because this binder reads its data off __data__ and never looks at the path: which curve you drew is your own knowledge, not something the drawing gives back. All three of d3's step curves have a name here, so leaving it out is a caller saying nothing rather than a convention MAIDR cannot express.

    type?: AreaTraceType

    The type of area chart.

    TraceType.AREA

    Settings

    Member Visibility

    On This Page

    Properties