{"id":8275,"date":"2019-08-01T12:21:08","date_gmt":"2019-08-01T12:21:08","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=8275"},"modified":"2022-08-13T10:57:41","modified_gmt":"2022-08-13T10:57:41","slug":"treemap-chart-create-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2019\/08\/01\/treemap-chart-create-javascript\/","title":{"rendered":"Creating Treemap Chart Using JavaScript"},"content":{"rendered":"

\"CreatingTreemap<\/a> is a popular chart type for hierarchical data visualization. I\u2019ll show you how to create a cool interactive treemap chart using JavaScript in four simple steps right now. Join me on this quick tutorial for front-end web developers and data viz enthusiasts to understand the core principles of the process. Basically, I am sure everyone at least a little familiar with coding in HTML5 will love the presented, easy way to make beautiful JavaScript treemap charts that are perfectly suitable to be embedded into any web page or app.<\/p>\n

In honor of World Wide Web Day celebrated today, August 1, I will develop a JS treemap visualizing data about the number of worldwide internet users as of January 2019, by region, available on Statista<\/a>.<\/p>\n

<\/p>\n

How to Create JavaScript Treemap Chart<\/h2>\n

To start with, here’s a basic thing you should clearly understand and remember. When it comes to data visualization using JavaScript, charting generally takes four main steps:<\/p>\n

    \n
  1. First, create an HTML page with a container for a chart.<\/li>\n
  2. Second, connect all the scripts you need.<\/li>\n
  3. Third, load the data you need to visualize.<\/li>\n
  4. Finally, write the JS chart code.<\/li>\n<\/ol>\n

    Now, let’s delve into each of these steps for streamlined, first-class JavaScript charting and build an awesome treemap.<\/p>\n

    Step 1: Create an HTML page<\/h3>\n

    Before you actually begin to draw a treemap chart, create an HTML page on which your visualization will be placed.<\/p>\n

    Below is a very basic example of how it can look.<\/p>\n

    <!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <title>My First JavaScript Treemap Chart<\/title>\r\n    <style>\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
    The most important part here is, I’ve created a chart container in the <head><\/code> section of the HTML code. It is a block-level HTML element in which the chart will be drawn. You are welcome to configure the chart container parameters in the <style><\/code> script added to the <head><\/code> section to your liking. I want my treemap to occupy the entire page, so I’ve specified 100% in the width and height fields to make it happen just like that.<\/p>\n
    You see I’ve also added a relevant web page title right away: “My First JavaScript Treemap Chart.”<\/p>\n
    Step 2: Connect scripts<\/h3>\n
    Next, connect all the scripts that are necessary to create a treemap chart you want to get.<\/p>\n
    I am using the JavaScript charts library<\/a> by AnyChart, which is a powerful, flexible solution with comprehensive API reference<\/a> and documentation<\/a>, free for non-profit use. It features a modular system that allows me to connect only those chart types and features I actually need, which helps to reduce the size of my JavaScript and speed up everything.<\/p>\n
    To represent data on a treemap chart, the core and treemap modules are required. So I reference them in the <head><\/code> section, in separate <script><\/code> tags:<\/p>\n
    <script>https:\/\/cdn.anychart.com\/releases\/v8\/js\/anychart-core.min.js<\/script>\r\n<script>https:\/\/cdn.anychart.com\/releases\/v8\/js\/anychart-treemap.min.js<\/script><\/code><\/pre>\n
    If you prefer to launch these scripts locally instead of making use of the AnyChart CDN<\/a>, you can download<\/a> them into a folder on your website and use your own URLs.<\/p>\n
    AnyChart has no dependencies, so there is no need to connect anything else.<\/p>\n
    The treemap chart’s JavaScript code will be written in the <script><\/code> tag inserted in the <body><\/code> section.<\/p>\n
    Check out how the code framework looks as of now:<\/p>\n
    <!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <title>My First JavaScript Treemap Chart<\/title>\r\n      <script>https:\/\/cdn.anychart.com\/releases\/v8\/js\/anychart-core.min.js<\/script>\r\n      <script>https:\/\/cdn.anychart.com\/releases\/v8\/js\/anychart-treemap.min.js<\/script>\r\n      <style>\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    <script>\r\n\t<!-- The treemap chart code will be written here -->\r\n    <\/script>\r\n  <\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
    Step 3: Load data<\/h3>\n
    Now that we’ve prepared a place for the treemap graph visualization (step 1) and referenced the JS charting library scripts (step 2), all is set to get to the essence \u2014 load data (step 3) and actually plot it on a treemap (step 4).<\/p>\n
    The AnyChart JS library allows web developers to choose from a range of ways to work with data. To create treemap charts, it is necessary to apply the tree data model, organizing data as a tree, as a table, or as a CSV string.<\/p>\n
    In this case, I\u2019ve decided to organize data as a tree, with every parent item provided with a children data field containing an array of child items:<\/p>\n
    var data = [\r\n  {name: \"World\", children: [\r\n    {name: \"Asia\", children: [\r\n      {name: \"East\", value: 1000},\r\n      {name: \"Southern\", value: 803},\r\n      {name: \"Southeast\", value: 415},\r\n      {name: \"Western\", value: 182},\r\n      {name: \"Central\", value: 36}\r\n    ]},\r\n    {name: \"America\", children: [\r\n      {name: \"North\", value: 346},\r\n      {name: \"South\", value: 316},\r\n      {name: \"Central\", value: 114},\r\n      {name: \"Caribbean\", value: 23}\r\n    ]},\r\n    {name: \"Europe\", children: [\r\n      {name: \"Eastern\", value: 233},\r\n      {name: \"Western\", value: 183},\r\n      {name: \"Southern\", value: 135},\r\n      {name: \"Northern\", value: 100}\r\n    ]},\r\n    {name: \"Africa\", children: [\r\n      {name: \"Western\", value: 158},\r\n      {name: \"Eastern\", value: 140},\r\n      {name: \"Northern\", value: 121},\r\n      {name: \"Southern\", value: 34},\r\n      {name: \"Middle\", value: 20}\r\n    ]},\r\n    {name: \"Oceania\", children: [\r\n      {name: \"Oceania\", value: 29}\r\n    ]}\r\n  ]}\r\n];<\/code><\/pre>\n
    Step 4: Code the JS treemap chart<\/h3>\n
    Now, let’s code the visualization.<\/p>\n
    The entire JS chart code must be included in the anychart.onDocumentReady()<\/code> function within the <script><\/code> tag. So first, add the function:<\/p>\n
    <script>\r\n  anychart.onDocumentReady(function() {\r\n    \/\/ the entire code of the treemap chart will be here\r\n  });\r\n<\/script><\/code><\/pre>\n
    Second, add the data from step 3 and command to create a data tree:<\/p>\n
    anychart.onDocumentReady(function() {\r\n\r\n  \/\/ create data\r\n  var data = [\r\n    {name: \"World\", children: [\r\n      {name: \"Asia\", children: [\r\n        {name: \"East\", value: 1000},\r\n        {name: \"Southern\", value: 803},\r\n        {name: \"Southeast\", value: 415},\r\n        {name: \"Western\", value: 182},\r\n        {name: \"Central\", value: 36}\r\n      ]},\r\n      {name: \"America\", children: [\r\n        {name: \"North\", value: 346},\r\n        {name: \"South\", value: 316},\r\n        {name: \"Central\", value: 114},\r\n        {name: \"Caribbean\", value: 23}\r\n      ]},\r\n      {name: \"Europe\", children: [\r\n        {name: \"Eastern\", value: 233},\r\n        {name: \"Western\", value: 183},\r\n        {name: \"Southern\", value: 135},\r\n        {name: \"Northern\", value: 100}\r\n      ]},\r\n      {name: \"Africa\", children: [\r\n        {name: \"Western\", value: 158},\r\n        {name: \"Eastern\", value: 140},\r\n        {name: \"Northern\", value: 121},\r\n        {name: \"Southern\", value: 34},\r\n        {name: \"Middle\", value: 20}\r\n      ]},\r\n      {name: \"Oceania\", children: [\r\n        {name: \"Oceania\", value: 29}\r\n      ]}\r\n    ]}\r\n  ];\r\n\r\n  \/\/ create a data tree\r\n  treeData = anychart.data.tree(data, \"as-tree\");\r\n\r\n});<\/code><\/pre>\n
    Third, add the following line to create a treemap chart based on the data tree:<\/p>\n
    var chart = anychart.treeMap(treeData);<\/code><\/pre>\n
    Fourth, name the chart<\/a> to make it clear what is displayed on the graphics:<\/p>\n
    chart.title(\"Internet Audience Worldwide (in million users)\");<\/code><\/pre>\n
    Finally, command to draw the treemap chart in the container:<\/p>\n
    \/\/ set the container id\r\nchart.container(\"container\");\r\n\r\n\/\/ draw the chart\r\nchart.draw();<\/code><\/pre>\n
    There you go: Check out the interactive treemap chart just built with JavaScript!<\/p>\n
    Result: Treemap chart built with JavaScript<\/h3>\n