{"id":16528,"date":"2023-05-18T19:37:26","date_gmt":"2023-05-18T19:37:26","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=16528"},"modified":"2023-05-18T22:49:30","modified_gmt":"2023-05-18T22:49:30","slug":"choropleth-map-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2023\/05\/18\/choropleth-map-javascript\/","title":{"rendered":"How to Build Choropleth Map with JavaScript"},"content":{"rendered":"

\"Choropleth<\/a>Are you ready to learn how to create a choropleth map with JavaScript like a boss? Maps are a powerful way to visualize data, but building one from scratch can be a daunting task. Don’t worry, I’m here to help!<\/p>\n

In this tutorial, I’ll guide you through the process of building a JavaScript choropleth map step by step. And to make things more interesting, we\u2019ll use Queen Elizabeth II’s state visits as an example to showcase the power of this type of map.<\/p>\n

Get ready to impress yourself and your audience with stunning data visualizations, and let’s get started on this exciting journey together!<\/p>\n

<\/p>\n

What Is a Choropleth Map?<\/h2>\n

A choropleth map is a type of thematic map that uses color to represent values<\/a> of a specific quantity within different regions or geopolitical areas. The map is divided into areas or polygons, and the color of each area represents the value of the data being visualized. Typically, darker shades of a color indicate higher values, while lighter shades represent lower values.<\/p>\n

So as I mentioned, in this tutorial we’ll be creating a JS-based choropleth map to showcase Queen Elizabeth II’s state visits around the world. By using different colors to represent the number of visits in each region, we can easily identify which areas the Queen visited the most frequently. The final interactive choropleth map will look like this:<\/p>\n

\"JS-based<\/p>\n

How to Build a Basic Choropleth Map<\/h2>\n

Creating a choropleth map with JavaScript may seem challenging, but fear not! There are just four simple steps to follow:<\/p>\n

    \n
  1. Set up an HTML page to display the map.<\/li>\n
  2. Add all the necessary JavaScript files.<\/li>\n
  3. Include the data.<\/li>\n
  4. Write the required JavaScript code to render the map.<\/li>\n<\/ol>\n

    Once you’ve completed these four steps, you’ll have a beautiful choropleth map that accurately represents your data. So let’s dive into each step in more detail and learn how to easily create a stunning JavaScript choropleth map!<\/p>\n

    1. Set up an HTML page to display the choropleth map<\/h3>\n

    To start creating the choropleth map, the first step is to set up an HTML page with a div<\/code> element and give it a unique ID to reference it later.<\/p>\n

    I\u2019ll set the width and height of the div<\/code> element to 100% to render the map on the whole page, but you can adjust these values to suit your needs. This div<\/code> element will be the container for the chart, and the ID will be used to reference it in the JavaScript code. So, let’s get started by creating the HTML page for the upcoming choropleth map!<\/p>\n

    <html>\r\n  <head>\r\n    <title>JavaScript Choropleth Map<\/title>\r\n    <style type=\"text\/css\">      \r\n      html, body, #container { \r\n        width: 100%; height: 100%; margin: 0; padding: 0; \r\n      } \r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\"><\/div>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    2. Add all the necessary JavaScript files<\/h3>\n
    To easily create data visualizations for the web, I use a JavaScript charting library with in-built utilities and functions. With the vast number<\/a> of such JS libraries available, the process for creating charts and maps is similar in essence and logic across most of them. In this tutorial, I am using the AnyChart<\/a> JS charting library as it is beginner-friendly with extensive documentation and plenty of examples to help you get started.<\/p>\n
    It is needed to link the required JS scripts in the <head><\/code> section of the HTML page. These scripts include the Core and Geo Maps modules and the file that contains geodata for the world map, all of which are available on the CDN. I’ll also use two more script files to connect the data to the choropleth map. One is the Data Adapter, which will help load the data, and the other is Proj4js<\/a>, a JavaScript library that will transform the coordinates from one coordinate system to another so the data can be plotted on the map accurately.<\/p>\n
    <html>\r\n  <head>\r\n    <title>JavaScript Choropleth Map<\/title>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-core.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-map.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/geodata\/custom\/world\/world.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-data-adapter.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/proj4js\/2.3.15\/proj4.js\"><\/script>\r\n    <style type=\"text\/css\">      \r\n      html, body, #container { \r\n        width: 100%; height: 100%; margin: 0; padding: 0; \r\n      } \r\n    <\/style>\r\n  <\/head>\r\n  <body>  \r\n    <div id=\"container\"><\/div>\r\n    <script>\r\n      \/\/ All the code for the JS choropleth map will come here\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    3. Include the data<\/h3>\n
    Alright, let’s get the data loaded up and plotted on the JS choropleth map! First things first, I have collected the data on the state visits made by Queen Elizabeth II from Wikipedia<\/a> and put it in a JSON file for easy access. You can find it here<\/a>.<\/p>\n
    All the necessary files are already linked in the <head><\/code> section of the HTML page. So it\u2019s possible to use the loadJsonFile()<\/code> method inside a <script><\/code> tag in the body of the page to load the JSON file containing the Queen’s state visits data.<\/p>\n
    anychart.data.loadJsonFile(<fileURL>, function (data) {});<\/code><\/pre>\n
    Great! Now that everything is set up and ready to go, it’s time to move on to the main part of the journey: creating the choropleth map visualization! Let’s do this!<\/p>\n
    4. Write the required JavaScript code to render the map<\/h3>\n
    You can get the choropleth map rendered with just a few lines of JS code. First, make sure that all the code is inside the function anychart.onDocumentReady()<\/code> so that the page is fully loaded before executing anything else. Once the data file is loaded, set the data, create the map, and set the geodata.<\/p>\n
    <script>\r\n\r\n  anychart.onDocumentReady(function() {\r\n\r\n    \/\/ load data from a json file\r\n    anychart.data.loadJsonFile('https:\/\/gist.githubusercontent.com\/shacheeswadia\/8f45da54d9bf2032fee201dbfc79e0e4\/raw\/5d10d58f40b4a1d994cef36dbc64545ef90ead80\/queenVisits.json',\r\n    function (data) {\r\n    \r\n      \/\/ create a dataset\r\n      let dataSet = anychart.data.set(data);\r\n\r\n      \/\/ create a map instance\r\n      let map = anychart.map();\r\n\r\n      \/\/ set the geodata\r\n      map.geoData(\"anychart.maps.world\");\r\n\r\n      \/\/ the rest of the JS code will be here\r\n\t\r\n    });\r\n\r\n  });\r\n\r\n<\/script><\/code><\/pre>\n
    Now, create a series with the choropleth()<\/code> function and the loaded data. For the coloring, let\u2019s set up a linear color scale with four different shades of blue based on the colors on the royal website. As per convention, the darker the shade of a country, the higher the number of visits to that region.<\/p>\n
    \/\/ create a choropleth series\r\nlet series = map.choropleth(dataSet);\r\n\r\n\/\/ set the map colors\r\nseries\r\n  .colorScale(\r\n     anychart.scales.linearColor(\"#f2f2f2\", \"#42a5f5\", \"#1976d2\", \"#233580\")\r\n   );<\/code><\/pre>\n
    Finally, give a title to the map, set the container, and draw the resulting map.<\/p>\n
    \/\/ set the map title\r\nmap.title(\"State Visits Made by Queen Elizabeth II\");\r\n\r\n\/\/ set the container\r\nmap.container('container');\r\n\r\n\/\/ initiate the map drawing\r\nmap.draw();<\/code><\/pre>\n
    And voila! A beautiful and functional choropleth map is ready! Check out how it looks. You can find the entire code below or view and play with it here<\/a>.<\/p>\n