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.

Mode Analytics

Click Results à la Mode to clone 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 the country_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), and iso_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.

Tags: charts