eurostat-map
    Preparing search index...

    Interface ProportionalSymbolConfig

    Configuration for proportional symbol maps

    interface ProportionalSymbolConfig {
        svgId?: string;
        containerId?: string;
        proj?: string;
        projectionFunction?: () => any;
        scale?: "60M" | "20M" | "10M" | "03M" | "01M";
        nutsLevel?: number | "mixed";
        nutsYear?: string | number;
        nuts2jsonBaseURL?: string;
        worldTopojsonURL?: string;
        geoCenter?: [number, number];
        geo?: string;
        width?: number;
        height?: number;
        title?: string;
        subtitle?: string;
        footnote?: string;
        footnoteTooltipText?: string | false;
        footnoteWrap?: number | false;
        noDataText?: string;
        language?: string;
        transitionDuration?: number;
        stat?:
            | StatConfig
            | CompositionStatConfig<Record<string, Record<string, number>>>
            | Record<
                string,
                | StatConfig
                | CompositionStatConfig<Record<string, Record<string, number>>>,
            >;
        encoding?: Record<string, EncodingConfig>;
        legend?: false | LegendConfig;
        rankedBarChart?: false | RankedBarChartConfig;
        tooltip?: TooltipConfig;
        insets?: boolean | "image" | "default" | InsetConfig[] | "eu" | "euEfta";
        insetBoxPosition?: [number, number];
        insetBoxPadding?: number;
        insetBoxWidth?: number;
        insetScale?: string;
        insetZoomExtent?: [number, number];
        zoomExtent?: [number, number];
        defaultFitZoom?: number;
        translateExtent?: [[number, number], [number, number]];
        lockPanUntilZoom?: boolean;
        gridCartogramSettings?: Partial<GridCartogramSettings>;
        drawCoastalMargin?: boolean;
        coastalMarginSettings?: Partial<CoastalMarginSettings>;
        drawGraticule?: boolean;
        labels?: false | LabelsConfig;
        onBuild?: (map: MapInstance) => void;
        scalebar?: boolean | ScalebarConfig;
        annotations?: { annotations: any[]; editMode?: boolean };
        gridCartogram?: boolean;
        filterGeometriesFunction?: (geometry: any) => boolean;
        backgroundMap?: boolean;
        minimap?: MinimapConfig;
        stamp?: false | StampConfig;
        zoomButtons?: boolean;
        insetsButton?: boolean;
        legendButton?: boolean;
        placenames?: boolean;
        placenamesFilter?: (name: any) => boolean;
        header?: boolean;
        footer?: boolean;
        footerPadding?: number;
        headerPadding?: number;
        titlePosition?: [number, number];
        subtitlePosition?: [number, number];
        footnotePosition?: [number, number];
        showEstatLogo?: boolean;
        logoPosition?: [number, number];
        logoWidth?: number;
        logoHeight?: number;
        showEstatRibbon?: boolean;
        ribbonPosition?: [number, number];
        ribbonWidth?: number;
        ribbonHeight?: number;
        zoomButtonsPosition?: [number, number];
        insetsButtonPosition?: [number, number];
        insetsVisibilityBreakpoint?: number;
        legendButtonPosition?: [number, number];
        legendVisibilityBreakpoint?: number;
        hoverColor?: string;
        noDataFillStyle?: string;
        showSourceLink?: boolean;
        patternFill?: PatternFillConfig | PatternFillConfig[];
        categoryFillStyle?: { [rawValue: string]: string };
        categoryText?: { [rawValue: string]: string };
        dorling?: boolean;
        dorlingSettings?: DorlingSettings;
        psSettings?: ProportionalSymbolSettings;
        psShape?: string;
        psCustomShape?: any;
        psCustomSVG?: any;
        psSpikeWidth?: number;
        psOffset?: { x: number; y: number };
        psBarWidth?: number;
        psMaxSize?: number;
        psMinSize?: number;
        psMaxValue?: number;
        psMinValue?: number;
        psSizeScale?: "linear" | "sqrt";
        psFill?: string;
        psFillOpacity?: number;
        psStroke?: string;
        psStrokeWidth?: number;
        psStrokeOpacity?: number;
        psClasses?: number;
        psColors?: string[];
        psColorFun?: any;
        psClassToFillStyle?: any;
        psThresholds?: number[];
        psClassificationMethod?: "threshold" | "quantile" | "equinter";
        psBrightenFactor?: number;
        psCodeLabels?: boolean;
        classifierSize?: any;
        classifierColor?: any;
        [key: string]: any;
    }

    Hierarchy (View Summary)

    Indexable

    • [key: string]: any

      Allow additional properties for extensibility.

    Index
    svgId? containerId? proj? projectionFunction? scale? nutsLevel? nutsYear? nuts2jsonBaseURL? worldTopojsonURL? geoCenter? geo? width? height? title? subtitle? footnote? footnoteTooltipText? footnoteWrap? noDataText? language? transitionDuration? stat? encoding? legend? rankedBarChart? tooltip? insets? insetBoxPosition? insetBoxPadding? insetBoxWidth? insetScale? insetZoomExtent? zoomExtent? defaultFitZoom? translateExtent? lockPanUntilZoom? gridCartogramSettings? drawCoastalMargin? coastalMarginSettings? drawGraticule? labels? onBuild? scalebar? annotations? gridCartogram? filterGeometriesFunction? backgroundMap? minimap? stamp? zoomButtons? insetsButton? legendButton? placenames? placenamesFilter? header? footer? footerPadding? headerPadding? titlePosition? subtitlePosition? footnotePosition? showEstatLogo? logoPosition? logoWidth? logoHeight? showEstatRibbon? ribbonPosition? ribbonWidth? ribbonHeight? zoomButtonsPosition? insetsButtonPosition? insetsVisibilityBreakpoint? legendButtonPosition? legendVisibilityBreakpoint? hoverColor? noDataFillStyle? showSourceLink? patternFill? categoryFillStyle? categoryText? dorling? dorlingSettings? psSettings? psShape? psCustomShape? psCustomSVG? psSpikeWidth? psOffset? psBarWidth? psMaxSize? psMinSize? psMaxValue? psMinValue? psSizeScale? psFill? psFillOpacity? psStroke? psStrokeWidth? psStrokeOpacity? psClasses? psColors? psColorFun? psClassToFillStyle? psThresholds? psClassificationMethod? psBrightenFactor? psCodeLabels? classifierSize? classifierColor?
    svgId?: string

    Container settings.

    containerId?: string

    ID of the container element used to host the map.

    proj?: string

    NUTS2json geometries projection: '3035', '3857', '4326'. For custom projections, use 4326 and then set projectionFunction().

    projectionFunction?: () => any

    Function to set a custom projection. See d3-geo projections for examples.

    scale?: "60M" | "20M" | "10M" | "03M" | "01M"

    Scale of the map, for NUTSjson geometries.

    nutsLevel?: number | "mixed"

    NUTS level (0, 1, 2, 3), or 'mixed' to let each region use its most granular level.

    nutsYear?: string | number

    NUTS boundary year.

    nuts2jsonBaseURL?: string

    Base URL used to fetch NUTS2JSON boundary geometries. Applies to the top-level map and (unless a given inset overrides it via InsetConfig.nuts2jsonBaseURL) all of its insets.

    'https://raw.githubusercontent.com/eurostat/Nuts2json/master/pub/v2' (or the
    ec.europa.eu cache when running on an ec.europa.eu host)
    worldTopojsonURL?: string

    URL of the world boundaries topojson file used by geo: 'WORLD' maps. Not part of Nuts2json (a separate, bundled eurostat-map asset), so it is independent of nuts2jsonBaseURL. Applies to the top-level map and all of its insets.

    'https://raw.githubusercontent.com/eurostat/eurostat-map/master/src/assets/topojson/WORLD_4326.json'
    (or the ec.europa.eu asset host when running on an ec.europa.eu host)
    geoCenter?: [number, number]

    Geographic center as [longitude, latitude].

    geo?: string

    NUTS2JSON geographic focus (e.g., 'EUR', 'WORLD', 'IC', 'GF'). See https://github.com/eurostat/Nuts2json#overseas-territories---map-insets

    width?: number

    Map dimensions.

    height?: number

    Map height in pixels.

    title?: string

    Map title.

    subtitle?: string

    Map subtitle.

    footnote?: string

    Footnote text shown below the map.

    footnoteTooltipText?: string | false

    Tooltip text shown when hovering over the footnote.

    footnoteWrap?: number | false

    Wrap footnote text at this many characters.

    noDataText?: string

    Text shown in the tooltip and legend for regions with no data.

    'No data available'
    language?: string

    BCP 47 language tag used when fetching labels from the Eurostat API.

    'en'
    transitionDuration?: number

    Duration in milliseconds for D3 transitions when the map updates. Set to 0 to disable.

    500
    stat?:
        | StatConfig
        | CompositionStatConfig<Record<string, Record<string, number>>>
        | Record<
            string,
            StatConfig
            | CompositionStatConfig<Record<string, Record<string, number>>>,
        >

    Statistical data configuration.

    Preferred for multi-dataset maps:

    • set named datasets via stat dictionary
    • bind channels via encoding
    encoding?: Record<string, EncodingConfig>

    Optional visual encoding configuration by channel (size, color, fill, composition, etc.).

    legend?: false | LegendConfig

    Legend configuration.

    rankedBarChart?: false | RankedBarChartConfig

    Ranked bar chart configuration (choropleth-classified map types only). Independent of the legend - has its own positioning and can render into an entirely different container/SVG to the legend's, rather than being a sub-feature of it.

    tooltip?: TooltipConfig

    Tooltip configuration.

    insets?: boolean | "image" | "default" | InsetConfig[] | "eu" | "euEfta"

    Inset map configurations. Pass a named preset string, or a custom array, or false to disable. Passing true is an alias for 'default'.

    • 'default': simple grid layout of overseas territories.
    • 'image': Malta, Liechtenstein and EU/EFTA overseas/remote territories, hand-tuned layout with connecting decoration (background box, separator lines, blur gradients).
    • 'eu': simple grid layout of EU overseas/outermost territories, no decoration.
    • 'euEfta': like 'eu', plus Liechtenstein and Svalbard, no decoration.
    insetBoxPosition?: [number, number]

    Position [x, y] of the box containing the default/named-preset insets layout.

    insetBoxPadding?: number

    Padding in pixels around/between insets in the default insets box layout.

    5
    insetBoxWidth?: number

    Width in pixels of each inset in the default insets box layout.

    210
    insetScale?: string

    Default NUTS2JSON scale used for insets that don't specify their own.

    '03M'
    insetZoomExtent?: [number, number]

    Default D3 zoom scale extent for insets. null disables zoom on insets.

    zoomExtent?: [number, number]

    Zoom and pan settings.

    defaultFitZoom?: number

    Divides the exact bbox-fit pixel size used when position().z is left unset, so the default view is zoomed in tighter than an exact fit (which tends to look too zoomed out). Higher = more zoomed in by default; 1 = exact fit.

    1.27
    translateExtent?: [[number, number], [number, number]]

    D3 zoom translate extent (pan boundaries), as [[x0, y0], [x1, y1]].

    lockPanUntilZoom?: boolean

    If true, panning is disabled until the user has zoomed at least once.

    true
    gridCartogramSettings?: Partial<GridCartogramSettings>

    Grid cartogram layout settings.

    drawCoastalMargin?: boolean

    Show or hide the coastal margin effect.

    coastalMarginSettings?: Partial<CoastalMarginSettings>

    Coastal margin settings to override defaults.

    drawGraticule?: boolean

    Graticule.

    labels?: false | LabelsConfig

    Get or set label configuration for country names, statistical values, etc.

    map.labels({ values: true, backgrounds: true, backgroundFill: '#B19122' })
    onBuild?: (map: MapInstance) => void

    Fires once the map is built.

    scalebar?: boolean | ScalebarConfig

    Scalebar configuration. Can be boolean or configuration object.

    annotations?: { annotations: any[]; editMode?: boolean }

    Annotation configuration, rendered via the d3-svg-annotation library. annotations is an array of d3-svg-annotation annotation objects; each object's type may be one of 'annotationLabel' (default), 'annotationCallout', 'annotationCalloutRect', 'annotationCalloutCircle', 'annotationXYThreshold', resolved to the matching d3-svg-annotation function internally.

    gridCartogram?: boolean

    Grid cartogram enabled or disabled.

    filterGeometriesFunction?: (geometry: any) => boolean

    Custom geometry filtering function.

    backgroundMap?: boolean

    Toggle background map rendering (sea, country boundaries, etc.).

    minimap?: MinimapConfig

    Minimap (globe inset showing current viewport) configuration.

    stamp?: false | StampConfig

    Stamp/watermark annotation.

    { x: 10, y: 10, text: 'DRAFT', size: 40 }
    zoomButtons?: boolean

    Show/hide zoom +/- buttons.

    insetsButton?: boolean

    Show/hide inset map toggle button. When true and no insets are configured, the map automatically uses insets('default').

    legendButton?: boolean

    Show/hide legend toggle button.

    placenames?: boolean

    Show/hide placename labels.

    placenamesFilter?: (name: any) => boolean

    Filter function for placename labels.

    header?: boolean

    Use a separate header section for titles.

    footer?: boolean

    Use a separate footer section for footnotes.

    footerPadding?: number

    Padding between the map and footer in pixels.

    headerPadding?: number

    Padding between the header and map in pixels.

    titlePosition?: [number, number]

    Position adjustment for map title: [x, y]

    subtitlePosition?: [number, number]

    Position adjustment for map subtitle: [x, y]

    footnotePosition?: [number, number]

    Position adjustment for footnote text: [x, y]

    showEstatLogo?: boolean

    Show the Eurostat logo.

    logoPosition?: [number, number]

    Position adjustment for Eurostat logo: [x, y]

    logoWidth?: number

    Width in pixels of the Eurostat logo.

    200
    logoHeight?: number

    Height in pixels of the Eurostat logo.

    40
    showEstatRibbon?: boolean

    Show the Eurostat ribbon banner.

    ribbonPosition?: [number, number]

    Position adjustment for ribbon banner: [x, y]

    ribbonWidth?: number

    Width in pixels of the Eurostat ribbon banner.

    200
    ribbonHeight?: number

    Height in pixels of the Eurostat ribbon banner.

    40
    zoomButtonsPosition?: [number, number]

    Position adjustment for zoom buttons: [x, y]

    insetsButtonPosition?: [number, number]

    Position adjustment for insets button: [x, y]

    insetsVisibilityBreakpoint?: number

    Viewport width (px) at/below which insets start hidden (behind the insets button) unless insetsButton was set explicitly.

    768
    legendButtonPosition?: [number, number]

    Position adjustment for legend button: [x, y]

    legendVisibilityBreakpoint?: number

    Viewport width (px) at/below which the legend starts hidden (behind the legend button) when legendButton is enabled.

    768
    hoverColor?: string

    Pointer hover color for NUTS regions.

    noDataFillStyle?: string

    Base fill color for regions with no statistical data.

    showSourceLink?: boolean

    Show the link to the remote Eurostat statistical dataset.

    patternFill?: PatternFillConfig | PatternFillConfig[]

    Pattern fill (hatching/dots/crosshatch) overlays for specific regions.

    categoryFillStyle?: { [rawValue: string]: string }

    Fill styles for categorical exceptions, keyed by raw value - colors the matching region's own polygon, independently of its symbol (which represents a separate, numeric value and doesn't render at all for a region whose value is a category with no magnitude).

    categoryText?: { [rawValue: string]: string }

    Legend and tooltip labels for categorical exceptions, keyed by raw value.

    dorling?: boolean

    Dorling cartogram.

    dorlingSettings?: DorlingSettings

    Dorling simulation settings for this layer. Defaults to the map's dorlingSettings.

    psSettings?: ProportionalSymbolSettings

    Grouped proportional symbol style settings. Preferred over the individual ps* fields below.

    psShape?: string

    Symbol shape. Accepted values: 'circle', 'bar', 'square', 'star', 'diamond', 'wye', 'cross', 'triangle', 'spike'.

    'circle'
    psCustomShape?: any

    Custom d3-shape symbol type, used when psShape is not one of the built-in shapes.

    psCustomSVG?: any

    Custom SVG symbol markup/selector to use instead of a built-in shape.

    psSpikeWidth?: number

    Width in pixels of spike symbols (psShape: 'spike').

    7
    psOffset?: { x: number; y: number }

    Pixel offset {x, y} applied to each symbol, scaled with symbol size.

    psBarWidth?: number

    Width in pixels of vertical bar symbols (psShape: 'bar').

    10
    psMaxSize?: number

    Max symbol size in pixels.

    30
    psMinSize?: number

    Min symbol size in pixels.

    5
    psMaxValue?: number

    Value mapped to psMaxSize. Auto-detected from the data when omitted.

    psMinValue?: number

    Value mapped to psMinSize. Auto-detected from the data when omitted.

    psSizeScale?: "linear" | "sqrt"

    Size scale type.

    'sqrt'
    psFill?: string

    Fill color, used when the symbols are not colored by a classified stat.

    '#009569'
    psFillOpacity?: number

    Fill opacity.

    1
    psStroke?: string

    Stroke color.

    '#ffffff'
    psStrokeWidth?: number

    Stroke width.

    0.2
    psStrokeOpacity?: number

    Stroke opacity.

    1
    psClasses?: number

    Number of color classes.

    5
    psColors?: string[]

    Colors used for the color classes.

    psColorFun?: any

    d3-scale-chromatic interpolator used to auto-generate psColors when not set explicitly.

    psClassToFillStyle?: any

    Function mapping a class index to a fill color. Auto-derived from psColors/psColorFun when unset.

    psThresholds?: number[]

    Thresholds, used when psClassificationMethod is 'threshold'.

    psClassificationMethod?: "threshold" | "quantile" | "equinter"

    Color classification method.

    'quantile'
    psBrightenFactor?: number

    Brighten factor applied to generated color classes.

    0.9
    psCodeLabels?: boolean

    Show region code labels next to symbols.

    false
    classifierSize?: any

    The classifier function used for sizing symbols.

    classifierColor?: any

    The classifier function used for coloring symbols.

    Settings
    Member Visibility

    On This Page
    Properties
    svgIdcontainerIdprojprojectionFunctionscalenutsLevelnutsYearnuts2jsonBaseURLworldTopojsonURLgeoCentergeowidthheighttitlesubtitlefootnotefootnoteTooltipTextfootnoteWrapnoDataTextlanguagetransitionDurationstatencodinglegendrankedBarCharttooltipinsetsinsetBoxPositioninsetBoxPaddinginsetBoxWidthinsetScaleinsetZoomExtentzoomExtentdefaultFitZoomtranslateExtentlockPanUntilZoomgridCartogramSettingsdrawCoastalMargincoastalMarginSettingsdrawGraticulelabelsonBuildscalebarannotationsgridCartogramfilterGeometriesFunctionbackgroundMapminimapstampzoomButtonsinsetsButtonlegendButtonplacenamesplacenamesFilterheaderfooterfooterPaddingheaderPaddingtitlePositionsubtitlePositionfootnotePositionshowEstatLogologoPositionlogoWidthlogoHeightshowEstatRibbonribbonPositionribbonWidthribbonHeightzoomButtonsPositioninsetsButtonPositioninsetsVisibilityBreakpointlegendButtonPositionlegendVisibilityBreakpointhoverColornoDataFillStyleshowSourceLinkpatternFillcategoryFillStylecategoryTextdorlingdorlingSettingspsSettingspsShapepsCustomShapepsCustomSVGpsSpikeWidthpsOffsetpsBarWidthpsMaxSizepsMinSizepsMaxValuepsMinValuepsSizeScalepsFillpsFillOpacitypsStrokepsStrokeWidthpsStrokeOpacitypsClassespsColorspsColorFunpsClassToFillStylepsThresholdspsClassificationMethodpsBrightenFactorpsCodeLabelsclassifierSizeclassifierColor