{"id":16766,"date":"2023-08-01T12:35:26","date_gmt":"2023-08-01T12:35:26","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=16766"},"modified":"2023-08-10T11:29:29","modified_gmt":"2023-08-10T11:29:29","slug":"bubble-chart-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2023\/08\/01\/bubble-chart-js\/","title":{"rendered":"Building Bubble Chart with JavaScript"},"content":{"rendered":"

\"Bubble<\/a>Do you want to turn that data chaos into a comprehensible data show? Look no further than data visualization<\/a>! And let me tell you, one chart to rule them all is the bubble chart<\/strong>. It's like blowing bubbles at your data and watching them pop into understanding! And the best part? With JavaScript, you can easily create an interactive bubble chart, and I will show you how!<\/p>\n

Bubble charts are versatile data visualizations that display data points in the form of bubbles, where the bubbles' size, color, and position represent different variables. In this tutorial, I'll walk you through building these graphics step by step, making the process a breeze. For illustration, we'll take data on the popularity of various YouTube videos and use JavaScript to create an interactive bubble chart showcasing the top 30 most-liked videos<\/strong> of all time, categorized by year of release, views, and likes.<\/p>\n

By the end of this tutorial, you'll be able to create visually-stunning JS-based bubble charts without any hassle. So let's dive into the world of data bubbles and turn numbers into a visual feast for the eyes!<\/p>\n

<\/p>\n

Bubble Chart That Will Be Created<\/h2>\n

Take a quick look at the JS bubble chart we will build together in this tutorial, and follow along!<\/p>\n

\"JS<\/p>\n

A. Creating a Basic JS Bubble Chart<\/h2>\n

Don't be intimidated if you're new to creating JS charts \u2014 it's easier than you might think! In fact, all you need to do is follow these four steps to make it happen:<\/p>\n

    \n
  1. Create a web page in HTML.<\/li>\n
  2. Include the required JavaScript files.<\/li>\n
  3. Add the data.<\/li>\n
  4. Write some JS charting code.<\/li>\n<\/ol>\n

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

    The first step is a breeze \u2014 just create a basic HTML web page! From there, we'll add a <div><\/code> element and give it a unique ID like "container\u201d to create the space for the bubble chart. To ensure that the graph takes up the entire page, we\u2019ll use CSS code within the <style><\/code> tag to set the width and height to 100%; of course, this can be completely customized to fit your exact needs and preferences.<\/p>\n

    <!DOCTYPE html><\/span>\r\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\r\n<head<\/span>><\/span>\r\n <meta<\/span> charset<\/span>=\"utf-8\"<\/span>><\/span>\r\n <title<\/span>><\/span>JavaScript Bubble Chart<\/title<\/span>><\/span>\r\n <style<\/span> type<\/span>=\"text\/css\"<\/span>><\/span>      \r\n   html<\/span>, body<\/span>, #container<\/span> {\r\n     width<\/span>: 100%<\/span>;\r\n     height<\/span>: 100%<\/span>;\r\n     margin<\/span>: 0<\/span>;\r\n     padding<\/span>: 0<\/span>;\r\n   }\r\n <\/span><\/style<\/span>><\/span>\r\n<\/head<\/span>><\/span>\r\n<body<\/span>><\/span>\r\n <div<\/span> id<\/span>=\"container\"<\/span>><\/span><\/div<\/span>><\/span>\r\n<\/body<\/span>><\/span>\r\n<\/html<\/span>><\/span>\r\n<\/code><\/pre>\n
    2. Include the required JavaScript files<\/h3>\n
    After setting up a basic HTML page, the next step is to include the necessary JavaScript files in the <head><\/code> section. There are numerous charting libraries available. In this tutorial, we'll be using AnyChart<\/a>. This library supports bubble charts and offers comprehensive documentation. But no matter which library you choose, the basic steps for creating a chart are similar.<\/p>\n
    To create a bubble chart, we\u2019ll use the Base<\/a> module. The data will be in a JSON file, so we\u2019ll need the Data Adapter<\/a> module to load it.<\/p>\n
    <!DOCTYPE html><\/span>\r\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\r\n  <head<\/span>><\/span>\r\n    <meta<\/span> charset<\/span>=\"utf-8\"<\/span>><\/span>\r\n    <title<\/span>><\/span>JavaScript Bubble Chart<\/title<\/span>><\/span>\r\n    <script<\/span> src<\/span>=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-base.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n    <script<\/span> src<\/span>=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-data-adapter.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n    <style<\/span> type<\/span>=\"text\/css\"<\/span>><\/span>      \r\n      html<\/span>, body<\/span>, #container<\/span> {\r\n        width<\/span>: 100%<\/span>;\r\n        height<\/span>: 100%<\/span>;\r\n        margin<\/span>: 0<\/span>;\r\n        padding<\/span>: 0<\/span>;\r\n      }\r\n    <\/span><\/style<\/span>><\/span>\r\n  <\/head<\/span>><\/span>\r\n  <body<\/span>><\/span>\r\n    <div<\/span> id<\/span>=\"container\"<\/span>><\/span><\/div<\/span>><\/span>\r\n    <script<\/span>><\/span>\r\n      \/\/ All the code for the bubble chart will come here.<\/span>\r\n    <\/span><\/script<\/span>><\/span>\r\n  <\/body<\/span>><\/span>\r\n<\/html<\/span>><\/span>\r\n<\/code><\/pre>\n
    3. Add the data<\/h3>\n
    I compiled the data about the top 30 most liked YouTube videos from BuzzGuru<\/a> and YouTube<\/a> and saved it in a JSON file, which you can find here<\/a>.<\/p>\n
    Each object in the dataset represents a YouTube video and is to be visualized as a single bubble. The objects have five properties: "x" for the year of upload to YouTube, "value" for the number of YouTube views, "size" for the number of YouTube likes, as well as "title" and "genre".<\/p>\n
    To load the data into a bubble plot, we\u2019ll use the anychart.data.loadJsonFile()<\/code> function.<\/p>\n
    anychart.data.loadJsonFile(\"https:\/\/gist.githubusercontent.com\/awanshrestha\/8df51b9b1c44b2d1bd3ebeb0757b5fb0\/raw\/28ee08902d393e02278a7ef7e3461b33e34c6c90\/Top-liked-YouTube-Videos.json\"<\/span>,\r\nfunction<\/span> (data)<\/span> <\/span>{});\r\n<\/code><\/pre>\n
    You will find out where to put this code in a few moments.<\/p>\n
    4. Write some JS charting code<\/h3>\n
    It\u2019s time for a few lines of JavaScript code that will construct the visualization!<\/p>\n
    To begin, wrap the code in an anychart.onDocumentReady()<\/code> function ensuring that it only executes once the page is fully loaded.<\/p>\n
    <script<\/span>><\/span>\r\n  anychart.onDocumentReady(function<\/span> ()<\/span> <\/span>{\r\n    \/\/ The bubble chart data and code will be in this section.<\/span>\r\n  });\r\n<\/span><\/script<\/span>><\/span>\r\n<\/code><\/pre>\n
    Add the data from Step 3.<\/p>\n
    <script<\/span>><\/span>\r\n  anychart.onDocumentReady(function<\/span> ()<\/span> <\/span>{\r\n    anychart.data.loadJsonFile(\"https:\/\/gist.githubusercontent.com\/awanshrestha\/8df51b9b1c44b2d1bd3ebeb0757b5fb0\/raw\/28ee08902d393e02278a7ef7e3461b33e34c6c90\/Top-liked-YouTube-Videos.json\"<\/span>,\r\n    function<\/span> (data)<\/span> <\/span>{\r\n      \/\/ The upcoming JS code will be here.<\/span>\r\n    });\r\n  });\r\n<\/span><\/script<\/span>><\/span>\r\n<\/code><\/pre>\n
    Pass the data to the anychart.bubble()<\/code> function to create a bubble chart object.<\/p>\n
    chart<\/span> = anychart.bubble(data);<\/span>\r\n<\/code><\/pre>\n
    It's possible to set the minimum and maximum bubble sizes using the minBubblesize()<\/code> and maxBubblesize()<\/code> functions respectively. <\/p>\n
    chart.minBubbleSize(\"3%\"<\/span>);<\/span>\r\nchart.maxBubbleSize(\"12%\"<\/span>);<\/span>\r\n<\/code><\/pre>\n
    Finally, let\u2019s give the bubble chart a title and insert it into the designated <div><\/code> container. Once this is done, we can use the draw()<\/code> function to render the visualization on the web page.<\/p>\n
    chart.title(\"Top 30 Most Liked YouTube Videos\"<\/span>);<\/span>\r\nchart.container(\"container\"<\/span>);<\/span>\r\nchart.draw();<\/span>\r\n<\/code><\/pre>\n
    It's here! Our first JavaScript bubble chart is ready. Its interactive version with the full code can be found on Playground<\/a>. The code is also provided below for your convenience.<\/p>\n