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

    Interface D3RidgelineConfig

    Configuration for binding a D3 ridgeline (joy) plot.

    One d3.area() density curve per group, the curves offset down the page so their shapes can be compared. selector matches one <path> per group, and the samples come from that path's own bound array.

    density is the curve's own half-width, never the drawn y. A ridgeline is drawn by adding the group's baseline to every density, and that baseline is layout rather than data: fed to MAIDR it would make every group's loudness a function of where it happened to be stacked, and the lowest ridge the loudest. So the binder reads the kernel-density value the chart computed before* offsetting it, and refuses to guess when the samples do not carry one.

    The fields are named for what they mean rather than for the payload keys they land on, because a ridgeline's value axis is usually the drawn x while the payload's y is that same value: group names the ridge, value is the position along the value axis, density is the height there.

    interface D3RidgelineConfig {
        id?: string;
        title?: string;
        subtitle?: string;
        caption?: string;
        axes?: { x?: D3AxisInput; y?: D3AxisInput; fill?: D3AxisInput };
        format?: AxisFormat;
        autoApply?: boolean;
        selector: string;
        samples?: DataAccessor<unknown[]>;
        group?: DataAccessor<string | number>;
        value?: DataAccessor<number>;
        density?: DataAccessor<number>;
    }

    Hierarchy (View Summary)

    Index

    Properties

    id? title? subtitle? caption? axes? format? autoApply? selector samples? group? value? density?

    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 group curves (e.g. 'path.ridge'). One per group.

    samples?: DataAccessor<unknown[]>

    Accessor for the sample array, when the path's datum wraps it rather than being it. Defaults to the datum itself when it is an array, the second item of a d3.groups() tuple, or a values / samples / points / curve property.

    group?: DataAccessor<string | number>

    Accessor for the group's name, resolved against the path's datum.

    'group', falling back to key, name, x, label or category; then to the group's ordinal when the datum names nothing.

    value?: DataAccessor<number>

    Accessor for a sample's position along the value axis.

    'value', falling back to x, t or position.

    density?: DataAccessor<number>

    Accessor for the curve's own half-width at a sample — the density before the group's baseline was added.

    'density', falling back to kde, width, p or estimate.

    Settings

    Member Visibility

    On This Page

    Properties