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

    Interface D3DumbbellConfig

    Configuration for binding a D3 dumbbell (connected-dot) chart.

    Point selector at the connectors — one <line> per row — rather than at the dots: a chart draws one segment per row and two dots, so the connectors are the elements that map one-to-one onto the data, and the trace highlights the same segment at both ends of a row.

    startLabel / endLabel are config rather than accessors because they belong to the chart and not to any one row — they are what the two dots are called ("1990" and "2020"), which is exactly what a legend gives a sighted reader and what the announcement would otherwise have to call "start" and "end".

    bindD3Dumbbell(svgElement, {
      selector: 'line.connector',
      orientation: Orientation.HORIZONTAL,
      axes: { x: 'Years', y: 'Country' },
      x: 'country',
      start: 'y1990',
      end: 'y2020',
      startLabel: '1990',
      endLabel: '2020',
    });
    interface D3DumbbellConfig {
        id?: string;
        title?: string;
        subtitle?: string;
        caption?: string;
        axes?: { x?: D3AxisInput; y?: D3AxisInput; fill?: D3AxisInput };
        format?: AxisFormat;
        autoApply?: boolean;
        selector: string;
        x?: DataAccessor<string | number>;
        start?: DataAccessor<number>;
        end?: DataAccessor<number>;
        startLabel?: string;
        endLabel?: string;
        orientation?: Orientation;
    }

    Hierarchy (View Summary)

    Index

    Properties

    id? title? subtitle? caption? axes? format? autoApply? selector x? start? end? startLabel? endLabel? orientation?

    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 connector elements (e.g. 'line.connector').

    x?: DataAccessor<string | number>

    Accessor for the category value.

    'x'
    start?: DataAccessor<number>

    Accessor for the value the segment starts at.

    'start', falling back to from, before, or y0.

    end?: DataAccessor<number>

    Accessor for the value the segment ends at.

    'end', falling back to to, after, or y1.

    startLabel?: string

    What the starting end is called — '1990', 'before', 'control'.

    endLabel?: string

    What the finishing end is called — '2020', 'after', 'treatment'.

    orientation?: Orientation

    Chart orientation.

    Orientation.VERTICAL

    Settings

    Member Visibility

    On This Page

    Properties