Do you want to turn that data chaos into a comprehensible data show? Look no further than data visualization! And let me tell you, one chart to rule them all is the bubble chart. 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!
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 of all time, categorized by year of release, views, and likes.
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!
Bubble Chart That Will Be Created
Take a quick look at the JS bubble chart we will build together in this tutorial, and follow along!
A. Creating a Basic JS Bubble Chart
Don't be intimidated if you're new to creating JS charts — it's easier than you might think! In fact, all you need to do is follow these four steps to make it happen:
- Create a web page in HTML.
- Include the required JavaScript files.
- Add the data.
- Write some JS charting code
1. Create a web page in HTML
The first step is a breeze — just create a basic HTML web page! From there, we'll add a <div> element and give it a unique ID like "container” to create the space for the bubble chart. To ensure that the graph takes up the entire page, we’ll use CSS code within the <style> tag to set the width and height to 100%; of course, this can be completely customized to fit your exact needs and preferences.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Bubble Chart</title>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
2. Include the required JavaScript files
After setting up a basic HTML page, the next step is to include the necessary JavaScript files in the <head> section. There are numerous charting libraries available. In this tutorial, we'll be using AnyChart. 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.
To create a bubble chart, we’ll use the Base module. The data will be in a JSON file, so we’ll need the Data Adapter module to load it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Bubble Chart</title>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// All the code for the bubble chart will come here.
</script>
</body>
</html>
3. Add the data
I compiled the data about the top 30 most liked YouTube videos from BuzzGuru and YouTube and saved it in a JSON file, which you can find here.
In each object in the dataset represents a YouTube video and is to be visualized as one 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".
To load the data into a bubble plot, we’ll use the anychart.data.loadJsonFile() function.
anychart.data.loadJsonFile("https://gist.githubusercontent.com/awanshrestha/8df51b9b1c44b2d1bd3ebeb0757b5fb0/raw/28ee08902d393e02278a7ef7e3461b33e34c6c90/Top-liked-YouTube-Videos.json",
function (data) {});
You will find out where to put this code in a few moments.
4. Write some JS charting code
It’s time for a few lines of JavaScript code that will construct the visualization!
To begin, wrap the code in an anychart.onDocumentReady() function ensures that it only executes once the page is fully loaded.
<script>
anychart.onDocumentReady(function () {
// The bubble chart data and code will be in this section.
});
</script>
Add the data from Step 3.
<script>
anychart.onDocumentReady(function () {
anychart.data.loadJsonFile("https://gist.githubusercontent.com/awanshrestha/8df51b9b1c44b2d1bd3ebeb0757b5fb0/raw/28ee08902d393e02278a7ef7e3461b33e34c6c90/Top-liked-YouTube-Videos.json",
function (data) {
// The upcoming JS code will be here.
});
});
</script>
Pass the data to the anychart.bubble() function to create a bubble chart object.
chart = anychart.bubble(data);
It's possible to set the minimum and maximum bubble size using the minBubblesize() and maxBubblesize() functions respectively.
chart.minBubbleSize("3%");
chart.maxBubbleSize("12%");
Finally, let’s give the bubble chart a title and insert it into the designated <div> container. Once this is done, we can use the draw() function to render the visualization on the web page.
chart.title("Top 30 Most Liked YouTube Videos");
chart.container("container");
chart.draw();
It's here! Our first JavaScript bubble chart is ready. Its interactive version with the full code can be found on Playground. The code is also provided below for your convenience.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Bubble Chart</title>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function() {
// load data
anychart.data.loadJsonFile("https://gist.githubusercontent.com/awanshrestha/8df51b9b1c44b2d1bd3ebeb0757b5fb0/raw/28ee08902d393e02278a7ef7e3461b33e34c6c90/Top-liked-YouTube-Videos.json",
function (data) {
// create a bubble chart
chart = anychart.bubble(data);
// set the minimum and maximum bubble sizes
chart.minBubbleSize("3%");
chart.maxBubbleSize("12%");
// add a chart title
chart.title("Top 30 Most Liked YouTube Videos");
// set the container
chart.container("container");
// initiate the chart drawing
chart.draw();
})
});
</script>
</body>
</html>
B. Customizing JS Bubble Chart
Let's take our JavaScript bubble chart to the next level by adding some exciting customizations that will make it look even more visually appealing! We can transform our chart from good to great with just a few tweaks. Let's do it!
- Name the axes
- Arrange the ticks
- Enable the grid
- Paint the bubbles by genre
- Prevent clipping
- Add the legend
- Enhance the tooltip
FOR A WALKTHROUGH OF THESE JS BUBBLE CHART CUSTOMIZATIONS, CONTINUE READING THE TUTORIAL HERE.
Top comments (0)