{"id":16173,"date":"2023-01-19T23:15:47","date_gmt":"2023-01-19T23:15:47","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=16173"},"modified":"2023-03-02T16:05:12","modified_gmt":"2023-03-02T16:05:12","slug":"visualizing-text-data-hierarchy","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/","title":{"rendered":"Visualizing Text Data Hierarchy with Word Trees"},"content":{"rendered":"<p><a href=\"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/\"><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/01\/text-data-hierarchy-visualization-in-word-tree.png\" alt=\"Visualizing Text Data Hierarchy with Word Trees\" width=\"100%\" class=\"alignnone size-full wp-image-16190\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/01\/text-data-hierarchy-visualization-in-word-tree.png 1200w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/01\/text-data-hierarchy-visualization-in-word-tree-300x169.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/01\/text-data-hierarchy-visualization-in-word-tree-768x432.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/01\/text-data-hierarchy-visualization-in-word-tree-1024x576.png 1024w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/a>Over the past few weeks, I have been looking for a quick and effective way of representing the structural differences within a set of similar-looking short sentences.<\/p>\n<p>To provide a bit of context, as we approached the end of 2022, my workmates and I got heavily involved in a planning phase for the new year to start. More specifically, we were asked to write a set of <em>objectives<\/em> and <em>key results<\/em> that would help drive a common strategy across our supported programs and pillars over the months to come.<\/p>\n<p>And as expected, each and every one of us ended up leaving comments for every subtle change made to the couple of sentences that had initially been dropped into a shared document. As the comments started piling up, it quickly became quite tedious to follow and understand the slight modifications that were being made to our original set of <em>objectives<\/em> and <em>key results<\/em>.<\/p>\n<p>As I started exploring what we could have done to better capture and visualise these changes, I recently found a way to display text data in a hierarchical way that I thought would be worth sharing.<\/p>\n<p><!--more Read the JS charting tutorial \u00bb--><\/p>\n<h2>Spot the differences<\/h2>\n<p>Let\u2019s start by creating some textual data that we\u2019ll be using throughout this article as a basis for our word tree charts:<\/p>\n<pre><code class=\"python\">\"Julien is a big fan of pizzas and salted caramel\"\r\n\"Julien loves pizzas and salted caramel\"\r\n\"Julien is a big fan of food in general\"\r\n\"Julien loves pizzas but he hates onions\"\r\n\"Julien is a big fan of pizzas but he hates onions\"\r\n\"Julien is a big fan of pizzas but he absolutely hates onions\"\r\n\"Julien is a big fan of pizzas\"\r\n\"Julien loves pizzas\"<\/code><\/pre>\n<p>What we can immediately tell is that though the above sentences look quite similar, they are yet slightly different. The fact that we\u2019re only dealing with a handful of strings probably helps us visualise their syntaxic nuances.<\/p>\n<p>But I\u2019m wondering what would happen if we had 50 times as many sentences. Would we still be able to easily spot how different they are?<\/p>\n<p>Now, a sensible approach to that dimensionality problem would be to rely on either of the following string distance metrics:<\/p>\n<ul>\n<li>The <a href=\"https:\/\/en.wikipedia.org\/wiki\/Damerau%E2%80%93Levenshtein_distance\" target=\"_blank\" rel=\"nofollow\">Damerau-Levenshtein<\/a> distance, or something related like the Guth distance<\/li>\n<li>The <a href=\"https:\/\/en.wikipedia.org\/wiki\/S%C3%B8rensen%E2%80%93Dice_coefficient\" target=\"_blank\" rel=\"nofollow\">Dice<\/a> coefficient<\/li>\n<li>The <a href=\"https:\/\/en.wikipedia.org\/wiki\/Jaccard_index\" target=\"_blank\" rel=\"nofollow\">Jaccard<\/a> index<\/li>\n<li>The <a href=\"https:\/\/en.wikipedia.org\/wiki\/Jaro%E2%80%93Winkler_distance\" target=\"_blank\" rel=\"nofollow\">Jaro-Winkler<\/a> distance<\/li>\n<\/ul>\n<p>etc..<\/p>\n<p>We could loop through our corpus, compute a distance score across each sentence, store these values into a multi-dimensional array, and then visualize that array through a combination of correlation plots. Our code would probably would a bit like that:<\/p>\n<pre><code class=\"python\">import Levenshtein as lev\r\nimport pandas as pd\r\n\r\ncorpus = [\r\n  \"Julien is a big fan of pizzas and salted caramel\",\r\n  \"Julien loves pizzas and salted caramel\",\r\n  \"Julien is a big fan of food in general\",\r\n  \"Julien loves pizzas but he hates onions\",\r\n  \"Julien is a big fan of pizzas but he hates onions\",\r\n  \"Julien is a big fan of pizzas but he absolutely hates onions\",\r\n  \"Julien is a big fan of pizzas\",\r\n  \"Julien loves pizzas\",\r\n]\r\n\r\ndef getMatrix(data):\r\n  m = {}\r\n  ind = 1\r\n  for d in data:\r\n    m[f\"Sentence {ind}\"] = [lev.ratio(d,sent) for sent in data]\r\n    ind+=1\r\n  return m\r\n\r\ndef getDataFrame(data):\r\n  distances = getMatrix(data)\r\n  sentences = {\"Sentences\": [f\"Sentence {i+1}\" for i in range(len(data))]}\r\n  datafr = pd.concat([pd.DataFrame(sentences),pd.DataFrame(distances)], axis=1)\r\n  return datafr.style.background_gradient(cmap=\"Blues\")\r\n\r\ndf = getDataFrame(corpus)\r\ndf<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/www.blanchardjulien.com\/images\/wordtree_01.png\" width=\"100%\" alt=\"\" \/><\/p>\n<p>But that\u2019s not what we\u2019re going to do today! Instead, we\u2019re going to focus on how to represent multiple parallel sequences of terms through a simple hierarchical decision tree.<\/p>\n<h2>Oh no, not JavaScript again!<\/h2>\n<p>Truth be told, I initially went for a <strong>Python<\/strong>-based approach, but none of the popular data visualisation libraries (<strong>Matplotlib<\/strong>, <strong>Plotly<\/strong>, <strong>Bokeh<\/strong>) really seemed to provide the type of chart that I was looking for. A rapid Google search returned an obscure package named <strong><a href=\"https:\/\/github.com\/willcrichton\/wordtree\" target=\"_blank\" rel=\"nofollow\">wordtree<\/a><\/strong>, but I realised that it hadn\u2019t been updated for over 2 years and required having <strong><a href=\"https:\/\/graphviz.org\/\" target=\"_blank\" rel=\"nofollow\">Graphviz<\/a><\/strong> installed anyway.<\/p>\n<p>Yes, <strong><a href=\"https:\/\/www.nltk.org\/\" target=\"_blank\" rel=\"nofollow\">nltk<\/a><\/strong> has a module named <a href=\"https:\/\/www.nltk.org\/api\/nltk.draw.html\" target=\"_blank\" rel=\"nofollow\"><strong>Draw<\/strong><\/a> that can be used to display a hierarchical tree. However, it is built on the back of <strong>Matplotlib<\/strong> and can\u2019t provide any interactivity.<\/p>\n<p>I plead guilty to being a bit of a <strong>JavaScript<\/strong> fanboy, but I genuinely think that the <strong><a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"nofollow\">npm<\/a><\/strong> ecosystem offers some fantastic data visualization packages. I\u2019ve personally always been amazed to see what some talented programmers can achieve using libraries like <strong><a href=\"https:\/\/d3js.org\/\" target=\"_blank\" rel=\"nofollow\">D3.js<\/a><\/strong> or <strong>Airbnb<\/strong>\u2019s <strong><a href=\"https:\/\/airbnb.io\/visx\/gallery\" target=\"_blank\" rel=\"nofollow\">Visx<\/a><\/strong>.<\/p>\n<p>Now if you have been following my website, you probably know that I personally am a big fan of another library, named <a href=\"https:\/\/docs.anychart.com\/\" target=\"_blank\" rel=\"nofollow\"><strong>Any\u0421hart<\/strong><\/a>. Feel free to check my articles on <a href=\"https:\/\/blanchardjulien.com\/posts\/networkplots\/\" target=\"_blank\" rel=\"nofollow\">network graphs<\/a> and <a href=\"https:\/\/blanchardjulien.com\/posts\/winknlp\/\" target=\"_blank\" rel=\"nofollow\">treemap charts<\/a> if you want to know more!<\/p>\n<p>As we\u2019ll be visualising our word tree directly in the browser, let\u2019s start by creating a simple <em>html<\/em> file and importing the necessary packages \/ files:<\/p>\n<pre><code class=\"html\">&lt;head&gt;\r\n  &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-bundle.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\r\n&lt;\/head&gt;<\/code><\/pre>\n<p>Still within this <em>html<\/em> file, We\u2019ll also need a couple of nested <code>&lt;div&gt;<\/code> elements:<\/p>\n<pre><code class=\"html\">&lt;body&gt;\r\n  &lt;div class=\"container\"&gt;\r\n    &lt;div id=\"viz\"&gt;&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/body&gt;<\/code><\/pre>\n<p>As well as a simple <em>css<\/em> file, just so we\u2019re sure our chart gets rendered properly:<\/p>\n<pre><code class=\"css\">.container {\r\n  display: flex;\r\n}\r\nhtml, body, #viz {\r\n  margin: 0px;\r\n  width: 1100px;\r\n  height: 600px;\r\n}<\/code><\/pre>\n<p>The fun part starts now! If we head over to <strong>Any\u0421hart<\/strong>\u2019s <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Word_Tree\" target=\"_blank\" rel=\"nofollow\">official documentation<\/a>, we\u2019ll see that each of our sentences needs to be nested within its own individual array:<\/p>\n<pre><code class=\"javascript\">let corpus = [\r\n  [\"Julien is a big fan of pizzas and salted caramel\"],\r\n  [\"Julien loves pizzas and salted caramel\"],\r\n  [\"Julien is a big fan of food in general\"],\r\n  [\"Julien loves pizzas but he hates onions\"],\r\n  [\"Julien is a big fan of pizzas but he hates onions\"],\r\n  [\"Julien is a big fan of pizzas but he absolutely hates onions\"],\r\n  [\"Julien is a big fan of pizzas\"],\r\n  [\"Julien loves pizzas\"]\r\n]<\/code><\/pre>\n<p>We\u2019re now only three lines of <strong>JavaScript<\/strong> code away from outputting our very first word tree chart:<\/p>\n<pre><code class=\"javascript\">let chart = anychart.wordtree(corpus);\r\nchart.container(\"viz\");\r\nchart.draw()<\/code><\/pre>\n<p>And we\u2019re done! Let\u2019s open our <em>html<\/em> page and see what we got.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.blanchardjulien.com\/images\/wordtree_02.png\" width=\"100%\" alt=\"\" \/><\/p>\n<p>You\u2019ll have noticed that we can hover over each term and get their corresponding weight, which is pretty neat! We should also probably clean up our code and add more parameters to our <code>chart<\/code> object:<\/p>\n<pre><code class=\"javascript\">const getWordTree = (data,chart_title) =&gt; {\r\n  let chart = anychart.wordtree(data);\r\n  let title = chart.title();\r\n  title.text(chart_title);\r\n  title.enabled(true);\r\n  title.fontSize(35);\r\n  title.align(\"left\");\r\n  title.fontColor(\"#e9ecef\")\r\n  title.fontFamily(\"helvetica\");\r\n  title.fontStyle(\"italic\");\r\n  chart.container(\"viz\");\r\n  chart.fontFamily(\"Helvetica\");\r\n  chart.fontColor(\"#e9ecef\")\r\n  let connectors = chart.connectors();\r\n  connectors.stroke(\"4 #FFFFFF\");\r\n  chart.background().fill(\"#6c757d\");\r\n  chart.draw();\r\n}\r\n\r\ngetWordTree(corpus,\"Word Tree parser\");<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/www.blanchardjulien.com\/images\/wordtree_03.png\" width=\"100%\" alt=\"\" \/><\/p>\n<h2>A tree of tags<\/h2>\n<p>Our first attempt wasn\u2019t too bad, but as the sentences within our <code>corpus<\/code> array start getting more complicated, the readability of our word tree chart is going to rapidly deteriorate. Besides, working with unlemmatized terms might not be a clever approach, as terms with a similar root will lead to children trees being created.<\/p>\n<p>Why don\u2019t we use a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Part-of-speech_tagging\" target=\"_blank\" rel=\"nofollow\">part-of-speech tagger<\/a> to represent the structure of our <code>corpus<\/code> array instead? Replacing the terms within each sentence by their corresponding <strong><a href=\"https:\/\/www.ling.upenn.edu\/courses\/Fall_2003\/ling001\/penn_treebank_pos.html\" target=\"_blank\" rel=\"nofollow\">PENN treebank<\/a><\/strong> tag might solve our problems! Again, the <strong><a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"nofollow\">npm<\/a><\/strong> ecosystem features some great <em>NLP<\/em> packages, and we\u2019ll be using a library named <strong><a href=\"https:\/\/github.com\/spencermountain\/compromise\" target=\"_blank\" rel=\"nofollow\">Compromise.js<\/a><\/strong>. We won\u2019t be spending too much time today going through its main features, as I wrote an <a href=\"https:\/\/blanchardjulien.com\/posts\/compromise\/\" target=\"_blank\" rel=\"nofollow\">article<\/a> entirely dedicated to in-browser text processing with <strong>Compromise.js<\/strong> a little while ago.<\/p>\n<p>Long story short, we\u2019ll first need to add this pair of <code>&lt;script&gt;&lt;\/script&gt;<\/code> tags of our <em>html<\/em> file:<\/p>\n<pre><code class=\"html\">&lt;script src=\"https:\/\/unpkg.com\/compromise\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>If you\u2019re coming from <strong>Python<\/strong> and have already used <a href=\"https:\/\/spacy.io\/\" target=\"_blank\" rel=\"nofollow\">spaCy<\/a>, the following function should then look pretty familiar:<\/p>\n<pre><code class=\"javascript\">const getPOSTags = (text) =&gt; {\r\n  let result = new Array();\r\n  let doc = nlp(text);\r\n  doc.compute(\"penn\");\r\n  let data = doc.json()\r\n  for (let d in data) {\r\n    console.log(d, data[d]);\r\n  }\r\n}\r\n\r\ngetPOSTags(\"Julien is a big fan of pizzas and salted caramel.\");<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/www.blanchardjulien.com\/images\/wordtree_04.png\" width=\"100%\" alt=\"\" \/><\/p>\n<p>Right, so <strong>Compromise.js<\/strong> has generated an <em>object<\/em> that quite frankly contains way too much information for what we\u2019re trying to do today. What we should do now is create a new array named <code>corpus_tags<\/code> and simply throw our part-of-speech tags into it. Here\u2019s our modified <code>getPOSTags()<\/code> function:<\/p>\n<pre><code class=\"javascript\">let corpus_tags = new Array();\r\n\r\nconst getPOSTags = (text) =&gt; {\r\n  let result = new Array();\r\n  let doc = nlp(text);\r\n  doc.compute(\"penn\");\r\n  let data = doc.json()\r\n  for (let d in data) {\r\n    for (let t in data[d].terms) {\r\n      result.push(data[d].terms[t].penn);\r\n    }\r\n  }\r\n  return result.join(\" \");\r\n}\r\n\r\ncorpus.forEach(\r\n  c =&gt; corpus_tags.push([getPOSTags(c)])\r\n)\r\n\r\ncorpus_tags.forEach(\r\n  c =&gt; console.log(c)\r\n)<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/www.blanchardjulien.com\/images\/wordtree_05.png\" width=\"75%\" alt=\"\" \/><\/p>\n<p>That\u2019s much better! All that\u2019s left to do at this point, is call the <code>getWordTree()<\/code> function that we created earlier, this time using our new <code>corpus_tags<\/code> array:<\/p>\n<pre><code class=\"javascript\">getWordTree(\"corpus_tags\",\"POS Tags Tree parser\");<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/www.blanchardjulien.com\/images\/wordtree_06.png\" width=\"100%\" alt=\"\" \/><\/p>\n<p>As you have probably noticed, I have made some changes to both the background and font colours. But all the other parameters were left untouched.<\/p>\n<hr \/>\n<p><strong><em>Published with the permission of Julien Blanchard. Originally appeared\u00a0on <a href=\"https:\/\/www.blanchardjulien.com\/posts\/word_tree\/\" target=\"_blank\" rel=\"nofollow\">Julien&#8217;s Data Blog<\/a> with the title\u00a0&#8220;Visualizing the Hierarchy of Text Data With Word Trees&#8221; on January 2, 2023.<\/em><\/strong><\/p>\n<p><strong><em>You may also like\u00a0to see the JavaScript <a href=\"https:\/\/www.anychart.com\/blog\/2022\/10\/14\/word-tree-js\/\">Word Tree\u00a0Tutorial<\/a> originally published\u00a0on our blog\u00a0earlier.<\/em><\/strong><\/p>\n<p><em><strong>Don&#8217;t miss our other <a href=\"https:\/\/www.anychart.com\/blog\/category\/javascript-chart-tutorials\/\">JavaScript charting tutorials<\/a>.<\/strong><\/em><\/p>\n<hr \/>\n<p><!-- SyntaxHighlighter --><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/default.min.css\"><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/atom-one-light.min.css\"><script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/highlight.min.js\"><\/script><script>hljs.initHighlightingOnLoad();<\/script><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Over the past few weeks, I have been looking for a quick and effective way of representing the structural differences within a set of similar-looking short sentences. To provide a bit of context, as we approached the end of 2022, my workmates and I got heavily involved in a planning phase for the new year [&hellip;]<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":23,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,263,23,13,279,4],"tags":[53,260,284,127,166,258,471,266,620,1292,880,806,3352,509,54,1389,1760,256,1111,844,165,313,1370,774,2884,2885,32,55,144,36,907,141,81,57,573,58,65,56,3511,3260,459,1226,3456,908,909,1534,30,172,558],"class_list":["post-16173","post","type-post","status-publish","format-standard","hentry","category-anychart-charting-component","category-big-data","category-html5","category-javascript","category-javascript-chart-tutorials","category-tips-and-tricks","tag-anychart","tag-best-data-visualization-examples","tag-chart-examples","tag-chart-types","tag-charting","tag-charts","tag-data-analysis","tag-data-analytics","tag-data-analytics-examples","tag-data-chart","tag-data-charting","tag-data-charts","tag-data-graphic","tag-data-graphics","tag-data-visualization","tag-data-visualization-best-pracices","tag-data-visualization-design","tag-data-visualization-examples","tag-data-visualization-practice","tag-data-visualization-tutorial","tag-data-visualizations","tag-data-visuals","tag-data-viz-examples","tag-dataviz-examples","tag-hierarchical-data","tag-hierarchical-data-visualization","tag-html5","tag-html5-charts","tag-infographics","tag-javascript","tag-javascript-chart-tutorial","tag-javascript-charting","tag-javascript-charting-library","tag-javascript-charts","tag-javascript-word-tree-chart","tag-js-chart","tag-js-charting","tag-js-charts","tag-meta","tag-statistic","tag-statistics","tag-statistics-visualization","tag-text-analysis","tag-text-data","tag-text-data-visualization","tag-text-visualization","tag-tips-and-tricks","tag-tutorial","tag-word-tree","wpautop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Visualizing Text Data Hierarchy with Word Trees Using JavaScript Charts<\/title>\n<meta name=\"description\" content=\"Sometimes you need to display text data in a hierarchical way. Join Julien Blanchard of Meta as he shows how to build a word tree in the browser using JS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visualizing Text Data Hierarchy with Word Trees\" \/>\n<meta property=\"og:description\" content=\"Join Julien Blanchard of Meta as he shows how to display text data in a hierarchical way by visualizing a word tree in the browser using JS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/\" \/>\n<meta property=\"og:site_name\" content=\"AnyChart News\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AnyCharts\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-19T23:15:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-02T16:05:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/01\/text-data-hierarchy-visualization-in-word-tree-social.png\" \/>\n<meta name=\"author\" content=\"Julien Blanchard, Meta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Visualizing Text Data Hierarchy with Word Trees\" \/>\n<meta name=\"twitter:description\" content=\"Join Julien Blanchard of Meta as he shows how to display text data in a hierarchical way by visualizing a word tree in the browser using JS.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/01\/text-data-hierarchy-visualization-in-word-tree-social.png\" \/>\n<meta name=\"twitter:creator\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:site\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Julien Blanchard, Meta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/\"},\"author\":{\"name\":\"Julien Blanchard, Meta\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/379714d61a12605d8b12f7df62145d04\"},\"headline\":\"Visualizing Text Data Hierarchy with Word Trees\",\"datePublished\":\"2023-01-19T23:15:47+00:00\",\"dateModified\":\"2023-03-02T16:05:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/\"},\"wordCount\":1071,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/01\/text-data-hierarchy-visualization-in-word-tree.png\",\"keywords\":[\"AnyChart\",\"best data visualization examples\",\"chart examples\",\"chart types\",\"charting\",\"charts\",\"data analysis\",\"data analytics\",\"data analytics examples\",\"data chart\",\"data charting\",\"data charts\",\"data graphic\",\"data graphics\",\"Data Visualization\",\"data visualization best practices\",\"data visualization design\",\"data visualization examples\",\"data visualization practice\",\"data visualization tutorial\",\"data visualizations\",\"data visuals\",\"data viz examples\",\"dataviz examples\",\"hierarchical data\",\"hierarchical data visualization\",\"HTML5\",\"html5 charts\",\"infographics\",\"JavaScript\",\"javascript chart tutorial\",\"javascript charting\",\"JavaScript charting library\",\"javascript charts\",\"JavaScript Word Tree Chart\",\"js chart\",\"js charting\",\"js charts\",\"Meta\",\"statistic\",\"statistics\",\"statistics visualization\",\"text analysis\",\"text data\",\"text data visualization\",\"text visualization\",\"Tips and tricks\",\"tutorial\",\"Word Tree\"],\"articleSection\":[\"AnyChart Charting Component\",\"Big Data\",\"HTML5\",\"JavaScript\",\"JavaScript Chart Tutorials\",\"Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/\",\"url\":\"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/\",\"name\":\"Visualizing Text Data Hierarchy with Word Trees Using JavaScript Charts\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/01\/text-data-hierarchy-visualization-in-word-tree.png\",\"datePublished\":\"2023-01-19T23:15:47+00:00\",\"dateModified\":\"2023-03-02T16:05:12+00:00\",\"author\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/379714d61a12605d8b12f7df62145d04\"},\"description\":\"Sometimes you need to display text data in a hierarchical way. Join Julien Blanchard of Meta as he shows how to build a word tree in the browser using JS.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/#primaryimage\",\"url\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/01\/text-data-hierarchy-visualization-in-word-tree.png\",\"contentUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/01\/text-data-hierarchy-visualization-in-word-tree.png\",\"width\":1200,\"height\":675},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.anychart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visualizing Text Data Hierarchy with Word Trees\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\",\"url\":\"https:\/\/www.anychart.com\/blog\/\",\"name\":\"AnyChart News\",\"description\":\"AnyChart JS Charts\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.anychart.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/379714d61a12605d8b12f7df62145d04\",\"name\":\"Julien Blanchard, Meta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/074b768e0da9cbd879fa5db4f9f722f563c0a7f5496d96a173f818f330e80e17?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/074b768e0da9cbd879fa5db4f9f722f563c0a7f5496d96a173f818f330e80e17?s=96&r=g\",\"caption\":\"Julien Blanchard, Meta\"},\"url\":\"https:\/\/www.anychart.com\/blog\/author\/julien-blanchard\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Visualizing Text Data Hierarchy with Word Trees Using JavaScript Charts","description":"Sometimes you need to display text data in a hierarchical way. Join Julien Blanchard of Meta as he shows how to build a word tree in the browser using JS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/","og_locale":"en_US","og_type":"article","og_title":"Visualizing Text Data Hierarchy with Word Trees","og_description":"Join Julien Blanchard of Meta as he shows how to display text data in a hierarchical way by visualizing a word tree in the browser using JS.","og_url":"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/","og_site_name":"AnyChart News","article_publisher":"https:\/\/www.facebook.com\/AnyCharts","article_published_time":"2023-01-19T23:15:47+00:00","article_modified_time":"2023-03-02T16:05:12+00:00","og_image":[{"url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/01\/text-data-hierarchy-visualization-in-word-tree-social.png","type":"","width":"","height":""}],"author":"Julien Blanchard, Meta","twitter_card":"summary_large_image","twitter_title":"Visualizing Text Data Hierarchy with Word Trees","twitter_description":"Join Julien Blanchard of Meta as he shows how to display text data in a hierarchical way by visualizing a word tree in the browser using JS.","twitter_image":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/01\/text-data-hierarchy-visualization-in-word-tree-social.png","twitter_creator":"@AnyChart","twitter_site":"@AnyChart","twitter_misc":{"Written by":"Julien Blanchard, Meta","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/#article","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/"},"author":{"name":"Julien Blanchard, Meta","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/379714d61a12605d8b12f7df62145d04"},"headline":"Visualizing Text Data Hierarchy with Word Trees","datePublished":"2023-01-19T23:15:47+00:00","dateModified":"2023-03-02T16:05:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/"},"wordCount":1071,"commentCount":0,"image":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/01\/text-data-hierarchy-visualization-in-word-tree.png","keywords":["AnyChart","best data visualization examples","chart examples","chart types","charting","charts","data analysis","data analytics","data analytics examples","data chart","data charting","data charts","data graphic","data graphics","Data Visualization","data visualization best practices","data visualization design","data visualization examples","data visualization practice","data visualization tutorial","data visualizations","data visuals","data viz examples","dataviz examples","hierarchical data","hierarchical data visualization","HTML5","html5 charts","infographics","JavaScript","javascript chart tutorial","javascript charting","JavaScript charting library","javascript charts","JavaScript Word Tree Chart","js chart","js charting","js charts","Meta","statistic","statistics","statistics visualization","text analysis","text data","text data visualization","text visualization","Tips and tricks","tutorial","Word Tree"],"articleSection":["AnyChart Charting Component","Big Data","HTML5","JavaScript","JavaScript Chart Tutorials","Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/","url":"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/","name":"Visualizing Text Data Hierarchy with Word Trees Using JavaScript Charts","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/#primaryimage"},"image":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/01\/text-data-hierarchy-visualization-in-word-tree.png","datePublished":"2023-01-19T23:15:47+00:00","dateModified":"2023-03-02T16:05:12+00:00","author":{"@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/379714d61a12605d8b12f7df62145d04"},"description":"Sometimes you need to display text data in a hierarchical way. Join Julien Blanchard of Meta as he shows how to build a word tree in the browser using JS.","breadcrumb":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/#primaryimage","url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/01\/text-data-hierarchy-visualization-in-word-tree.png","contentUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/01\/text-data-hierarchy-visualization-in-word-tree.png","width":1200,"height":675},{"@type":"BreadcrumbList","@id":"https:\/\/www.anychart.com\/blog\/2023\/01\/19\/visualizing-text-data-hierarchy\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.anychart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Visualizing Text Data Hierarchy with Word Trees"}]},{"@type":"WebSite","@id":"https:\/\/www.anychart.com\/blog\/#website","url":"https:\/\/www.anychart.com\/blog\/","name":"AnyChart News","description":"AnyChart JS Charts","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.anychart.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/379714d61a12605d8b12f7df62145d04","name":"Julien Blanchard, Meta","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/074b768e0da9cbd879fa5db4f9f722f563c0a7f5496d96a173f818f330e80e17?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/074b768e0da9cbd879fa5db4f9f722f563c0a7f5496d96a173f818f330e80e17?s=96&r=g","caption":"Julien Blanchard, Meta"},"url":"https:\/\/www.anychart.com\/blog\/author\/julien-blanchard\/"}]}},"_links":{"self":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/16173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/comments?post=16173"}],"version-history":[{"count":10,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/16173\/revisions"}],"predecessor-version":[{"id":16366,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/16173\/revisions\/16366"}],"wp:attachment":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/media?parent=16173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/categories?post=16173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/tags?post=16173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}