{"id":15907,"date":"2022-11-16T08:58:24","date_gmt":"2022-11-16T08:58:24","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=15907"},"modified":"2022-11-17T23:49:22","modified_gmt":"2022-11-17T23:49:22","slug":"bubble-maps-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2022\/11\/16\/bubble-maps-js\/","title":{"rendered":"How to Make Bubble Maps in JavaScript"},"content":{"rendered":"

\"Bubble<\/a>Map charts are a great way to put data in a geographical context. And they are not difficult to create! I am eager to demonstrate that by walking you through the creation of a bubble map<\/a>, one of the most popular types data maps<\/a>, with the help of JavaScript.<\/p>\n

A bubble map is a combination of a bubble chart<\/a> and a geographical map. It uses circles of different sizes (and sometimes colors) to indicate numeric values relating to locations or territories.<\/p>\n

In this tutorial, I will be visualizing the data on gasoline prices across the United States. They saw record highs this summer after a surge fueled by the outbreak of the Russia\u2013Ukraine conflict. The first, basic bubble map will display the gas prices in July by state. The final one will add the magnitude of the change since February 23, one day before Russia launched an attack on Ukraine.<\/p>\n

Follow along and you\u2019ll learn to build beautiful interactive maps in JS with ease and no problem!<\/p>\n

<\/p>\n

Final JS Bubble Map Preview<\/h2>\n

Check out the final result of the JavaScript-based bubble mapping in this tutorial:<\/p>\n

\"Custom<\/p>\n

Basic JavaScript Bubble Map in 4 Steps<\/h2>\n

Creating interactive JS bubble maps from scratch might seem daunting and tedious. But I will show you how to do it with ease and fun.<\/p>\n

Generally speaking, there are four fundamental steps to build a basic bubble map, just like any other chart: prepare a web page, add JavaScript files, load data, and write some charting code. Let\u2019s do that!<\/p>\n

1. Prepare a web page<\/h3>\n

First things first. I create a blank web page. Then I add a block-level HTML element (div<\/code>) as the placeholder for the bubble map; I also give it a unique id (container<\/code>) and set some styling.<\/p>\n

Here is how my HTML page looks now:<\/p>\n

<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Bubble Map<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; height: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>\r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
I want the visualization to be displayed over the entire screen. So I\u2019ve set the width and height of the placeholder div<\/code> element as 100%. Feel free to change that as you see fit in your situation.<\/p>\n
2. Add JavaScript files<\/h3>\n
Second, all the JS files that will be used to make a bubble map must be added to the web page. That is done by adding the corresponding links wrapped in the script<\/code> tags to the head<\/code> section.<\/p>\n
To make it all quick and straightforward, I will use the JavaScript charting library called AnyChart<\/a>, precisely the AnyMap<\/a> solution. So, I include the two modules needed to build bubble maps, \u201ccore\u201d and \u201cgeo maps\u201d, as well as the geodata file for the United States.<\/p>\n
Then I prepare a place for the future JS mapping code itself by adding the script<\/code> tag to the body<\/code> section (basically, this tag can be put anywhere across the page).<\/p>\n
See what my HTML page looks like now:<\/p>\n
<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Bubble Map<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-core.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-map.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/geodata\/countries\/united_states_of_america\/united_states_of_america.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; height: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>  \r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ The place for the JavaScript bubble mapping code.\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
3. Load data<\/h3>\n
Third, I add my data.<\/p>\n
There are multiple data formats<\/a> that can be used. I decided to go with JSON and created a data file with the prices<\/a> of regular gasoline across the U.S., by state, which you can take a look at here<\/a>.<\/p>\n
I will need two more JS files for using the data. One is the Data Adapter<\/a> for loading the JSON data file itself. And the other is Proj4js<\/a> for transforming the coordinates to plot bubbles over the respective geographical states. I reference them in the head<\/code> section together with the other scripts.<\/p>\n
<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-data-adapter.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/proj4js\/2.3.15\/proj4.js\"><\/script><\/code><\/pre>\n
Then I use the anychart.data.loadJsonFile()<\/code> function to load the JSON file, within the script<\/code> tag previously placed in the body<\/code> section.<\/p>\n
anychart.data.loadJsonFile( 'https:\/\/gist.githubusercontent.com\/shacheeswadia\/eead370d79e0f20df5148b79b6887393\/raw\/fba29e3dcf1806cab770e845546a136a924cf1d5\/dataBubbleMap2.json', function (data) {})<\/code><\/pre>\n
4. Write some charting code<\/h3>\n
The fourth step is for populating the script<\/code> tag in the body<\/code> section of the web page with the code to visualize the JS-based bubble map. Actually, just a few quick lines will be enough!<\/p>\n
All the code is to be wrapped into the anychart.onDocumentReady()<\/code> function so that the page is fully loaded before anything else is executed.<\/p>\n
Inside it, to begin with, I load the data as shown in the 3rd step. Then I create a map chart instance using the built-in function and add the geodata for the United States.<\/p>\n
<script>\r\n\r\n  anychart.onDocumentReady(function() {\r\n    \r\n    \/\/ load the data\r\n    anychart.data.loadJsonFile( 'https:\/\/gist.githubusercontent.com\/shacheeswadia\/eead370d79e0f20df5148b79b6887393\/raw\/fba29e3dcf1806cab770e845546a136a924cf1d5\/dataBubbleMap2.json',\r\n    function (data) {\r\n      \r\n      \/\/ create a map chart\r\n      let map = anychart.map();\r\n\r\n      \/\/ add the u.s. geodata\r\n      map.geoData(\"anychart.maps.united_states_of_america\");\r\n\r\n    });\r\n\r\n  });\r\n<\/script><\/code><\/pre>\n
Since I want to denote the gas prices with bubbles, I create a bubble series and map those values as the size of the bubbles all over the map:<\/p>\n
let series = map.bubble(\r\n  anychart.data.set(data).mapAs({\r\n    size: \"Petrol\"\r\n  })\r\n);<\/code><\/pre>\n
Captions<\/a> are important for better legibility. So I enable the series labels to display the names of the states and add a title.<\/p>\n
\/\/ enable the series labels\r\nseries\r\n  .labels()\r\n  .enabled(true);\r\n      \r\n\/\/ set the map's title\r\nmap.title(\"Gasoline Prices in the United States in July 2022\");<\/code><\/pre>\n
Finally, I reference the HTML block-level element as the container for the map and draw the resulting visualization.<\/p>\n
\/\/ set the container id\r\nmap.container(\"container\");\r\n\r\n\/\/ initiate the map drawing\r\nmap.draw();<\/code><\/pre>\n
There you go! A lovely interactive bubble map is created using JavaScript just like that! You can clearly understand which U.S. states saw the highest gas prices in July 2022.<\/p>\n