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

    Interface D3MosaicConfig

    Configuration for binding a D3 mosaic (marimekko) plot.

    Extends D3SegmentedConfig because a mosaic is a stacked bar: same <rect> per cell, same { x, y, fill } extraction, same DOM-order detection. What it adds is the column width, which on every other chart is how the bars were drawn and here is the second magnitude the plot exists to show — a category of six people and one of six hundred read identically without it.

    The width is read from the datum, never measured off the rendered <rect>: a drawn width is a layout fact (padding, margins, a log scale) and turning it back into a proportion would announce a number the data does not contain.

    bindD3Mosaic(svgElement, {
      selector: 'rect.cell',
      axes: { x: 'Class', y: 'Proportion', fill: 'Outcome' },
      x: 'klass',
      y: 'share',
      fill: 'outcome',
      width: 'columnShare',
      count: 'n',
    });
    interface D3MosaicConfig {
        id?: string;
        title?: string;
        subtitle?: string;
        caption?: string;
        axes?: { x?: D3AxisInput; y?: D3AxisInput; fill?: D3AxisInput };
        format?: AxisFormat;
        autoApply?: boolean;
        selector: string;
        groupSelector?: string;
        type?: SegmentedTraceType;
        orientation?: Orientation;
        x?: DataAccessor<string | number>;
        y?: DataAccessor<string | number>;
        fill?: DataAccessor<string>;
        domOrder?: "subject-major" | "series-major";
        width?: DataAccessor<number>;
        count?: DataAccessor<number>;
    }

    Hierarchy (View Summary)

    Index

    Properties

    id? title? subtitle? caption? axes? format? autoApply? selector groupSelector? type? orientation? x? y? fill? domOrder? width? count?

    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 all bar segment elements (e.g., 'rect.bar', 'rect').

    groupSelector?: string

    CSS selector for series group elements (e.g., 'g.series'). When provided, bar segments are queried within each group and the fill/series key is read from each group's D3 datum .key property (standard d3.stack() output) unless overridden by the fill accessor.

    type?: SegmentedTraceType

    The type of segmented chart.

    TraceType.STACKED
    orientation?: Orientation

    Chart orientation. Emitted only when given, so a chart that does not declare one is read the core's way (vertical).

    Set it for the charts that are drawn on their side — a population pyramid is the usual one: with Orientation.HORIZONTAL, x reads the (signed) value and y the category, which is the order the bars are drawn in.

    x?: DataAccessor<string | number>

    Accessor for the x-axis (category) value.

    'x'
    y?: DataAccessor<string | number>

    Accessor for the y-axis (numeric) value.

    'y'
    fill?: DataAccessor<string>

    Accessor for the fill/group identifier.

    'fill'
    domOrder?: "subject-major" | "series-major"

    Hint for how the rendered <rect> elements are ordered in the DOM.

    • 'subject-major' — rects are interleaved by category then series, e.g. [Cat0-A, Cat0-B, Cat0-C, Cat1-A, ...]. This is the result of a single flat selectAll(...).data(flatArr).join(...) call and matches the typical D3 dodged-bar pattern.
    • 'series-major' — all of series 0 first, then all of series 1, etc., e.g. [A-Cat0..CatN, B-Cat0..CatN, ...]. This is produced by looping regions.forEach(r => selectAll(...).data(byRegion[r]).join(...)) and matches the typical D3 stacked-bar pattern, as well as d3.stack() with groupSelector.

    When omitted, the binder auto-detects from the rendered fills and falls back to type-based defaults (stacked_bar / normalized_bar → series-major, dodged_bar → subject-major).

    width?: DataAccessor<number>

    Accessor for the column's share of all observations, as a fraction of one.

    'width', falling back to share, proportion, or marginal. Omitted from the payload when the datum carries none of them, and when the value read is not a finite number.

    count?: DataAccessor<number>

    Accessor for the cell's own count, when the producer has the contingency table the mosaic was drawn from.

    'count', falling back to n, freq, or frequency. Omitted from the payload when absent — a count multiplied out of a rounded share is a number the data does not contain.

    Settings

    Member Visibility

    On This Page

    Properties