{"id":15051,"date":"2022-06-08T09:02:16","date_gmt":"2022-06-08T09:02:16","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=15051"},"modified":"2022-08-13T11:11:50","modified_gmt":"2022-08-13T11:11:50","slug":"treemap-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2022\/06\/08\/treemap-js\/","title":{"rendered":"How to Make Treemap Using JS"},"content":{"rendered":"

\"A<\/a>Treemap visualizations are widely used in hierarchical data analysis. If you need to build one but have never done that before, you might think the process is somewhat complicated. Well, not necessarily. I decided to make a step-by-step tutorial explaining how to create awesome interactive treemap charts with ease using JavaScript. And you\u2019re gonna love the illustrations!<\/p>\n

Are we alone in the universe? A question every one of us has asked ourselves at some point. While we are thinking about the odds of the Earth being the only habitable planet in the universe, or not, one of the things we might consider is how big the universe is. Let\u2019s look at that with the help of treemaps! In this tutorial, we will be visualizing the scale of the 10 largest galaxies in the known universe using the treemapping technique.<\/p>\n

So, would you like to know how to quickly build a JS-based treemap chart? Follow me in this stepwise tutorial and learn in an easy, fun way!<\/p>\n

<\/p>\n

What Is Treemap?<\/h2>\n

Before we get down to the tutorial itself, let\u2019s look at the concept of treemaps. A treemap chart<\/a> is a popular technique for visualizing hierarchically organized, tree-structured data. Designed to show at a glance the structure of hierarchy along with the value of individual data points, it makes use of nested rectangles whose size is proportional to the corresponding quantities.<\/p>\n

Each branch of the tree is a rectangle, and for sub-branches, there are smaller rectangles nested inside them. Displaying data by color and proximity, treemaps can easily represent lots of data while making efficient use of space and are great for comparing proportions within hierarchies.<\/p>\n

The treemap chart type was invented by professor Ben Shneiderman<\/a> who has given significant contributions in the field of information design and human-computer interaction. Treemaps are used in many data visualization areas and can be found applied in the analysis of stock market data, census systems, and election statistics, as well as in data journalism, hard drive exploration tools, etc.<\/p>\n

A Peek at Our JS Treemap Chart<\/h2>\n

So now, we will build a treemap using JavaScript to compare the sizes of the top 10 galaxies in the known universe. Take a look at exactly what we are going to create. This is what our JS treemap chart will look like by the end of the tutorial.<\/p>\n

\"Treemap<\/p>\n

Let\u2019s start our interstellar journey!<\/p>\n

Create a Basic JS Treemap Chart<\/h2>\n

Creating a JavaScript-based treemap chart generally takes four basic steps that are as follows:<\/p>\n

    \n
  1. Create an HTML page<\/li>\n
  2. Reference JavaScript files<\/li>\n
  3. Set data<\/li>\n
  4. Write some JS treemapping code<\/li>\n<\/ol>\n

    And don\u2019t worry if you are a novice in HTML, CSS, and JavaScript. We will go through each and every step in detail, and by the end of this tutorial, you will have your own JS treemap ready.<\/p>\n

    So, the countdown has begun, let\u2019s get our chart ready for launch.<\/p>\n

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

    The first thing we do here is to create a basic HTML page. There, we add an HTML block element (<div><\/code>) \u2014 that\u2019s where our treemap chart will be placed \u2014 and assign it an ID attribute (for example, let it be \u201ccontainer\u201d) to reference it later in the code.<\/p>\n

    We should also set some styling for the\u00a0<div><\/code>. Let\u2019s define the width<\/code> and height<\/code> properties as 100% and margin and padding as 0. You may change this to your liking.<\/p>\n

    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <title>JavaScript Treemap Chart<\/title>\r\n    <style type=\"text\/css\">  \t\r\n      html, body, #container {\r\n        width: 100%;\r\n        height: 100%;\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\"><\/div>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    2. Reference JavaScript Files<\/h3>\n
    Next, we need to reference all the required scripts that will be used to create a treemap chart.<\/p>\n
    There are multiple<\/a> JavaScript charting libraries out there to choose from. The fundamental steps of creating interactive data visualizations remain more or less the same with any of them. Here, for illustration, I am going to use AnyChart<\/a> \u2014 it supports treemaps and has a free version, with the source open on GitHub<\/a>.<\/p>\n
    So, to build a treemap chart, we need the ‘core’ and ‘treemap’ modules<\/a>. Let\u2019s reference both in the head section of the HTML page created in the first step. We will obtain them from the CDN (alternatively, the scripts can be downloaded).<\/p>\n
    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <title>JavaScript Treemap Chart<\/title>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-core.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-treemap.min.js\"><\/script>\r\n    <style type=\"text\/css\">  \t\r\n      html, body, #container {\r\n        width: 100%;\r\n        height: 100%;\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\"><\/div>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    3. Set Data<\/h3>\n
    Here comes the data. We will visualize the scale of the top 10 largest galaxies in the known universe. The galaxies are so incredibly vast that they\u2019re measured by how many light-years across they are. A light-year is the distance a beam of light travels in a single Earth year, which equates to approximately 6 trillion miles.<\/p>\n
    I have already taken the galaxy scale data from Largest.org<\/a>.<\/p>\n
    For our chart, the tree structure data will look as follows. The root-level element is \u2018Galaxies,\u2019 divided (by galaxy type) into ‘Elliptical’ and ‘Spiral’ as its children, which further have arrays of individual galaxy objects as their own children.<\/p>\n
    Each galaxy object is provided with key-value properties of name and scale in light-years. For example, {name: \"IC 1101\", value: 4000000}<\/code> means the IC 1101 galaxy with its scale being 4,000,000 light-years. Honestly, it’s very hard to comprehend how massive it is.<\/p>\n
    var dataSet = [\r\n  {name: \"Galaxies\", children: [\r\n    {name: \"Elliptical\", children: [\r\n      {name: \"IC 1101\", value: 4000000},\r\n      {name: \"Hercules A\", value: 1500000},\r\n      {name: \"A2261-BCG\", value: 1000000},\r\n      {name: \"ESO 306-17\", value: 1000000},\r\n      {name: \"ESO 444-46\", value: 402200},\r\n    ]},\r\n    {name: \"Spiral\", children: [\t\r\n      {name: \"Rubin's Galaxy\", value: 832000},\r\n      {name: \"Comet Galaxy\", value: 600000},\r\n      {name: \"Condor Galaxy\", value: 522000},\r\n      {name: \"Tadpole Galaxy\", value: 280000},\r\n      {name: \"Andromeda Galaxy\", value: 220000} \r\n    ]}\r\n  ]}\r\n];<\/code><\/pre>\n
    4. Write Some JS Treemapping Code<\/h3>\n
    Now, just a few lines of JavaScript code to fuel up our treemap chart.<\/p>\n
    First, we include the anychart.onDocumentReady()<\/code> function, which will enclose all the JavaScript code of the treemap ensuring it will execute when the web page is fully loaded and ready.<\/p>\n
    <script>\r\n  anychart.onDocumentReady(function () {\r\n    \/\/ The JS treemapping code will be written here.\r\n  });\r\n<\/script><\/code><\/pre>\n
    Second, we add the data we want to visualize in a treemap chart, from step 3.<\/p>\n
    <script>\r\n \r\n  anychart.onDocumentReady(function () {\r\n \r\n    var dataSet = [\r\n      {name: \"Galaxies\", children: [\r\n        {name: \"Elliptical\", children: [\r\n          {name: \"IC 1101\", value: 4000000},\r\n          {name: \"Hercules A\", value: 1500000},\r\n          {name: \"A2261-BCG\", value: 1000000},\r\n          {name: \"ESO 306-17\", value: 1000000},\r\n          {name: \"ESO 444-46\", value: 402200},\r\n        ]},\r\n        {name: \"Spiral\", children: [\t\r\n          {name: \"Rubin's Galaxy\", value: 832000},\r\n          {name: \"Comet Galaxy\", value: 600000},\r\n          {name: \"Condor Galaxy\", value: 522000},\r\n          {name: \"Tadpole Galaxy\", value: 280000},\r\n          {name: \"Andromeda Galaxy\", value: 220000} \r\n        ]}\r\n      ]}\r\n    ];\r\n \r\n  });\r\n \r\n<\/script><\/code><\/pre>\n
    Third, we add the following line to create a treemap from the tree data.<\/p>\n
    var chart = anychart.treeMap(dataSet, \"as-tree\");<\/code><\/pre>\n
    Finally, we add a title, put the chart in the previously defined\u00a0<div><\/code>\u00a0container, and display it using the draw<\/code> command.<\/p>\n
    chart.title(\"The 10 Largest Galaxies in the Known Universe\");\r\nchart.container(\"container\");\r\nchart.draw();<\/code><\/pre>\n
    Now our JS treemap is basically ready, and if we stopped at that, it would look something like this:<\/p>\n
    \"Initial<\/p>\n
    There are only two tiles visible immediately as the treemap chart is loaded, \u2018Elliptical\u2019 and \u2018Spiral.\u2019 We can click on those, and they will expand to show their respective children galaxies \u2014 that\u2019s what is called a drill-down<\/a> action.<\/p>\n
    \"Initial<\/p>\n
    Why is this happening, just two tiles? Because by default, the maximum depth value is set as 1. It means we can see only one level with its parent at a time. The lower levels are hidden. On the first level, we have \u2018Galaxies\u2019 being divided into \u2018Elliptical\u2019 and \u2018Spiral,\u2019 so we only see that by default.<\/p>\n
    Now, what do we do to display all the galaxy tiles at once? It’s very simple. We just need to change the maximum depth value using the maxDepth()<\/code> function.<\/p>\n
    chart.maxDepth(2);<\/code><\/pre>\n
    The countdown is over, and our treemap chart is already now!<\/p>\n