{"id":15772,"date":"2022-10-14T12:25:41","date_gmt":"2022-10-14T12:25:41","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=15772"},"modified":"2022-10-14T13:07:17","modified_gmt":"2022-10-14T13:07:17","slug":"word-tree-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2022\/10\/14\/word-tree-js\/","title":{"rendered":"How to Create Word Tree Using JavaScript"},"content":{"rendered":"

\"A<\/a>It\u00a0is\u00a0a\u00a0pure\u00a0fact\u00a0that\u00a0a graphical or pictorial representation of data,\u00a0known\u00a0as\u00a0a\u00a0data\u00a0visualization<\/a>, conveys information faster than\u00a0raw data\u00a0in arrays, spreadsheets,\u00a0or\u00a0dense reports.\u00a0Charts\u00a0make\u00a0data easier\u00a0to\u00a0understand,\u00a0which further helps\u00a0to\u00a0quickly develop valuable insights. Interesting, right? Now, let\u2019s have a look at one chart type called a word tree<\/strong> and see how to build it with ease.<\/p>\n

A word tree is a data visualization form designed to show multiple parallel sequences of words (or phrases) as they appear in a text. Analyzing texts becomes easier with word trees as they display, by means of a branching structure, how selected words are connected to others.<\/p>\n

In this tutorial, I will walk you through the process of creating a beautiful word tree chart with JavaScript (HTML5). The text being visualized will be the famous speech \u201cI Have a Dream\u201d<\/strong> by minister and civil rights activist Martin Luther King Jr. Each step will be explained in detail, and you’ll see everything is pretty simple. Sit tight and enjoy the learning!<\/p>\n

<\/p>\n

Word Tree Chart That Will Be Created<\/h2>\n

Here is how the final word tree chart will look. Keep reading to find out how\u00a0a visualization like this can be created real quick using JavaScript.<\/p>\n

\"A<\/p>\n

Building Basic Word Tree\u00a0with\u00a0JavaScript<\/h2>\n

You might have found the concept\u00a0of\u00a0a\u00a0word tree a little\u00a0complicated.\u00a0But I assure you that it is no great deal to create\u00a0such\u00a0a\u00a0chart.\u00a0Here\u00a0are\u00a0four\u00a0basic\u00a0steps:<\/p>\n

    \n
  1. Create an HTML page.<\/li>\n
  2. Include JavaScript files.<\/li>\n
  3. Load the data.<\/li>\n
  4. Add some JS code for the chart.<\/li>\n<\/ol>\n

    Now,\u00a0we’ll\u00a0go\u00a0through each of these steps.<\/p>\n

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

    The first step\u00a0is\u00a0to\u00a0get\u00a0a\u00a0web\u00a0page\u00a0for\u00a0the chart.<\/p>\n

    Create\u00a0a\u00a0basic\u00a0HTML page.\u00a0Add a <div><\/code> element\u00a0\u2014\u00a0it’s\u00a0where the\u00a0word\u00a0tree\u00a0will\u00a0be\u00a0placed.\u00a0Give\u00a0it\u00a0an\u00a0ID.<\/p>\n

    Set the width<\/code> and height<\/code> parameters to 100% in order\u00a0to\u00a0display\u00a0the chart on the entire screen.\u00a0Or configure\u00a0that\u00a0as\u00a0per your requirements.<\/p>\n

    Feel free to add your special touch to the structure.<\/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>JavaScript Word Tree Chart<\/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
    2. Include JavaScript files<\/h3>\n
    Creating word trees can be very easy when you use a good JavaScript charting library\u00a0that supports this chart type out of the box. In this tutorial, the process will\u00a0be demonstrated using AnyChart<\/a>\u00a0based on the word tree documentation.<\/a><\/p>\n
    Let’s include the required JS files\u00a0from the AnyChart CDN<\/a>\u00a0(alternatively, you can download them). The core module<\/a> and word tree module<\/a> are the scripts\u00a0needed to create the word tree chart.\u00a0jQuery<\/a> will be used to query a text file.<\/p>\n
    The scripts need to be referenced in the <head><\/code> section. The JS code will be placed in the JavaScript tag script that can be put anywhere in the <head><\/code> or <body><\/code> sections. So our\u00a0HTML would now look something like this:<\/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>JavaScript Word Tree Chart<\/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-wordtree.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/code.jquery.com\/jquery-latest.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\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ The JS Word Tree 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 the data<\/h3>\n
    Now, it’s time to set the data. I have downloaded the speech \u201cI Have A Dream\u201d by Dr. Martin Luther King, Jr. from Marshall University<\/a>‘s website and created a data file<\/a>.<\/p>\n
    To load the data into\u00a0the\u00a0JS chart, we will use the jQuery ajax()<\/code> function as shown in the next step.<\/p>\n
    4. Add some JS code for the\u00a0chart<\/h3>\n
    Now, a few lines of JavaScript code\u00a0are needed to make\u00a0a functional word tree chart.<\/p>\n
    First, add the anychart.onDocumentReady()<\/code> function which wraps up the entire chart code, making sure that the charting\u00a0will be executed only after the page has loaded completely.<\/p>\n
    <script>\r\n\u00a0\u00a0anychart.onDocumentReady(function () {\r\n\u00a0\u00a0\u00a0\u00a0\/\/ The main part of the word tree code will go here.\r\n\u00a0\u00a0}\r\n<\/script><\/code><\/pre>\n
    Then, load the data\u00a0as preliminarily explained in the third step.<\/p>\n
    anychart.onDocumentReady(function () {\r\n\u00a0\u00a0$.ajax(\"https:\/\/gist.githubusercontent.com\/awanshrestha\/0033cf6344bcda10c242b64fe1d8c2f7\/raw\/115a11507a1d672fbf651f1bd413963318501010\/i-have-a-dream-speech.txt\").done(function (text) {\r\n    \/\/ The rest of the word tree code will go here.\r\n  });\r\n});<\/code><\/pre>\n
    After that, create a word tree chart\u00a0instance using the wordtree()<\/code> function of the JS\u00a0library\u00a0and pass the text data to it.<\/p>\n
    var chart = anychart.wordtree(text);<\/code><\/pre>\n
    Defining the root word is a significant part of a word tree chart, as it is this root word that branches out to various sentences in the text. For this example, let’s set “I” as the root word.<\/p>\n
    chart.word(\"I\");<\/code><\/pre>\n
    In the end, we give the chart a title, define the\u00a0container, and display the result.<\/p>\n
    chart.title(\"Word Tree of \\\"I Have a Dream\\\" Speech by Martin Luther King\");\r\nchart.container(\"container\");\r\nchart.draw();<\/code><\/pre>\n
    Hurray, it’s done! This is all that is required to create an interactive\u00a0word tree chart using JavaScript. Such visualization can be embedded into any web page or app and work in any browser.<\/p>\n