{"id":14464,"date":"2022-03-15T20:37:23","date_gmt":"2022-03-15T20:37:23","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=14464"},"modified":"2022-08-13T11:10:32","modified_gmt":"2022-08-13T11:10:32","slug":"circle-packing-chart-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2022\/03\/15\/circle-packing-chart-js\/","title":{"rendered":"How to Build Circle Packing Chart in JavaScript"},"content":{"rendered":"

\"Circle<\/a>A clear step-by-step guide for building an interactive JS Circle Packing Chart to visualize the top 100 most streamed songs on Spotify.<\/em><\/strong><\/span><\/p>\n

Want to learn to visualize hierarchical data in stunning circle packing charts that can be added to a web page or app in a hassle-free manner? Don\u2019t feel overwhelmed and just follow my stepwise data visualization tutorial! Using a cool example of data on the top 100 most streamed songs on Spotify, I will show you how to easily create and customize a great-looking interactive circle packing chart with JavaScript.<\/p>\n

<\/p>\n

What Is a Circle Packing Chart<\/h2>\n

Let me start by giving you a brief about what a circle packing chart is and how it is used.<\/p>\n

Also known as a circular tree, a circle packing chart is basically a treemap showcasing hierarchical data, where circles denote nodes and sub-nodes are circles inside the node circle.<\/p>\n

The size of the circle denotes the value of the node.<\/p>\n

The circular packing representation denotes hierarchy well, providing a convenient visual breakdown by groups and subgroups.<\/p>\n

Previewing the Circle Packing Chart That Will Be Produced<\/h2>\n

Take a look at what I am going to build \u2014 the final JS circle packing chart that will be created by the end of the tutorial \u2014 and come along on this musical ride!<\/p>\n

\"The<\/p>\n

Building a JS Circle Packing Chart in 4 Simple Steps<\/h2>\n

An embeddable circle packing chart looks exciting but challenging to create. However, there are many JavaScript charting libraries<\/a> specifically designed to help everyone build various data visualizations. And once you\u2019ve found one which provides a built-in circle packing option out of the box, it is usually pretty quick and straightforward to get such an interactive chart conjured up even if you are a beginner with (yet) limited coding skills.<\/p>\n

Technically, the steps, which the entire process of creating a circle packing data visualization consists of, remain more or less the same with any JS charting library. In this tutorial, I will be using AnyChart<\/a> for illustration. It is pretty easy to start off, with detailed documentation<\/a> and many ready-to-use examples<\/a> that can work as a good starting point for quickly building a chart of any type, including this one. Also important, the library is free for non-commercial use.<\/p>\n

So, the basic steps to create a JS Circle Packing Chart number four and are as follows:<\/p>\n

    \n
  1. Make an HTML page for the chart.<\/li>\n
  2. Include the necessary JS files.<\/li>\n
  3. Add the data.<\/li>\n
  4. Write the required JavaScript code for drawing the chart.<\/li>\n<\/ol>\n

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

    The first thing I do is create a basic HTML page where the chart will be placed. Next, I create an HTML block element, div<\/code> and assign it an ID attribute like \u201ccontainer\u201d to easily identify it later in the code.<\/p>\n

    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"utf-8\">\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Circle Packing Chart<\/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%; \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<\/body>\r\n<\/html><\/code><\/pre>\n
    I define the styling of the block such that the chart renders over the whole page by giving the height and width attributes the value of 100%. Feel free to specify it the way you want to do your task, of course.<\/p>\n
    2. Include the necessary JavaScript files<\/h3>\n
    Then, I need to add the scripts I am going to use to create the circle packing chart I want to develop. It is usually possible to reference the necessary files from the CDN of the library you are using or download them to your local machine.<\/p>\n
    To create this chart in this tutorial, I am employing the AnyChart library. It has a modular structure that makes it easy to only connect the chart types and features you require at the moment, reducing the size of the running JavaScript code. In this case, I need the core<\/a> module together with the specific circle packing<\/a> module. So I include both in the head<\/code> section of the HTML page created in the first step.<\/p>\n
    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"utf-8\">\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Circle Packing Chart<\/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-circle-packing.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-data-adapter.min.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\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\/\/ All the code for the JS Circle Packing Chart will be here.\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    3. Add the data<\/h3>\n
    I decided to visualize the 100 most streamed songs on Spotify using a dedicated dataset from Kaggle<\/a>. I reworked the data a little bit to make it look the way I need and saved it in a JSON file<\/a>.<\/p>\n
    To load the data from the JSON file, I will utilize a handy module called Data Adapter<\/a>. So I include it in the list of the referenced scripts in the head<\/code> section and use the anychart.data.loadJsonFile<\/code> function to add this data file in the code.<\/p>\n
    Now that all the preparations are done, let\u2019s get on to the last step for creating this impressive, interactive, JS-based packed circle chart!<\/p>\n
    4. Write the JavaScript code for your chart<\/h3>\n
    Some background knowledge of web development technologies like HTML and JavaScript is always an advantage when creating visualizations and writing code that may seem complicated. However, it can take just as few as about 6 to 7 lines of code to create a circle packing chart this way. So it is not going to be complicated at all anyway. Isn\u2019t that music to your ears?<\/p>\n
    Initially, I add a function that encloses all the code, ensuring it is executed once the page is ready. Then I include the data inside this function.<\/p>\n
    Now I define a function with the data parameter and map the data using the data.tree<\/code> function. I add the mapped data to the circlePacking<\/code> function.<\/p>\n
    anychart.onDocumentReady(function () {\r\n  anychart.data.loadJsonFile('https:\/\/gist.githubusercontent.com\/shacheeswadia\/17dc3b3d4ac9b63ac5ac6833944f3a94\/raw\/07c4bec103d22ec2824453a33d41868fd476db3d\/dataPackedCircles.json',\r\n    function(data) {\r\n      var treeData = anychart.data.tree(data, 'as-table');\r\n      var chart = anychart.circlePacking(treeData);\r\n    }\r\n  );\r\n});<\/code><\/pre>\n
    Finally, I also make a title, add a reference to the previously defined container, and draw the resulting circle packing chart.<\/p>\n
    anychart.onDocumentReady(function () {\r\n  anychart.data.loadJsonFile('https:\/\/gist.githubusercontent.com\/shacheeswadia\/17dc3b3d4ac9b63ac5ac6833944f3a94\/raw\/07c4bec103d22ec2824453a33d41868fd476db3d\/dataPackedCircles.json',\r\n    function(data) {\r\n\r\n      \/\/ add data\r\n      var treeData = anychart.data.tree(data, 'as-table');\r\n\r\n      \/\/ create a circle packing chart instance\r\n      var chart = anychart.circlePacking(treeData);\r\n    \r\n      \/\/ add a chart title\r\n      chart.title(\"Top 100 most streamed songs on Spotify by genre\")\r\n      \r\n      chart.container('container');\r\n      chart.draw();\r\n    \r\n    }\r\n  );\r\n});<\/code><\/pre>\n
    Tada! A fully functional circle packing chart is built with so little effort!<\/p>\n