Simple map (world)
Updated 7 years ago by Template retirement home
API information
This section documents API usage specific to this template, so for an introduction we suggest you refer to the generic API documentation instead.
template: _183
version: _1
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: "_183", 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: "_183", version: "_1", bindings: { shading: { name: 0, // index of a column in your data value: [1, 2, ...], // 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 } }, 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: "_183", 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: "_183", version: "_1", bindings: { shading: { name: "ShadingHeader1", value: ["ShadingHeader2", "ShadingHeader3", ...], }, points: { name: "PointsHeader1", lat: "PointsHeader2", lon: "PointsHeader3", value: ["PointsHeader4", "PointsHeader5", ...], } }, 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: "_183", version: "_1", data: { shading: [ { name: ..., value: [...] }, ... ], points: [ { name: ..., lat: ..., lon: ..., value: [...] }, ... ] }, ... }
And the full list of all possible properties is as follows:
{ template: "_183", version: "_1", data: { shading: [ { name: ..., value: [...] }, ... ], 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
- points.name: Name associated with point
- 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
Colour of highlighted items.
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. 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
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
Use colour scale to shade land.
shading_control string
Control. Control for shading-column selection Allowed values:
shading_width number
Width. Width of control in pixels Min: 30
shading_play_button boolean
Include play button with slider.
shading_step_time number
Time between animation steps. Used when pressing the play button on a slider control and measured in seconds. Positive values move the slider left to right, negative values move the slider right to left.
shading_loop_time number
Loop time multiplier. Values bigger than 1 means the animation will spend a larger amount to time at the end point of the slider. Set to zero to disable looping altogether.
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).
palette string
Palette. Specify a d3 sequential scheme. See github.com/d3/d3-scale-chromatic for swatches. Allowed values:
reverse_scale_colours boolean
Reverse colours.
continuous_scale boolean
Use continuous scale. Ignored if Use continuous scale is disabled
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 disabled
equal_swatches boolean
Equal-width swatches. Make all swatches the same length in the legend. Ignored if Use continuous scale is disabled
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
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_popups boolean
Show popups on hover.
use_default_names boolean
Use default names in popups.
Points
points boolean
Plot points.
points_control string
Control. Control for shading-column selection Allowed values:
points_width number
Width. Width of control in pixels Min: 30
points_play_button boolean
Include play button with slider.
points_step_time number
Time between animation steps. Used when pressing the play button on a slider control and measured in seconds. Positive values move the slider left to right, negative values move the slider right to left.
points_loop_time number
Loop time multiplier. Values bigger than 1 means the animation will spend a larger amount to time at the end point of the slider. Set to zero to disable looping altogether.
land_colour color
Land colour. Ignored if colour scale used
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_fill_colour color
Colour of point centres.
point_opacity number
Opacity. Max: 1
point_stroke_colour color
Colour of point outlines (normal).
point_prefix string
Number prefix. Optional prefix for numbers; useful for currency symbols
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)
point_suffix string
Number suffix. Optional suffix for numbers; useful for units
Data formatting
decimal_separator string
Decimal separator. Predefined values:
thousand_separator string
Thousand separator. Predefined values:
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:
Earth
projection string
Projection. Specify a projection Allowed values:
water_colour color
Oceans.
graticule_colour color
Grid colour.
graticule_width number
Grid line width.
graticule_opacity number
Grid opacity.