{"id":12578,"date":"2021-04-20T11:10:04","date_gmt":"2021-04-20T11:10:04","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=12578"},"modified":"2022-08-13T11:04:54","modified_gmt":"2022-08-13T11:04:54","slug":"js-dot-density-map","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2021\/04\/20\/js-dot-density-map\/","title":{"rendered":"Making JS Dot Density Map to Visualize Shipping Ports Across Globe"},"content":{"rendered":"

\"An<\/a>The recent incident of the Suez Canal blockage<\/a> caught my interest in shipping and prompted me to explore the various shipping ports around the globe. There are more than 850 ports in the world and to get an overall view of where these are located, I decided to\u00a0plot them on\u00a0a dot map<\/a>, or dot density map, using\u00a0JavaScript.<\/p>\n

Building an interactive JS dot density map\u00a0can seem like a daunting task. But let me assure you that it\u00a0can be pretty straightforward. Right now, I will show\u00a0how to make a fully functional dot map chart using a JavaScript library for data visualization.<\/p>\n

<\/p>\n

JavaScript Charting Libraries<\/h2>\n

There are some great JavaScript charting libraries<\/a> available to use with each one of them having its advantages and disadvantages. The good part with using JS libraries is that the logic of the chart creation process with all of them is quite similar. So, you can learn the basics with one and then extrapolate your learnings to use the library that suits your project’s requirements.<\/p>\n

For this tutorial, I have decided to use AnyChart JS Charts<\/a>\u00a0library\u00a0to create the dot density map. I think it is a great choice for beginners because AnyChart is easy to use yet flexible with extensive documentation<\/a> and loads of examples<\/a>.<\/p>\n

Building Dot Density Map with JavaScript<\/h2>\n

Whether it’s a dot density map or any other map or chart,\u00a0when it comes to JavaScript charting there are four basic steps that are generally needed to make a data visualization of almost any type:<\/p>\n

    \n
  1. Create the HTML page where the chart will be displayed.<\/li>\n
  2. Include all 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

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

    The first step is to create a blank HTML page to hold the dot map chart. I add a div element with a unique id that I will use to reference it later.<\/p>\n

    Note that you can specify the width and height parameters inside the <style><\/code> block to modify the space that your\u00a0visualization\u00a0will occupy. I have put 100% in both parameters so\u00a0my dot density map will fill the whole page.<\/p>\n

    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Dot 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  width: 100%;\r\n        height: 100%;\r\n        margin: 0;\r\n        padding: 0; \r\n\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>\r\n<\/code><\/pre>\n
    2. Include the required scripts<\/h3>\n
    The next step is to link the appropriate JS scripts that will be used to create the dot map. Since I am using the AnyChart library, I will reference the corresponding files. For my map, I need to add AnyChart\u2019s\u00a0Core and Geo Maps modules<\/a>. I also need to include the file that has the geodata for the world map which is also available in the library\u2019s CDN<\/a>.<\/p>\n
    All these script files need to be included in the <head><\/code> section of the HTML page.<\/p>\n
    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Dot Map<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-core.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-map.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/geodata\/latest\/custom\/world\/world.js\"><\/script>\r\n\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  width: 100%;\r\n        height: 100%;\r\n        margin: 0;\r\n        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\/\/ All the code for the JS dot density map will come here.\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
    3. Connect the data<\/h3>\n
    I downloaded the shipping port data from The World Bank Data Catalog<\/a>.<\/p>\n
    The AnyChart library supports many data formats<\/a>, including CSV, JSON, and XML. My file is JSON which you can download here<\/a>.<\/p>\n
    Before we start using the data, I include\u00a0two more script files on the HTML page. To handle the loading of the data file, I add the Data Adapter<\/a>\u00a0module. Since I am creating a map, I will make use of another JavaScript library\u00a0\u2014 Proj4js<\/a> \u2014 which transforms point coordinates from one coordinate system to another. In simple terms, it will take care of plotting the dots over the respective geographical areas.<\/p>\n
    I then use the loadJsonFile<\/code> method inside the <script><\/code> tag in the body of the HTML page to load the JSON file.<\/p>\n
    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Dot Map<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-base.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-map.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/geodata\/latest\/custom\/world\/world.js\"><\/script>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-data-adapter.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/proj4js\/2.3.15\/proj4.js\"><\/script>\r\n\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  width: 100%;\r\n        height: 100%;\r\n        margin: 0;\r\n        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   anychart.data.loadJsonFile('https:\/\/gist.githubusercontent.com\/shacheeswadia\/47b28a4d061e415555f01f5ce48e9ae3\/raw\/0f7592a8048872db7b77ccd2df8907e61952a806\/shippingDataInverted.json', function (data) {})\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
    So, now that the package is all ready, it is time to ship it!<\/p>\n
    4. Add the code to draw the dot density map<\/h3>\n
    The best part of using JS charting libraries is that the amount of code to write is really limited. I am not exaggerating when I say that the dot density map will be built in just 10 lines of code.<\/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. After the data is loaded, as we saw in the earlier step, I create the map and set the geodata. I also add a title to the map.<\/p>\n
    <script>\r\n\u00a0\u00a0anychart.onDocumentReady(function() {\r\n\u00a0\u00a0\u00a0\u00a0anychart.data.loadJsonFile('https:\/\/gist.githubusercontent.com\/shacheeswadia\/47b28a4d061e415555f01f5ce48e9ae3\/raw\/0f7592a8048872db7b77ccd2df8907e61952a806\/shippingDataInverted.json',\r\n\u00a0\u00a0\u00a0\u00a0function (data) {\r\n      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ set the map chart\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var map = anychart.map();\r\n      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ set the global geodata\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0map.geoData('anychart.maps.world');\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ set the map title\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0map.title( 'Shipping ports across the globe');\r\n\t\r\n\u00a0\u00a0\u00a0\u00a0});\r\n\u00a0\u00a0});\r\n<\/script>\r\n<\/code><\/pre>\n
    Next, I create a series that will mark the seaports on the map as dots. Each point displays a latitude and longitude label by default which I don\u2019t want so I disable the labels for the series.<\/p>\n
    \/\/ set the marker series\r\nvar series = map.marker(anychart.data.set(data));   \r\n  \r\n\/\/ disable labels to not show latitude and longitude for each point\r\nseries.labels(false);<\/code><\/pre>\n
    The final\u00a0two lines of code are setting the container to reference the previously added HTML block element and drawing the map.<\/p>\n
    \/\/ set the containter\r\nmap.container('container');\r\n\r\n\/\/ draw the map\r\nmap.draw();<\/code><\/pre>\n
    That\u2019s it \u2014 a fully functional interactive dot density map is delivered!<\/p>\n