{"id":13543,"date":"2021-10-04T09:40:56","date_gmt":"2021-10-04T09:40:56","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=13543"},"modified":"2022-08-13T11:09:24","modified_gmt":"2022-08-13T11:09:24","slug":"javascript-word-tree-chart","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2021\/10\/04\/javascript-word-tree-chart\/","title":{"rendered":"Building Word Tree Chart with JavaScript"},"content":{"rendered":"

\"Word<\/a>Data visualization<\/a> is not only useful for communicating insights but also helpful for data exploration. There are a whole lot of different chart types that are widely used for identifying patterns in data. One of the lesser-used chart types is Word Tree<\/strong>. It is a very interesting visualization form, quite effective in analyzing texts. And right now, I will teach you how to quickly create nice interactive word tree charts using JavaScript.<\/p>\n

Word trees display how a set of selected words are connected to other words in text data with a branching layout. These charts are similar to word clouds<\/a> where words that occur more frequently are shown bigger. But they are different in the sense that word trees also show the connection between the words, which adds context and helps find patterns.<\/p>\n

In this tutorial, I will create a lovely word tree from the text of the very famous book The Little Prince<\/a><\/em> by French aviator and writer Antoine de Saint-Exup\u00e9ry. Check out a demonstration of the final chart below and keep reading to learn how this and any other interactive JS word tree can be built with ease.<\/p>\n

<\/p>\n

\"Animated<\/p>\n

Making a Basic JavaScript Word Tree<\/h2>\n

An interactive JS word tree chart can look complicated. But follow along to learn how to build it in just four really simple steps.<\/p>\n

    \n
  • Create an HTML page.<\/li>\n
  • Include the required JavaScript files.<\/li>\n
  • Prepare the data.<\/li>\n
  • Add some JS code for the chart.<\/li>\n<\/ul>\n

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

    The initial step is to create an HTML page that will hold the chart. In the page, add a <div><\/code> element with an id that will be referenced later.<\/p>\n

    <html>\r\n  <head>\r\n    <title>JavaScript Word Tree Chart<\/title>\r\n    <style type=\"text\/css\">      \r\n      html, body, #container { \r\n        width: 100%; height: 100%; margin: 0; 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
    To make the word tree occupy the whole page, specify the width and height parameters as 100%. This can be adjusted as per the requirements of your project.<\/p>\n
    2. Include the Required JavaScript Files<\/h3>\n
    It is convenient to use a JavaScript charting library<\/a> to create the word trees. The best part of using such libraries is that out-of-the-box charts can be quickly made without advanced technical skills. In this tutorial, I am working with AnyChart<\/a> based on its word tree documentation<\/a>. It is free for non-commercial use, but anyway, it is only an example. The logic of data visualization remains quite similar for all JS charting libraries. So, basically, you can use this learning to create charts with others that have pre-built word trees, too.<\/p>\n
    I will include the required JS files from the CDN of AnyChart in the <head><\/code> section of the HTML page. For the word tree chart, I need to add two scripts: the core module<\/a> and the word tree module<\/a>.<\/p>\n
    <html>\r\n  <head>\r\n    <title>JavaScript Word Tree Chart<\/title>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.10.0\/js\/anychart-core.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.10.0\/js\/anychart-wordtree.min.js\"><\/script>\r\n    <style type=\"text\/css\">      \r\n      html, body, #container { \r\n        width: 100%; height: 100%; margin: 0; padding: 0; \r\n      } \r\n    <\/style>\r\n  <\/head>\r\n  <body>  \r\n    <div id=\"container\"><\/div>\r\n    <script>\r\n      \/\/ All the code for the JS word tree chart will come here\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    3. Prepare the Data<\/h3>\n
    I downloaded the text of the famous book The Little Prince<\/em> by Antoine de Saint-Exup\u00e9ry from an online library<\/a> and created the data file that you can download here<\/a>.<\/p>\n
    To access the data file, I need jQuery and therefore include its script in the code.<\/p>\n
    <script src=\"https:\/\/code.jquery.com\/jquery-latest.min.js\"><\/script><\/code><\/pre>\n
    Now that all the preliminary steps are done, let\u2019s get to the main part. You are going to love how quickly a functional interactive word tree chart can be made with so few lines of JavaScript code.<\/p>\n
    4. Add Some JS Code for the Chart<\/h3>\n
    Before writing any code, the first thing I do is add an enclosing function that executes the code inside it only after the page is ready and then loads the data file using Ajax.<\/p>\n
    anychart.onDocumentReady(function () {\r\n  $.ajax(\r\n\"https:\/\/gist.githubusercontent.com\/shacheeswadia\/ccbccc482b1fb691405e07772c0fbfa0\/raw\/fb7b5972838b4212f4551c4cc9d5fc026fc2e8c3\/littleprince.txt\"\r\n  ).done(function (text) {\r\n  });\r\n});<\/code><\/pre>\n
    Next, I create the chart using the wordtree()<\/code> function of the JS library.<\/p>\n
    var chart = anychart.wordtree(text);<\/code><\/pre>\n
    In a word tree, an important part is defining the root words which branch out to various sentences in the text. Here, I define \u2018The\u2019 as the start of the root and drill down to \u2018prince\u2019 as the end of the root so the combined root words become \u2018the little prince\u2019.<\/p>\n
    \/\/ set the root word\r\nchart.word(\"The\");\r\n\r\n\/\/ drill down to the next word in the tree\r\nchart.drillTo(\"prince\");<\/code><\/pre>\n
    Finally, I just need to set the container and draw the chart.<\/p>\n
    \/\/ set container id for the chart\r\nchart.container(\"container\");\r\n\r\n\/\/ initiate chart drawing\r\nchart.draw();<\/code><\/pre>\n
    Voila, that\u2019s all I do to bring the interactive word tree to life on the web page!<\/p>\n
    You can check out this initial version of the JS word tree chart with the code below or on CodePen<\/a> [or on AnyChart Playground<\/a>].<\/strong><\/p>\n