{"id":12038,"date":"2021-01-25T08:51:22","date_gmt":"2021-01-25T08:51:22","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=12038"},"modified":"2022-09-17T14:33:06","modified_gmt":"2022-09-17T14:33:06","slug":"bubble-map-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2021\/01\/25\/bubble-map-javascript\/","title":{"rendered":"How to Create Bubble Map with JavaScript to Visualize Election Results"},"content":{"rendered":"

\"BubbleIn these times of exponentially growing data, visualization is a necessary skillset to have in your tool box. Popular techniques include bar charts, line graphs, pie charts, and bubble maps among others.<\/p>\n

Building interactive charts from scratch with JavaScript can be a difficult endeavor for any developer, especially someone starting out new. That is exactly why we have JS charting libraries<\/a> which make it much easier and quicker to conjure up insightful visualizations!<\/p>\n

Read on to see how I create a JavaScript Bubble Map with one of these libraries.<\/p>\n

<\/p>\n

JavaScript Charting Libraries<\/h2>\n

There are quite a few great JavaScript libraries available to use and each one of them has its own pros and cons. But the best part is that the process of building charts with all of them is mostly similar. So, you can learn the ropes with any one and then use whichever library suits your requirement for a particular project.<\/p>\n

I have decided to use AnyChart JavaScript Library<\/a> for creating bubble maps along with this tutorial. I think it is a great choice for developers with novice to intermediate level of coding skills. AnyChart is flexible with extensive documentation and has a variety of chart types to kick start your visualization journey.<\/p>\n

What Is Bubble Map and What Will It Show?<\/h2>\n

I know you are excited to start creating the visualization but before we begin, it is important to understand the chart type and why it is a good fit for what we want to show.<\/p>\n

A bubble map is essentially a combination of a bubble chart and a map where the bubbles are plotted over geographical regions. The size of the bubble indicates the value of the particular variable, with the position on the map indicating location.<\/p>\n

One of the most important events of 2020 was the US presidential election. Of course, we know the overall outcome. But wouldn\u2019t it be interesting to see who won in which states and by what percentage \u2014 all in just one view? I certainly think so! While I’m sure many of us have seen a lot of 2020 US election maps, I will create my own and show you how, step by step!<\/p>\n

I am going to use the bubble map chart where I will plot the bubbles over each American state. The 3 indicated parameters will be as follows:<\/p>\n

    \n
  1. The number of electoral votes for each state, by the bubble size.<\/li>\n
  2. The winning party for each state, by the bubble color.<\/li>\n
  3. Percentage of votes won, by the color opacity.<\/li>\n<\/ol>\n

    As you can see, the superpower of a bubble map chart is the ability to show multiple parameters in a single viz.<\/p>\n

    Creating Bubble Map with JavaScript<\/h2>\n

    Now that you know what a bubble map is and hoping that you are convinced about it being the right chart to represent state-wise results of the US Elections, let’s dive into the process.<\/p>\n

    1. Create a basic HTML page<\/h3>\n

    The initial step is to create a blank HTML page. To hold my chart, I add a div element with a unique id that I will use to reference it later.<\/p>\n

    I set the width and height of the placeholder div to 100% so that the chart is displayed over the entire screen. You can keep these values as per your preference.<\/p>\n

    <!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n\u00a0\u00a0<title>Bubble Map<\/title>\r\n\u00a0\u00a0<style>\r\n\u00a0\u00a0\u00a0\u00a0html,\r\n\u00a0\u00a0\u00a0\u00a0body,\r\n\u00a0\u00a0\u00a0\u00a0#container {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 0;\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\u00a0\u00a0<div id=\"container\"><\/div>\r\n<\/body>\r\n\r\n<\/html><\/code><\/pre>\n
    2. Include the necessary script<\/h3>\n
    The next step is to link the appropriate JS scripts that will be used to create the bubble map. Since I am using the AnyChart library, I will reference the corresponding files. For my chart, I need to add AnyChart\u2019s Base and Geo Maps modules<\/a>. I also need to include the file that has the geodata for the US states which is also available in the library\u2019s CDN<\/a>.<\/p>\n
    Just to remind you, all the script files need to be included in the <head><\/code> section of the HTML page.<\/p>\n
    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-base.min.js\" type=\"text\/javascript\"><\/script>\r\n<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-map.min.js\" type=\"text\/javascript\"><\/script>\r\n<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/geodata\/countries\/united_states_of_america\/united_states_of_america.js\"><\/script><\/code><\/pre>\n
    3. Connect the data<\/h3>\n
    There are a ton of datasets available for the US election results. For this chart, we need specific fields so I had to create the final dataset by combining data from multiple sources. I used the dataset about the number of electoral votes per state from The Library of Congress<\/a> site and the winner data from The Associated Press<\/a>.<\/p>\n
    The AnyChart library supports many data formats, including CSV, JSON, XML… To make things simpler here, I have pre-processed the data to include relevant fields for our chart which are as follows:<\/p>\n
      \n
    1. State code<\/li>\n
    2. Latitude<\/li>\n
    3. Longitude<\/li>\n
    4. State name<\/li>\n
    5. Number of electoral votes<\/li>\n
    6. Winning party<\/li>\n
    7. % of votes won<\/li>\n<\/ol>\n
      You can download the JSON file here<\/a>.<\/p>\n
      Before we start using the data, we will need to include 2 more script files to our HTML page. The Data Adapter<\/a> module handles the loading of the data file, so we include that. Since we are creating a map, we will make use of another JavaScript library \u2014 Proj4js \u2014 which transforms point coordinates from one coordinate system to another. In simple terms, it will take care of plotting the bubbles over the respective geographical areas.<\/p>\n
      4. Add the code to draw the chart<\/h3>\n
      Now that the preliminaries are over, it is time to get to the main part. The great part about using JavaScript charting libraries is that the amount of code one has to write can be really small. I will walk you through the lines of code so that you have a better understanding of how the bubble map is drawn.<\/p>\n
      Firstly, I will make sure that all the code for creating the chart is inside the anychart.onDocumentReady()<\/code> function. This is to have the page fully loaded before anything else is executed. Next we load the data using anychart.data.loadJsonFile()<\/code> function.<\/p>\n
      I create the map first, define some settings for it, and set the geodata. I also add a title to the map.<\/p>\n
      anychart.onDocumentReady(function () {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0anychart.data.loadJsonFile(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'https:\/\/gist.githubusercontent.com\/shacheeswadia\/70ec3d69e0e7a8bff7917607ea2926e4\/raw\/c3329fa81e86d9e637503b042becd17e68d9a718\/bubbleMapData.json',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function (data) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Creates map chart\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var map = anychart.map();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Define settings for maps regions\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0map\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.unboundRegions()\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.enabled(true)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.fill('#E1E1E1')\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.stroke('#D2D2D2');\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Set geodata using the script added\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0map.geoData('anychart.maps.united_states_of_america');\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Set Chart Title\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0map\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.title('2020 US Election Results');\r\n           \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});<\/code><\/pre>\n
      Next, I will add the bubbles over the map. Since tiny bubbles would not be visible well and very large bubbles would create a messy overlap, I set a minimum and maximum bubble size.<\/p>\n
      \/\/ Set bubble min\/max size settings\r\nmap.minBubbleSize('0.8%').maxBubbleSize('5%');<\/code><\/pre>\n
      Now, since we want to show the election results, we need to indicate the winner for each state by the winning party color \u2014 blue for Democrats and red for Republicans. For this we check the winner in the data and assign the fill attribute with the corresponding color.<\/p>\n
      \/\/ Fill color based on the winner\r\ndata.forEach(function(d){\r\n  if(d.winner == \"Democrats\"){\r\n    d.fill = \"#019bd8\";\r\n  }else{\r\n    d.fill = \"#d81c28\";\r\n  }\r\n});<\/code><\/pre>\n
      I then plot the bubbles according to the data and set the size of the bubble to reflect the number of electoral votes from the data. I enable the default tooltip and labels for the bubble chart with a bit of styling.<\/p>\n
      The final steps are setting the container to reference the previously added HTML block element and drawing the chart.<\/p>\n
      That\u2019s it \u2014 a beautiful, fully functional, interactive bubble map is ready with just these few lines of HTML and JS code!<\/p>\n