{"id":15629,"date":"2022-09-08T13:50:40","date_gmt":"2022-09-08T13:50:40","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=15629"},"modified":"2022-09-08T16:33:22","modified_gmt":"2022-09-08T16:33:22","slug":"circle-packing-chart","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2022\/09\/08\/circle-packing-chart\/","title":{"rendered":"Creating Circle Packing Chart with JavaScript"},"content":{"rendered":"

\"Circle<\/a>A circle packing chart<\/strong> is a common data visualization technique for representing hierarchically organized data through nested circles. Due to the similarity to a treemap<\/a>, which uses nested rectangles for the same purpose, sometimes it is called a circular treemap. Introduced to data analysis by American mathematician William Thurston<\/a> in 1985, circle packings greatly reveal the hierarchical structure of data.<\/p>\n

I want to show how you can easily build an elegant interactive circle packing chart with the help of JavaScript! In this step-by-step tutorial, we will be representing the world’s 100 wealthiest people in 2022 by country and industry, according to Forbes’ list of billionaires. So, get your packings done and get ready as your brain is going to get slightly richer!<\/p>\n

<\/p>\n

Circle Packing Chart That Will Be Created<\/h2>\n

Let me demonstrate what our JavaScript circle packing chart will look like when finished. And it will be interactive! Once you complete this tutorial, you will be fully capable of quickly visualizing your own data in your own circle packing chart.<\/p>\n

\"JavaScript<\/p>\n

Now, let\u2019s proceed to make it!<\/p>\n

Basic Circle Packing Chart with JavaScript<\/h2>\n

Even though it isn’t required, having some prior knowledge of HTML, CSS, and JavaScript would make it especially easier to grasp the concepts. However, even if you are a total newbie, there is no need to panic. By the time we are done, you will have learned how to make a circle packing chart by yourself as we will go over each step in depth.<\/p>\n

Any JavaScript chart, including our circle packing diagram, can be created in four general steps:<\/p>\n

    \n
  1. Prepare a web page.<\/li>\n
  2. Include all necessary JS files.<\/li>\n
  3. Load your data.<\/li>\n
  4. Write some JavaScript charting code.<\/li>\n<\/ol>\n

    Let’s explore these steps in more detail to prepare an amazing interactive JS-based circle packing chart.<\/p>\n

    1. Prepare a web page<\/h3>\n

    First of all, we need a place for the circle packing chart.<\/p>\n

    Build a web page if you don\u2019t have it yet. There, create a container for the plot by adding an HTML block element with a unique ID. Also, specify some CSS rules for this element to define how the chart should be displayed.<\/p>\n

    Here\u2019s how my HTML page looks:<\/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>Circle Packing Chart in JavaScript<\/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
    In my example, the block element is <div><\/code>. Its ID is container<\/code>. The width<\/code> and height<\/code> properties are set to 100%, while margin<\/code> and padding<\/code> are set to 0, which will make the circle packing chart appear throughout the entire page; but you are welcome to define all that however you see fit in your situation.<\/p>\n
    2. Include all necessary JS files<\/h3>\n
    Next, we need all necessary JavaScript files to be referenced in the <head><\/code> section.<\/p>\n
    When you utilize the right data visualization tool<\/a>, creating a circle packing chart won’t be as difficult or time-consuming as it might be. For this tutorial, I\u2019ve chosen to use AnyChart JS Charts<\/a>. It is one of a few JavaScript charting libraries that support circle packing charts out of the box and is beginner-friendly because it offers a ton of examples<\/a> that are ready to use and has thorough documentation<\/a>.<\/p>\n
    For adding the required JavaScript files, we have two options: download them locally or use them from a content delivery network (CDN). Let\u2019s opt for the second one. Add the Core<\/a> and Circle Packing<\/a> scripts for charting. Plus, if you are going to visualize data from a file, like me in this case, include the Data Adapter<\/a> module to facilitate the data loading. The JS code itself will be put in the <script><\/code> tag in the <body><\/code> section (it can be set up in the <head><\/code> section, alternatively).<\/p>\n
    Here\u2019s a look at my current HTML page:<\/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>Circle Packing Chart in JavaScript<\/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\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\u00a0\u00a0<script>\r\n      \/\/ The JS Circle Packing Chart\u2019s code will be written here.\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    3. Load your data<\/h3>\n
    Now it\u2019s time to add data.<\/p>\n
    I want to visualize data from Forbes\u2019 ranking of the richest people, Forbes Billionaires 2022<\/a>, which includes information on their net worth, countries, sources of wealth, and industries. I have already taken the data from the above link on the 100 wealthiest of them and saved it in a JSON file<\/a>. (Feel free to use other supported data formats<\/a>, just make sure the way the data is set conforms to the data instructions for circle packing charts<\/a>.)<\/p>\n
    To appropriately load the data, get ready to use the anychart.data.loadJsonFile()<\/code> function. Like this:<\/p>\n
    anychart.data.loadJsonFile('https:\/\/gist.githubusercontent.com\/awanshrestha\/ff3ae5c08238b1f4f950f022aaad2f6f\/raw\/3766915befaeea7a32f3d41fdc2ece110e7543d7\/circle-packing-chart.json');\r\n<\/code><\/pre>\n
    Now, only a few lines of JavaScript code remain to complete the circle packing chart!<\/p>\n
    4. Write some JavaScript charting code<\/h3>\n
    Finally, we need some JavaScript code to create the circle packing chart.<\/p>\n
    Add the anychart.onDocumentReady()<\/code> function, which will include the entire chart’s JS code. It makes sure that the code won’t run until the page has completely loaded.<\/p>\n
    <script>\r\n\u00a0\u00a0\u00a0anychart.onDocumentReady(function () {\r\n  \u00a0\u00a0\u00a0\/\/ The JS Circle Packing Chart's code will be written here.\r\n<\/script>\r\n<\/code><\/pre>\n
    Load the JSON data file as shown in Step 3 and add the data.<\/p>\n
    <script>\r\n \r\n  anychart.onDocumentReady(function () {\r\n  \r\n  \u00a0\u00a0\/\/ load a json data file\r\nanychart.data.loadJsonFile('https:\/\/gist.githubusercontent.com\/awanshrestha\/ff3ae5c08238b1f4f950f022aaad2f6f\/raw\/3766915befaeea7a32f3d41fdc2ece110e7543d7\/circle-packing-chart.json',\r\n\u00a0\u00a0\u00a0\u00a0  function(data) {\r\n \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0  \/\/ add the data\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0  var treeData = anychart.data.tree(data, 'as-table');\r\n \r\n\u00a0\u00a0\u00a0\u00a0  }\r\n\u00a0\u00a0  );\r\n\r\n});\r\n\r\n<\/script><\/code><\/pre>\n
    Use the circlePacking()<\/code> function to create a circle packing chart instance, passing the data set into it.<\/p>\n
    \/\/ create a circle packing chart instance\r\nvar chart = anychart.circlePacking(treeData);<\/code><\/pre>\n
    Lastly, give the chart a title, place it in the container that was previously specified, and display it by using the draw()<\/code> command.<\/p>\n
    \/\/ add a chart title\r\nchart.title(\"Forbes Top 100 Richest people\");\r\n\/\/ specify the container element id\r\nchart.container('container')\r\n\/\/ initiate the drawing of the chart\r\nchart.draw();<\/code><\/pre>\n
    Tada! The JavaScript-based circle packing chart is ready!<\/p>\n