Simple map (Austrian communities)

Simple map of Austrian communities, with optional shading, points and popups

Updated 2 years ago by Template retirement home

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

template: _168

version: _9

Template data

There are two different formats in which you can supply data to this template. Which one will be more convenient for you likely depends on the source of your data, as described below.

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. To tell the API how these 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: "_168",
    version: "_9",
    bindings: {
        shading: {
            name: "ShadingHeader1",
            value: "ShadingHeader2"
        },
        points: {
            name: "PointsHeader1",
            lat: "PointsHeader2",
            lon: "PointsHeader3",
            value: "PointsHeader4"
        }
    },
    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: "_168",
    version: "_9",
    bindings: {
        shading: {
            name: "ShadingHeader1",
            value: "ShadingHeader2",
            metadata: ["ShadingHeader3", "ShadingHeader4", ...]
        },
        points: {
            name: "PointsHeader1",
            lat: "PointsHeader2",
            lon: "PointsHeader3",
            value: "PointsHeader4"
        }
    },
    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.)

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: "_168",
version: "_9",
data: {
    shading: [
        {
            name: ...,
            value: ...,
            metadata: [...]
        },
        ...
    ],
    points: [
        {
            name: ...,
            lat: ...,
            lon: ...,
            value: ...
        },
        ...
    ]
},
...
}

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

{
template: "_168",
version: "_9",
data: {
    shading: [
        {
            name: ...,
            value: ...,
            metadata: [...]
        },
        ...
    ],
    points: [
        {
            name: ...,
            lat: ...,
            lon: ...,
            value: ...
        },
        ...
    ]
},
...
}

Meanings of the template data keys:

  • shading.name: The column containing the display name of the region
  • shading.value: A column of values
  • shading.metadata: Columns containing meta information for that row
  • 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

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.

Min: 0.1

Max: 5

region_border_opacity number

Region border opacity.

Max: 1

highlight_colour color

Border colour of highlighted items.

highlight_width number

Border width multiplier for highlights.

disable_zoom boolean

Disable zoom.

region_popups boolean

Show popups on hover.

Background color.

Text color.

Background opacity.

Max: 1

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

use_default_names boolean

Use default names in popups.

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.

Allowed values:

  • sequential (Sequential)
  • diverging (Diverging)
  • categorical (Categorical)

sequential_palette string

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

Allowed values:

  • Oranges
  • Reds
  • Blues
  • Greens
  • Greys
  • Purples
  • BuGn
  • BuPu
  • GnBu
  • OrRd
  • PuBuGn
  • PuBu
  • PuRd
  • RdPu
  • YlGnBu
  • YlGn
  • YlOrBr
  • YlOrRd

diverging_palette string

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

Allowed values:

  • RdBu
  • RdYlGn
  • PiYG
  • BrBG
  • PRGn
  • PuOr
  • RdGy
  • RdYlBu
  • Spectral

reverse_scale_colours boolean

Reverse colours.

continuous_scale boolean

Use continuous scale.

overflow_value string

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.

underflow_value string

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

colour_gradient_midpoint string

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

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.

Min: 3

Max: 9

categorical_palette string

Categorical palette.

Allowed values:

  • Accent
  • Dark2
  • Pastel1
  • Pastel2
  • Set1
  • Set2
  • Set3

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.

no_entry_hide boolean

Hide regions with no entry.

no_data_fill_colour color

Empty fill colour.

show_stripes boolean

Show empty stripes.

no_data_stripe_colour color

Empty stripe colour.

region_decimals number

No 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).

Data formatting

decimal_separator string

Decimal separator.

Predefined values:

  • . (.)
  • , (,)

thousand_separator string

Thousand separator.

Predefined values:

  • , (,)
  • . (.)

Points

points boolean

Plot points.

land_colour color

Land colour. Ignored if colour scale used

point_fill_colour color

Colour of point centres.

point_opacity number

Opacity.

Max: 1

point_stroke_colour color

Colour of point outlines.

point_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).

point_scale_factor number

Scale factor. Scale factor to determine size of circles relative to value (large is bigger). Use 0 to autoscale. If values are large (e.g. in the 1000's) then this number should be small.

point_decimals number

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

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

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.

Allowed values:

  • auto (Auto height)
  • fixed (Fixed height)

External data (advanced)

use_external_data boolean

Use external data.

external_data string

Link to CSV.

external_data_columns text

Columns to use.

external_data_sheet string

Which sheet do you want to fill?.