This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

How to Create Circle Packing Chart with JS


A transparent step-by-step information for constructing an interactive JS Circle Packing Chart to visualise the highest 100 most streamed songs on Spotify.

Wish to be taught to visualise hierarchical information in beautiful circle packing charts that may be added to an internet web page or app in a hassle-free method? Don’t really feel overwhelmed and simply comply with my stepwise information visualization tutorial! Utilizing a cool instance of information on the highest 100 most streamed songs on Spotify, I’ll present you simply create and customise a great-looking interactive circle packing chart with JavaScript.



What Is a Circle Packing Chart

Let me begin by supplying you with a short about what a circle packing chart is and the way it’s used.

Also referred to as a round tree, a circle packing chart is principally a treemap showcasing hierarchical information, the place circles denote nodes and sub-nodes are circles contained in the node circle.

The dimensions of the circle denotes the worth of the node.

The round packing illustration denotes hierarchy effectively, offering a handy visible breakdown by teams and subgroups.



Previewing the Circle Packing Chart That Will Be Produced

Check out what I’m going to construct — the ultimate JS circle packing chart that shall be created by the tip of the tutorial — and are available alongside on this musical journey!

The JavaScript-based circle-packing chart built along the tutorial



Constructing a JS Circle Packing Chart in 4 Easy Steps

An embeddable circle packing chart appears to be like thrilling however difficult to create. Nonetheless, there are a lot of JavaScript charting libraries particularly designed to assist everybody construct numerous information visualizations. And when you’ve discovered one which gives a built-in circle packing possibility out of the field, it’s often fairly fast and simple to get such an interactive chart conjured up even in case you are a newbie with (but) restricted coding abilities.

Technically, the steps, which your entire course of of making a circle packing information visualization consists of, stay kind of the identical with any JS charting library. On this tutorial, I shall be utilizing AnyChart for illustration. It’s fairly straightforward to start out off, with detailed documentation and lots of ready-to-use examples that may work as a great start line for shortly constructing a chart of any sort, together with this one. Additionally essential, the library is free for non-commercial use.

So, the essential steps to create a JS Circle Packing Chart quantity 4 and are as follows:

  1. Make an HTML web page for the chart.
  2. Embrace the required JS recordsdata.
  3. Add the information.
  4. Write the required JavaScript code for drawing the chart.



1. Create an HTML web page

The very first thing I do is create a primary HTML web page the place the chart shall be positioned. Subsequent, I create an HTML block factor, div and assign it an ID attribute like “container” to simply determine it later within the code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Circle Packing Chart</title>
    <fashion sort="textual content/css">      
      html, physique, #container { 
        width: 100%; 
        top: 100%; 
        margin: 0; 
        padding: 0; 
      } 
    </fashion>
  </head>
  <physique>
    <div id="container"></div>
  </physique>
</html>
Enter fullscreen mode

Exit fullscreen mode

I outline the styling of the block such that the chart renders over the entire web page by giving the peak and width attributes the worth of 100%. Be happy to specify it the way in which you wish to do your activity, in fact.



2. Embrace the required JavaScript recordsdata

Then, I would like so as to add the scripts I’m going to make use of to create the circle packing chart I wish to develop. It’s often attainable to reference the required recordsdata from the CDN of the library you’re utilizing or obtain them to your native machine.

To create this chart on this tutorial, I’m using the AnyChart library. It has a modular construction that makes it straightforward to solely join the chart sorts and options you require in the mean time, decreasing the scale of the working JavaScript code. On this case, I would like the core module along with the precise circle packing module. So I embody each within the head part of the HTML web page created in step one.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Circle Packing Chart</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-circle-packing.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-data-adapter.min.js"></script>

    <fashion sort="textual content/css">      
      html, physique, #container { 
        width: 100%; top: 100%; margin: 0; padding: 0; 
      } 
    </fashion>
  </head>
  <physique>  
    <div id="container"></div>
    <script>
      // All of the code for the JS Circle Packing Chart shall be right here.
    </script>
  </physique>
</html>
Enter fullscreen mode

Exit fullscreen mode



3. Add the information

I made a decision to visualise the 100 most streamed songs on Spotify utilizing a devoted dataset from Kaggle. I reworked the information slightly bit to make it look the way in which I would like and saved it in a JSON file.

To load the information from the JSON file, I’ll make the most of a useful module known as Data Adapter. So I embody it within the listing of the referenced scripts within the head part and use the anychart.information.loadJsonFile perform so as to add this information file within the code.

Now that each one the preparations are accomplished, let’s get on to the final step for creating this spectacular, interactive, JS-based packed circle chart!



4. Write the JavaScript code in your chart

Some background data of internet growth applied sciences like HTML and JavaScript is all the time a bonus when creating visualizations and writing code that will appear sophisticated. Nonetheless, it may possibly take simply as few as about 6 to 7 strains of code to create a circle packing chart this fashion. So it’s not going to be sophisticated in any respect anyway. Isn’t that music to your ears?

Initially, I add a perform that encloses all of the code, guaranteeing it’s executed as soon as the web page is prepared. Then I embody the information inside this perform.

Now I outline a perform with the information parameter and map the information utilizing the information.tree perform. I add the mapped information to the circlePacking perform.

anychart.onDocumentReady(perform () {
  anychart.information.loadJsonFile('https://gist.githubusercontent.com/shacheeswadia/17dc3b3d4ac9b63ac5ac6833944f3a94/uncooked/07c4bec103d22ec2824453a33d41868fd476db3d/dataPackedCircles.json',
    perform(information) {
      var treeData = anychart.information.tree(information, 'as-table');
      var chart = anychart.circlePacking(treeData);
    }
  );
});
Enter fullscreen mode

Exit fullscreen mode

Lastly, I additionally make a title, add a reference to the beforehand outlined container, and draw the ensuing circle packing chart.

anychart.onDocumentReady(perform () {
  anychart.information.loadJsonFile('https://gist.githubusercontent.com/shacheeswadia/17dc3b3d4ac9b63ac5ac6833944f3a94/uncooked/07c4bec103d22ec2824453a33d41868fd476db3d/dataPackedCircles.json',
    perform(information) {

      // add information
      var treeData = anychart.information.tree(information, 'as-table');

      // create a circle packing chart occasion
      var chart = anychart.circlePacking(treeData);

      // add a chart title
      chart.title("Prime 100 most streamed songs on Spotify by style")

      chart.container('container');
      chart.draw();

    }
  );
});
Enter fullscreen mode

Exit fullscreen mode

Tada! A totally practical circle packing chart is constructed with so little effort!

Basic JavaScript Circle Packing Chart

The pop style is clearly seen as the preferred amongst Spotify’s 100 most streamed songs. I’m extra of a dance style particular person myself, and it’s possible you’ll be a rock or rhythm and blues fan. However unsurprisingly, pop and hip-hop are the particular crowd favorites.

Yow will discover your entire code of this primary JavaScript packed circle chart on CodePen [and on AnyChart Playground.)



Customizing a JS Circle Packing Chart

A. Color modification
B. Title improvement
C. Tooltip formatting

FOR A WALKTHROUGH OF THESE JS STOCK CHART CUSTOMIZATIONS, CONTINUE READING HERE.

MORE JAVASCRIPT CHARTING TUTORIALS ARE AVAILABLE HERE.

The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?