{"id":9708,"date":"2020-03-03T07:35:43","date_gmt":"2020-03-03T07:35:43","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=9708"},"modified":"2022-08-13T10:58:14","modified_gmt":"2022-08-13T10:58:14","slug":"bubble-chart-javascript-tutorial","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2020\/03\/03\/bubble-chart-javascript-tutorial\/","title":{"rendered":"How to Create JavaScript Bubble Chart \u2014 Tutorial for Web Developers"},"content":{"rendered":"

\"MakingHave you ever wanted to create a bubble chart using JavaScript but did not know how? Then this tutorial is for you! Carry on reading to learn more about bubble charts and how we can build them quickly and painlessly.<\/p>\n

Bubble charts<\/a> are an extension of the scatter plot<\/a>. Most commonly, they display\u00a0three variables which are expressed as the horizontal distance of the point (x), the vertical distance of the point (y), and the size of the point (z). A bubble chart is a great visualization technique to let users compare data points. When designed well, it can be really eye-catching and engaging.<\/p>\n

In this tutorial, I will teach you how to build your very own interactive JS bubble chart and bring it to life through customization. All examples will be available with the full code.<\/p>\n

For this “getting started” guide, I have decided to explore the data of the top 30 grossing movies. Let’s look at the amount of money each movie has grossed, the budget, as well as the year of release. A bubble chart is a particularly good choice for the visualization of this dataset as it will allow us to easily compare these three numeric variables in an interesting and beautiful way.<\/p>\n

<\/p>\n

Bubble Chart to Be Created<\/h2>\n

\"Demo<\/a><\/p>\n

Building JavaScript Bubble Chart<\/h2>\n

Building a JavaScript bubble chart can be done by following these\u00a0four easy steps:<\/p>\n

    \n
  1. Create an HTML page.<\/li>\n
  2. Add the necessary scripts.<\/li>\n
  3. Load the data that will be visualized.<\/li>\n
  4. Draw the chart.<\/li>\n<\/ol>\n

    1. Create an HTML page<\/h3>\n

    The first thing we need to do is set up an HTML page as well as add an HTML container to host our data visualization. This is done as follows:<\/p>\n

    <!DOCTYPE html>\r\n<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Bubble Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<style>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0#container {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 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\u00a0\u00a0\/\/ chart code goes here\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
    There are two things I would like to highlight here. First and most important, there is a div<\/code> element that I have named container<\/code>. This is a block level element in which we will be drawing our chart.<\/p>\n
    Second, I have written CSS rules to manage the appearance of our container element. These particular rules will ensure that our JavaScript-based bubble chart occupies the entire page.<\/p>\n
    2. Add the necessary scripts<\/h3>\n
    The second item on\u00a0the list is adding the necessary scripts.<\/p>\n
    We will be\u00a0using the AnyChart JS Charts<\/a>\u00a0library which will allow us to build our visualizations quickly and easily.\u00a0It is a lightweight, strong, and flexible charting solution, free for non-profit use.<\/p>\n
    In order to use AnyChart, we need to reference its base script. As we will be loading our data from an external JSON source, we\u00a0should also reference AnyChart’s data adapter script.<\/p>\n
    <script src=\"https:\/\/cdn.anychart.com\/releases\/v8\/js\/anychart-base.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.anychart.com\/releases\/v8\/js\/anychart-data-adapter.min.js\"><\/script>\r\n<\/code><\/pre>\n
    3. Load the data we are going to be visualizing<\/h3>\n
    We will be visualizing data from\u00a0the\u00a0IMDb movie data set<\/a>\u00a0available\u00a0on\u00a0Kaggle.com. Kaggle has a number of user-provided datasets covering a wide range of applications. For convenience,\u00a0I have already pre-processed the data by dropping unused variables as well as renaming the ones we will be using to\u00a0make them\u00a0recognized by AnyChart. In particular, I\u00a0have renamed the release year as x<\/code>, the budget as value<\/code> and the amount grossed as size<\/code>. The data is available as a JSON file which can be found here<\/a>.<\/p>\n
    Uploading and using this data could be tricky. But AnyChart’s library provides a number of solutions for working with data<\/a>\u00a0\u2014 JSON, CSV, and even Google Sheets, and more.<\/p>\n
    In our situation, we need to use the following code to load the data:<\/p>\n
    anychart.data.loadJsonFile('data.json', function (data) {\r\n\u00a0\u00a0\/\/ chart code goes here\r\n})<\/code><\/pre>\n
    The code for drawing our chart will be placed within the data loading function. This will ensure that our chart is only drawn once the data is loaded.<\/p>\n
    So far, with everything included, we have the following:<\/p>\n
    <!DOCTYPE html>\r\n<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Bubble Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<style>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0#container {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/v8\/js\/anychart-base.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/v8\/js\/anychart-data-adapter.min.js\"><\/script>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>\r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\" style=\"width: 100%; height: 100%\"><\/div>\r\n\u00a0\u00a0\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0anychart.data.loadJsonFile('data.json', function (data) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ chart code goes here\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    4. Draw the chart<\/h3>\n
    Finally, we get to drawing our chart.<\/p>\n
    The whole chart code must be written within the anychart.onDocumentReady()<\/code> function. This function is executed when\u00a0the page is loaded.<\/p>\n
    anychart.onDocumentReady(function() {\r\n\r\n\u00a0\u00a0\/\/ load data\r\n\u00a0\u00a0anychart.data.loadJsonFile('data.json', function (data) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\/\/ create a chart\r\n\u00a0\u00a0\u00a0\u00a0chart = anychart.bubble(data);\r\n\u00a0\u00a0\u00a0\u00a0\/\/ set a chart title\r\n\u00a0\u00a0\u00a0\u00a0chart.title(\"Top 30 Grossing Movies\");\r\n\u00a0\u00a0\u00a0\u00a0\/\/ set titles for axes\r\n\u00a0\u00a0\u00a0\u00a0chart.xAxis().title(\"Years\");\r\n\u00a0\u00a0\u00a0\u00a0chart.yAxis().title(\"Budget\");\r\n\u00a0\u00a0\u00a0\u00a0\/\/ draw the chart\r\n\u00a0\u00a0\u00a0\u00a0chart.container(\"container\").draw();\r\n\r\n\u00a0\u00a0})\r\n\r\n});<\/code><\/pre>\n
    And this is the result<\/a>:<\/p>\n