This section documents API usage specific to this template, so for an introduction we suggest you refer to the generic API documentation instead.

Template data

There are three different formats in which you can supply data to this template. The most convenient for you to use likely depends on the source of your data, as described below.

1. Array of arrays, and a bindings object

You can supply arrays of arrays to opts.data, which might look like:

{
    data: {
        shading: [
            [ "ShadingColumn1Value1", "ShadingColumn2Value1",
            [ "ShadingColumn1Value2", "ShadingColumn2Value2",
            [ "ShadingColumn1Value3", "ShadingColumn2Value3",
            ...
        ],
        points: [
            [ "PointsColumn1Value1", "PointsColumn2Value1",
            [ "PointsColumn1Value2", "PointsColumn2Value2",
            [ "PointsColumn1Value3", "PointsColumn2Value3",
            ...
        ]
    }
}

where each array of arrays represents the rows in a data sheet.

To tell the API how the values from each column should be associated with the keys that the template is expecting, you must also supply an object attached to opts.bindings. (The meanings of the keys in the bindings object are documented below.) The minimal bindings you can supply for this template are as shown in this example:

{
    template: "@openpolis/svgmap-italy-prov_cm_2019",
    version: "1",
    bindings: {
        shading: {
            name: 0, // index of a column in your data
        },
        points: {
            name: 0, // index of a column in your data
            lat: 1, // index of a column in your data
            lon: 2, // index of a column in your data
        }
    },
    data: {
        shading: [
            [ "ShadingColumn1Value1", "ShadingColumn2Value1",
            [ "ShadingColumn1Value2", "ShadingColumn2Value2",
            [ "ShadingColumn1Value3", "ShadingColumn2Value3",
            ...
        ],
        points: [
            [ "PointsColumn1Value1", "PointsColumn2Value1",
            [ "PointsColumn1Value2", "PointsColumn2Value2",
            [ "PointsColumn1Value3", "PointsColumn2Value3",
            ...
        ]
    }
}

All possible bindings that you can supply are shown in this example:

{
    template: "@openpolis/svgmap-italy-prov_cm_2019",
    version: "1",
    bindings: {
        shading: {
            name: 0, // index of a column in your data
            value: [1, 2, ...], // index(es) of column(s) in your data
            metadata: [3, 4, ...], // index(es) of column(s) in your data
        },
        points: {
            name: 0, // index of a column in your data
            lat: 1, // index of a column in your data
            lon: 2, // index of a column in your data
            value: [3, 4, ...], // index(es) of column(s) in your data
            metadata: [5, 6, ...], // index(es) of column(s) in your data
        }
    },
    data: {
        shading: [
            [ "ShadingColumn1Value1", "ShadingColumn2Value1",
            [ "ShadingColumn1Value2", "ShadingColumn2Value2",
            [ "ShadingColumn1Value3", "ShadingColumn2Value3",
            ...
        ],
        points: [
            [ "PointsColumn1Value1", "PointsColumn2Value1",
            [ "PointsColumn1Value2", "PointsColumn2Value2",
            [ "PointsColumn1Value3", "PointsColumn2Value3",
            ...
        ]
    }
}

2. Array of objects with arbitrary keys, and a bindings object

This format is most likely useful when you have data from an external source, such as CSV data loaded from d3-dsv. You should supply this attached to the opts.data, which might look like:

{
        shading: [
            { "ShadingHeader1": ..., "ShadingHeader2": ..., ... },
            { "ShadingHeader1": ..., "ShadingHeader2": ..., ... },
            { "ShadingHeader1": ..., "ShadingHeader2": ..., ... },
            ...
        ],
        points: [
            { "PointsHeader1": ..., "PointsHeader2": ..., ... },
            { "PointsHeader1": ..., "PointsHeader2": ..., ... },
            { "PointsHeader1": ..., "PointsHeader2": ..., ... },
            ...
        ]
    }

... but with the keys being the column headers from your source data instead. You must also supply an object attached to opts.bindings. The minimal bindings you can supply for this template are as shown in this example:

{
    template: "@openpolis/svgmap-italy-prov_cm_2019",
    version: "1",
    bindings: {
        shading: {
            name: "ShadingHeader1",
        },
        points: {
            name: "PointsHeader1",
            lat: "PointsHeader2",
            lon: "PointsHeader3",
        }
    },
    data: {
        shading: [
            { "ShadingHeader1": ..., "ShadingHeader2": ..., ... },
            { "ShadingHeader1": ..., "ShadingHeader2": ..., ... },
            { "ShadingHeader1": ..., "ShadingHeader2": ..., ... },
            ...
        ],
        points: [
            { "PointsHeader1": ..., "PointsHeader2": ..., ... },
            { "PointsHeader1": ..., "PointsHeader2": ..., ... },
            { "PointsHeader1": ..., "PointsHeader2": ..., ... },
            ...
        ]
    }
}

All possible bindings that you can supply are shown in this example:

{
    template: "@openpolis/svgmap-italy-prov_cm_2019",
    version: "1",
    bindings: {
        shading: {
            name: "ShadingHeader1",
            value: ["ShadingHeader2", "ShadingHeader3", ...],
            metadata: ["ShadingHeader4", "ShadingHeader5", ...],
        },
        points: {
            name: "PointsHeader1",
            lat: "PointsHeader2",
            lon: "PointsHeader3",
            value: ["PointsHeader4", "PointsHeader5", ...],
            metadata: ["PointsHeader6", "PointsHeader7", ...],
        }
    },
    data: {
        shading: [
            { "ShadingHeader1": ..., "ShadingHeader2": ..., ... },
            { "ShadingHeader1": ..., "ShadingHeader2": ..., ... },
            { "ShadingHeader1": ..., "ShadingHeader2": ..., ... },
            ...
        ],
        points: [
            { "PointsHeader1": ..., "PointsHeader2": ..., ... },
            { "PointsHeader1": ..., "PointsHeader2": ..., ... },
            { "PointsHeader1": ..., "PointsHeader2": ..., ... },
            ...
        ]
    }
}

(As before, the keys containing "Header" would be replaced by column names from your data source.)

3. Array of objects with template-defined keys

There is an alternative format you can use, which is likely to be easier to use if your data is not from a spreadsheet source. With this alternative format you supply your data to the template as an array of objects, attached to opts.data, where the keys must be those used by the template, as documented below. In this case there is no need to supply a bindings object, since the key names are already those expected by the template. The required properties in the data object are as follows (scroll down for a description of what each property is):

{
    template: "@openpolis/svgmap-italy-prov_cm_2019",
    version: "1",
    data: {
    shading: [
        {
            name: ...,
            value: [...],
            metadata: [...]
        },
        ...
    ],
    points: [
        {
            name: ...,
            lat: ...,
            lon: ...,
            value: [...],
            metadata: [...]
        },
        ...
    ]
},
    ...
}

And the full list of all possible properties is as follows:

{
    template: "@openpolis/svgmap-italy-prov_cm_2019",
    version: "1",
    data: {
    shading: [
        {
            name: ...,
            value: [...],
            metadata: [...]
        },
        ...
    ],
    points: [
        {
            name: ...,
            lat: ...,
            lon: ...,
            value: [...],
            metadata: [...]
        },
        ...
    ]
},
    ...
}

Meanings of the template data keys:

• shading.name: The column containing the display name of the region
• shading.value: The column of values you want to shade by. Set to multiple columns if using controls to switch values
• shading.metadata: Make additional columns (text, emoji, image URLs, etc) avaiable in custom popups
• points.name: Name associated with point on map (eg. city)
• points.lat: Latitude of point
• points.lon: Longitude of point
• points.value: Value associated with point
• points.metadata: Make additional columns (text, emoji, image URLs, etc) available in custom popups

Template settings

Options for opts.state.

Appearance

background_colour color

Background colour.

disable_zoom boolean

Disable zoom.

region_border_colour color

Border colour.

region_border_opacity number

Border opacity.

region_border_width number

Border width.

highlight_colour color

Border highlight.

highlight_width number

Border width multiplier highlight.

Shading

choropleth boolean

Enable land shading.

land_colour color

Land colour.

scale_type string

Type of colour scale.

sequential_palette string

Sequential palette. Select a sequential palette See github.com/d3/d3-scale-chromatic for swatches.

diverging_palette string

Diverging palette. Select a diverging palette See github.com/d3/d3-scale-chromatic for swatches.

reverse_scale_colours boolean

Reverse colours.

legend_min string

Value left of legend. If empty will equal a value near (but not above) the minimum value in the dataset. (continuous scale)

legend_max string

Value right of legend. If empty will equal a value near (but not below) the maximum value in the dataset. (continuous scale)

continuous_scale boolean

Use continuous scale.

underflow_value string

Gradient start. Defaults to value at the left end of the legend.

colour_gradient_midpoint string

Gradient mid. Defaults to the value halfway between the start and end points.

overflow_value string

Gradient end. Defaults to value at the right end of the legend.

n_buckets number

Number of buckets. Fit scale with equal-width buckets. Values below scale minimum or above scale maximum will be coloured according to corresponding end bucket. Ignored if a valid list of thresholds is supplied below.

custom_thresholds string

Custom thresholds. Ignored if less than two numbers are defined.

equal_swatches boolean

Equal-width swatches. Make all swatches the same length in the legend. Ignored if Use continuous scale is enabled

use_custom_palette boolean

Define custom categorical palette.

categorical_palette string

Categorical palette.

custom_palette text

Add name-colour pairs. Specify a category per line, followed by a colon and then a colour

other_colour color

No match colour. Colour to use for unassigned regions

no_data_fill_colour color

Missing fill colour.

no_data_stripe_colour color

Missing stripe colour.

region_prefix string

Number prefix. Optional prefix for numbers; useful for currency symbols

region_suffix string

Number suffix. Optional suffix for numbers; useful for units

region_decimals number

Number of decimal places. Decimal places for numbers. Negative values round to positive powers of 10 (e.g. -2 rounds to nearest 100)

use_default_names boolean

Use default names in popups.

hidden_regions text

Hidden regions. List any regions you want to hide, one per line

Points

points boolean

Enable points.

point_min_radius number

Minimum radius. Any smaller circles will be scaled up to the specified level. (Ignored if greater than the “Maximum radius” setting.)

point_max_radius number

Maximum radius.

point_fallback_radius number

Radius.

point_scale_type string

Scale points relative to:.

point_max_value number

Maximum value. Values bigger than this maximum will have a radius equal to the maximum radius

point_fill_colour color

Fill.

point_opacity number

Opacity.

point_stroke_colour color

Border.

point_highlight_fill color

Highlight fill.

point_highlight_opacity number

Highlight opacity.

point_highlight_border color

Highlight border.

point_prefix string

Number prefix. Optional prefix for numbers; useful for currency symbols

point_suffix string

Number suffix. Optional suffix for numbers; useful for units

point_decimals number

Number of decimal places. Decimal places for numbers. Negative values round to positive powers of 10 (e.g. -2 rounds to nearest 100)

Shading legend

show_legend boolean

Show legend.

legend_title_type string

Legend title type.

legend_title string

Legend title.

legend_text_size number

Text size.

legend_width number

Width. Preferred width of legend (may shrink on narrow screens)

legend_text_colour color

Colour.

legend_bottom boolean

Legend at bottom.

Controls

show_search boolean

Show search box. Box won't show if shading and points both turned off

search_label string

Search box default text.

shading_control string

Controls for shading data. Control for shading-column selection

shading_play_button boolean

Include play button.

shading_loop boolean

Loop on play.

shading_width number

Width. Preferred width of control in pixels (may shrink on narrow screens)

shading_step_time number

Speed. Measured in seconds, positive values move the slider left to right, negative values move the slider right to left.

shading_loop_pause number

Pause before loop. Measured in seconds and in addition to the regular step time displayed above.

points_control string

Controls for points data. Control for shading-column selection

points_width number

Width. Preferred width of control in pixels (may shrink on narrow screens)

points_step_time number

Speed. Measured in seconds, positive values move the slider left to right, negative values move the slider right to left.

points_loop_pause number

Pause before loop. Measured in seconds and in addition to the regular step time displayed above.

points_play_button boolean

Include play button.

points_loop boolean

Loop on play.

Popup

popup_main_colour color

Background.

popup_opacity number

Opacity.

popup_border_colour color

Border.

popup_text_colour color

Text.

shading_popups boolean

Show popups for regions.

custom_shading_popups boolean

Use custom popups for shading.

custom_shading_popup_text text

Custom popup text for shaded regions. Use {{column_name}} to add data values in your popup

points_popups boolean

Show popups for points.

custom_points_popups boolean

Use custom popups for points.

custom_points_popup_text text

Custom popup text for points. Use {{column_name}} to add data values in your popup

Data formatting

decimal_separator_in_shading_data string

Decimal separator in Shading data sheet. Used for interpretting your data. Only change if data is not displaying on the chart as expected.

decimal_separator_in_points_data string

Decimal separator in Points data sheet. Used for interpretting your data. Only change if data is not displaying on the chart as expected.

decimal_separator string

Decimal separator for display.

thousand_separator string

Thousand separator for display.