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

    Interface D3ChoroplethConfig

    Configuration for binding a D3 choropleth map.

    A choropleth is d3.geoPath() over a projection: one <path> per region, each bound to the GeoJSON feature it was drawn from. So selector matches the region paths, and a string accessor names a key on the feature or on its properties, in that order — a feature keeps only type, id, geometry and properties at the top level, so the joined value and the place name are in properties on almost every map. A function accessor is invoked with the whole feature.

    lon and lat are degrees, and the wrong call gives pixels. d3.geoPath().centroid(feature) returns the centre of the drawn shape in projected screen coordinates; d3.geoCentroid(feature) returns the unprojected longitude/latitude pair, and that is the one to read:

    lon: d => d3.geoCentroid(d)[0],
    lat: d => d3.geoCentroid(d)[1],

    Where only a projection is to hand, projection.invert([px, py]) inverts the pixels — but invert is optional in d3's projection API and several projections do not implement it. When neither yields degrees, leave both out: a coordinate outside ±180°/±90° is dropped rather than converted by guesswork, and the map is then read as a region list in drawn order, which is the poorer reading the grammar sanctions. A wrong pair is worse, because it puts regions in directions from one another that the map does not.

    neighbors is not read: adjacency is not recoverable from rendered paths, and deriving it needs shared-border topology this repository has no dependency for. A layer that declares none keeps the spatial walk.

    interface D3ChoroplethConfig {
        id?: string;
        title?: string;
        subtitle?: string;
        caption?: string;
        axes?: { x?: D3AxisInput; y?: D3AxisInput; fill?: D3AxisInput };
        format?: AxisFormat;
        autoApply?: boolean;
        selector: string;
        region?: DataAccessor<string | number>;
        value?: DataAccessor<number>;
        lon?: DataAccessor<number>;
        lat?: DataAccessor<number>;
    }

    Hierarchy (View Summary)

    Index

    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 region paths (e.g. 'path.region'). One per region.

    region?: DataAccessor<string | number>

    Accessor for the region's name.

    'region', falling back to name, NAME, name_long, admin, state, id, label or x — on the feature or in its properties.

    value?: DataAccessor<number>

    Accessor for the value the region is shaded by. A region this resolves nothing for is left out of the payload — and out of the highlight selectors with it — rather than announced as a zero.

    'value', falling back to y, rate, density or count.

    lon?: DataAccessor<number>

    Accessor for the region's centroid longitude, in degrees east. d3.geoCentroid(d)[0], never d3.geoPath().centroid(d)[0].

    'lon', falling back to longitude or long.

    lat?: DataAccessor<number>

    Accessor for the region's centroid latitude, in degrees north. d3.geoCentroid(d)[1], never d3.geoPath().centroid(d)[1].

    'lat', falling back to latitude.