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",
            ...
        ]
    }
}

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: "_156",
    version: "_32",
    bindings: {
        shading: {
            name: 0, // index of a column in your data
            value: 1, // index of a column in your data
        }
    },
    data: {
        shading: [
            [ "ShadingColumn1Value1", "ShadingColumn2Value1",
            [ "ShadingColumn1Value2", "ShadingColumn2Value2",
            [ "ShadingColumn1Value3", "ShadingColumn2Value3",
            ...
        ]
    }
}

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

{
    template: "_156",
    version: "_32",
    bindings: {
        shading: {
            name: 0, // index of a column in your data
            value: 1, // index of a column in your data
            allresults: [2, 3, ...], // index(es) of column(s) in your data
        }
    },
    data: {
        shading: [
            [ "ShadingColumn1Value1", "ShadingColumn2Value1",
            [ "ShadingColumn1Value2", "ShadingColumn2Value2",
            [ "ShadingColumn1Value3", "ShadingColumn2Value3",
            ...
        ]
    }
}

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": ..., ... },
            ...
        ]
    }

... 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: "_156",
    version: "_32",
    bindings: {
        shading: {
            name: "ShadingHeader1",
            value: "ShadingHeader2",
        }
    },
    data: {
        shading: [
            { "ShadingHeader1": ..., "ShadingHeader2": ..., ... },
            { "ShadingHeader1": ..., "ShadingHeader2": ..., ... },
            { "ShadingHeader1": ..., "ShadingHeader2": ..., ... },
            ...
        ]
    }
}

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

{
    template: "_156",
    version: "_32",
    bindings: {
        shading: {
            name: "ShadingHeader1",
            value: "ShadingHeader2",
            allresults: ["ShadingHeader3", "ShadingHeader4", ...],
        }
    },
    data: {
        shading: [
            { "ShadingHeader1": ..., "ShadingHeader2": ..., ... },
            { "ShadingHeader1": ..., "ShadingHeader2": ..., ... },
            { "ShadingHeader1": ..., "ShadingHeader2": ..., ... },
            ...
        ]
    }
}

(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: "_156",
    version: "_32",
    data: {
    shading: [
        {
            name: ...,
            value: ...,
            allresults: [...]
        },
        ...
    ]
},
    ...
}

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

{
    template: "_156",
    version: "_32",
    data: {
    shading: [
        {
            name: ...,
            value: ...,
            allresults: [...]
        },
        ...
    ]
},
    ...
}

Meanings of the template data keys:

• shading.name: The column containing the display name of the region
• shading.value: A column of values
• shading.allresults: Column containing all the results

Template settings

Options for opts.state.

Appearance

background_colour color

Background colour.

region_border_colour color

Region border colour.

region_border_width number

Region border width.

region_border_opacity number

Region border opacity.

highlight_colour color

Colour of highlighted items.

disable_zoom boolean

Disable zoom.

Popup

popup_main_colour color

Colour of popup boxes.

popup_text_colour color

Colour of text in popup boxes.

popup_opacity number

Opacity of popup boxes.

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_popups boolean

Show popups on hover.

use_default_names boolean

Use default names in popups.

popup_text text

Custom popup text.

Legend

title string

Title.

legend_text_colour color

Legend text colour.

legend_text_size number

Legend text size.

legend_width number

Legend width.

legend_bottom boolean

Legend at bottom.

legend_min string

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

legend_max string

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

Shading

choropleth boolean

Enable land shading.

scale_type string

Type of data.

no_entry_hide boolean

Hide regions with no entry.

no_data_fill_colour color

Missing data fill colour.

no_data_stripe_colour color

Missing data stripe colour.

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)

region_magnitude_multiplier number

Shift decimal point. Specify the number of places to move the decimal point (e.g. use -3 to convert 1000 to 1).

Sequential shading

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.

continuous_scale boolean

Use continuous scale.

underflow_value string

Colour gradient start point. Defaults to value at the left end of the legend. Ignored if Use continuous scale is disabled

colour_gradient_midpoint string

Colour gradient midpoint. Defaults to the value halfway between the start and end points. Ignored if colour scheme is not diverging, if the value is not between start and end points or if Use continuous scale is disabled

overflow_value string

Colour gradient end point. Defaults to value at the right end of the legend. Ignored if value is to the left of Colour gradient start point or if Use continuous scale is disabled.

custom_thresholds string

List of custom thresholds. Ignored if less than two numbers are defined or if Use continuous scale is enabled

equal_swatches boolean

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

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 above or if Use continuous scale is enabled.

Categorical shading

categorical_palette string

Categorical palette.

use_custom_palette boolean

Define custom 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

Color for other values.

Data formatting

decimal_separator string

Decimal separator.

thousand_separator string

Thousand separator.

Embed settings

embed_mode string

Embed mode. If you plan to specify a fixed height when generating your embed code, choose "Fixed height" here and the map will be scaled to be as big as possible in the available space. Otherwise leave the default setting of "Auto height"; in this mode the embedded map will fill the available width and get taller and shorter based on its aspect ratio.

External data

external_data string

URL (to a .csv).

selected_column string

External column selection.