Mode Analytics
Sign In
Sign Up

SQL Editor

Query your connected data sources with SQL

Notebooks

Use Python and R for advanced analysis

Reports

Build customizable, sharable reports


Helix data engine Dashboards Security Embedded analytics Customers Integrations

Gallery Learn SQL Learn Python

Compare Plans Blog Forum
Mode Studio The collaborate data science platform. Free forever. Sign Up

Mode Analytics

Compare Plans
Product

SQL Editor

Query your connected data sources with SQL

Notebooks

Use Python and R for advanced analysis

Reports

Build customizable, sharable reports

Helix data engine Dashboards Embedded analytics Integrations Security Slack
Customers
Resources

Gallery

Explore example analysis and visualizations

Learn SQL

Answer data questions with SQL

Learn Python

Learn Python for business analysis

Documentation Getting started webinar Forum Blog Contact us
Company Sign In Sign Up – Free Forever
Gallery
  • Charts
  • Tables
  • Reports
  • Dashboards
Try Mode Business

Automate everything & equip everyone with Mode Business.

Request a Demo

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

See more examples

  • Heat Map
  • Funnel chart
  • Chart annotations

<< Back to Gallery

Looks like you've got a thing for cutting-edge data news.

So do we. Stay in the know with our regular selection of the best analytics and data science pieces, plus occasional news from Mode. Sign up here and we'll keep you posted:

Thanks! Keep an eye on your inbox for the next newsletter!

Contact

Request a Demo

hi@modeanalytics.com

208 Utah Street, Suite 400
San Francisco CA 94103

Product

Compare plans

SQL editor

Notebooks

Reports

Dashboards

Embedded analytics

Mode for Slack

Customers

Integrations

Security

Resources

Resource Center

Learn SQL

Learn Python

Data news

Help & Support

Developer

Gallery

Forum

Blog

Company

About Us

Team

Values

Careers

© Mode Analytics, Inc. 2018 Terms of Service Privacy Policy