{"id":10302,"date":"2020-05-06T06:19:30","date_gmt":"2020-05-06T06:19:30","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=10302"},"modified":"2022-08-13T10:58:50","modified_gmt":"2022-08-13T10:58:50","slug":"javascript-choropleth-map-tutorial","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2020\/05\/06\/javascript-choropleth-map-tutorial\/","title":{"rendered":"Creating Choropleth Map Data Visualization Using JavaScript, on COVID-19 Stats"},"content":{"rendered":"

\"CreatingThese days you see choropleth maps<\/a> in a variety of webpages and utilized for various subjects. Have you wondered how such data visualizations are built? Are you interested in making them by yourself? If so, stay with me through this JS charting tutorial, where I will show you how\u00a0to\u00a0create an interactive JavaScript choropleth map<\/strong> from scratch but with ease.<\/p>\n

Basic\u00a0knowledge of HTML5 and\u00a0JS is always\u00a0helpful,\u00a0but even if you are a beginner in this field, understand these four simple steps<\/strong>\u00a0and you will be able to\u00a0quickly get\u00a0a good-looking cross-platform interactive choropleth map data visualization\u00a0for your app or website!<\/p>\n

What exactly are choropleth maps? When you break down the word, you see that choro-<\/em> (\u201cchoros<\/em>\u201d) means \u201carea<\/em>\u201d and pleth-<\/em> (\u201cplethos<\/em>\u201d) means \u201cmultitude<\/em>.\u201d Exactly, these maps are used to visualize statistical data related to multiple geographic areas. Each area is colored or shaded differently according to the value of the given data, making it easy to grasp how a measurement varies\u00a0across a territory.<\/p>\n

For this JS mapping tutorial, I will use open COVID-19 data<\/strong> to show the distribution of confirmed cases and deaths around the world by country. I will start with a basic choropleth map that will graphically represent the confirmed cases. Then I will add a legend, customize the tooltip, and add bubbles to visualize the number of deaths.<\/p>\n

Let\u2019s get started!<\/p>\n

<\/p>\n

How to Create JavaScript Choropleth Map<\/h2>\n

Generally, building a JavaScript-based chart or map requires four basic things:<\/p>\n

    \n
  1. Create the HTML page for your chart.<\/li>\n
  2. Add the necessary JavaScript files.<\/li>\n
  3. Prepare the data you want to visualize.<\/li>\n
  4. Write the JS code for the chart.<\/li>\n<\/ol>\n

    Now, let\u2019s look at each step in detail. Here is a choropleth map that will be the final output of the first part of this tutorial:<\/p>\n

    \"\"<\/p>\n

    Step 1: Create the HTML page for your map<\/h3>\n

    The first thing you need to do is create a basic HTML page. Give it a title and create an HTML block element (for example, <div>)<\/code> to place your map chart. To identify this <div><\/code> later in the code, you should also give it an id attribute of your choice. Here, I have used the value \u201ccontainer\u201d.<\/p>\n

    So your\u00a0page\u00a0can\u00a0look like this:<\/p>\n

    <!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n  <title>Choropleth Map<\/title>\r\n  <style>\r\n    html,\r\n    body,\r\n    #container {\r\n      width: 100%;\r\n      height: 100%;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n\r\n<body>\r\n  <div id=\"container\"><\/div>\r\n<\/body>\r\n\r\n<\/html><\/code><\/pre>\n
    Note that you can use CSS rules in the <style><\/code> block to define how you want your upcoming JavaScript choropleth map\u00a0to be placed. In this case, using “100%” in both width<\/code> and height<\/code> parameters will make the\u00a0visualization occupy the entire page.<\/p>\n
    Step 2. Add the necessary JavaScript files<\/h3>\n
    Second, you should go to the <head><\/code> section and reference all the appropriate JS scripts you are going to use.<\/p>\n
    To create\u00a0a choropleth map along this tutorial, I will use AnyChart\u2019s AnyMap JS library<\/a> which, as its name suggests, is specifically designed to\u00a0produce maps. JavaScript charting libraries are very popular\u00a0nowadays; they provide\u00a0commonly needed functions out of the box to make the developing process simpler and faster. This specific library is lightweight, flexible, and easy to get started, particularly\u00a0thanks\u00a0to\u00a0a greatly written documentation<\/a> and a lot of samples in the map gallery<\/a>.<\/p>\n
    In this tutorial,\u00a0I will use the CDN<\/a>, but keep in mind that you can\u00a0download<\/a> the scripts if you want.<\/p>\n
    For the choropleth map that I have in mind, I will need the following modules<\/a>:<\/p>\n