Charts
Links in Big Number charts
Bullet chart
Sparklines in Big Number charts
Chart heights
Chart annotations
Choropleth map
Force-directed graph
Funnel chart
Geographic heat map
Google Maps with markers
Heat map
Hive plot
Horizontal bar chart
Network matrix
Creating Chart Annotations using Matplotlib
Creating Histograms using Pandas
Creating Horizontal Bar Charts using Pandas
How to Create R Histograms & Stylize Data
Creating Horizontal Bar Charts using R
Sunburst chart
State choropleth map
Word cloud
World choropleth map
Zipcode choropleth map
How to implement gallery examples using the HTML editor
World choropleth map
Choropleth maps are thematic maps in which areas are shaded based on the prevalence of a particular variable. They are a great way of showing how a measurement varies across a geographic area.
Below is an example of choropleth map showing the average life expectancy by country. States shaded dark blue have a higher average life expectancy, while states shaded dark red have a lower average life expectancy. Data is provided by the World Bank.
Click Powered by Mode to duplicate this example and make your own world choropleth map. Learn more about using HTML to customize your reports.
Create a world choropleth map
Add the stylesheet links and script tags to the top of the HTML:
<link rel="stylesheet" href="https://mode.github.io/alamode/alamode.min.css">
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.4/queue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js"></script>
<script src="https://mode.github.io/alamode/alamode.min.js"></script>
Add the customizable snippet at the bottom of the HTML:
<script>
alamode.worldChoropleth(
{
query_name: "Query 1",
width: 1100,
country_column: "country_code",
country_code_type: "iso_code_alpha_3",
// Options for country_code_type:
// name
// iso_code_numeric
// iso_code_alpha_2
// iso_code_alpha_3
value_column: "life_expectancy",
title: "Life expectancy by country",
color_gradient: ["#b2182b", "#d6604d", "#f4a582", "#fddbc7", "#d1e5f0", "#92c5de", "#4393c3", "#2166ac"]
}
)
</script>
You can customize the map by editing the parameters in the snippet:
html_element
: If not provided, the map will be added as the last element in the report. To place it elsewhere, select an element in your report with this parameter.width
: The width of the map. Defaults to 950. The map will always stay the same ratio.height
: The height of the HTML element containing the map. The map itself will resize according to the width value provided.query_name
: The name of the query that returns the map's dataset. If you update the name of the query, you’ll need to update it here as well.country_column
: The dataset column that returns the identifier for each country.country_code_type
: The type of identifier returned in thecountry_column
. There are four options:name
(the full name of the country, such as Egypt and Germany),iso_code_numeric
(the numeric ISO country code, such as 818 and 276),iso_code_alpha_2
(the uppercase two-letter ISO country code, such as EG and DE), andiso_code_alpha_3
(the uppercase three-letter ISO country code, such as EGY and DEU).value_column
: The dataset column that returns the value that determine how each country is shaded.title
: The map's title.color_gradient
: A list of colors to show in the map. Colors should be listed from low to high.