Map: US states
Updated 7 years ago by Daan Louter
How to use this template
A template for thematic mapping: shade the regions by one dataset and/or plot scaled circles at specific coordinates from another dataset.
Data requirements
To shade regions in the map according to data requires a datasheet containing a column of relevant Region names and one or more columns of Values. The names should match those in the corresponding column in the sample data (differences in case and other minor character details are ignored when matching). The Values can be numbers or plain text.
To add points to the map requires four columns of data. One should be a column of Point Names and one a column of Point Values. On top of this, the template requires latitude and longitude values so that points can be positioned at the appropriate location on the map.
Tips
- For numeric Values, you can choose to shade a sequential scale that goes from light to dark (or vice versa) or a diverging scale that goes from one dark colour to another via a light central point. These scales can also be continuous or discrete, with customisable end points and breaks.
- For textual Values (such as victorious political parties or favourite band of chocolate bar), you can use a predefined or custom set of categorical colours to shade a map.
- If you select more than one column of values for either points or regions, a control is added to the page, allowing you (and viewers of your visualisation) to switch between datasets. The form that control takes can be changed in the Controls settings panel. You can choose between a dropdown menu, buttons and a slider.
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: _265
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: "_265",
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: "_265",
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
}
},
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: "_265",
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: "_265",
version: "_1",
bindings: {
shading: {
name: "ShadingHeader1",
value: ["ShadingHeader2", "ShadingHeader3", ...],
metadata: ["ShadingHeader4", "ShadingHeader5", ...],
},
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: "_265",
version: "_1",
data: {
shading: [
{
name: ...,
value: [...],
metadata: [...]
},
...
],
points: [
{
name: ...,
lat: ...,
lon: ...,
value: [...]
},
...
]
},
...
}
And the full list of all possible properties is as follows:
{
template: "_265",
version: "_1",
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: 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
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. Max: 1
region_border_width number
Border width. Min: 0.1 Max: 5
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. Allowed values:
sequential_palette string
Sequential palette. Select a sequential palette See github.com/d3/d3-scale-chromatic for swatches. Allowed values:
diverging_palette string
Diverging palette. Select a diverging palette See github.com/d3/d3-scale-chromatic for swatches. Allowed values:
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. Min: 3 Max: 9
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. Allowed values:
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. Min: 1
point_fallback_radius number
Radius. Min: 1
point_scale_type string
Scale points relative to:. Allowed values:
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. Max: 1
point_stroke_colour color
Border.
point_highlight_fill color
Highlight fill.
point_highlight_opacity number
Highlight opacity. Max: 1
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. Allowed values:
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 Allowed values:
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) Min: 30
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 Allowed values:
points_width number
Width. Preferred width of control in pixels (may shrink on narrow screens) Min: 30
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. Max: 1
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
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. Allowed values:
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. Allowed values:
decimal_separator string
Decimal separator for display. Predefined values:
thousand_separator string
Thousand separator for display. Predefined values:
