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

    Interface D3HexbinConfig

    Configuration for binding a D3 hexbin density plot.

    The d3-hexbin plugin returns one bin per occupied hexagon, and each bin is an array of the points that fell in it, carrying .x and .y (the hexagon's centre, in SCREEN space) and .length (the count). So the default accessors read x, y and length off the bin, and x/y are where the inverse scales go: x: d => xScale.invert(d.x). Passing the screen coordinates through unchanged would announce every bin's position in pixels.

    The payload is a lattice of rows, which the binder assembles itself: a hexbin's DOM is a flat list in whatever order the bins were generated, and an empty bin is simply absent from it. Rows are grouped by the bins' y (override with row when the y values do not come out identical per row), ordered from the lowest upward, and each row is ordered left to right.

    interface D3HexbinConfig {
        id?: string;
        title?: string;
        subtitle?: string;
        caption?: string;
        axes?: { x?: D3AxisInput; y?: D3AxisInput; fill?: D3AxisInput };
        format?: AxisFormat;
        autoApply?: boolean;
        selector: string;
        x?: DataAccessor<number>;
        y?: DataAccessor<number>;
        count?: DataAccessor<number>;
        row?: DataAccessor<string | number>;
    }

    Hierarchy (View Summary)

    Index

    Properties

    id? title? subtitle? caption? axes? format? autoApply? selector x? y? count? row?

    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 hexagons (e.g. 'path.hexagon'). One per bin.

    x?: DataAccessor<number>

    Accessor for the bin's centre along the x axis.

    'x', falling back to x0 or cx.

    y?: DataAccessor<number>

    Accessor for the bin's centre along the y axis.

    'y', falling back to y0 or cy.

    count?: DataAccessor<number>

    Accessor for how many points fell in the bin.

    'count', falling back to length, value, n or total.

    row?: DataAccessor<string | number>

    Accessor for the lattice row a bin belongs to. Supply this only when the bins' y centres do not come out identical within a row — d3-hexbin's do, so the default grouping by y is normally right.

    Settings

    Member Visibility

    On This Page

    Properties