数据可视化不仅有助于交流洞察力,而且有助于数据探索。有很多不同的图表类型被广泛用于识别数据中的模式。较少使用的图表类型之一是Word Tree。这是一种非常有趣的可视化形式,在分析文本方面非常有效。现在,我将教你如何使用 JavaScript 快速创建漂亮的交互式单词树图。
单词树显示一组选定的单词如何通过分支布局与文本数据中的其他单词相连。这些图表类似于词云,其中出现频率更高的词显示得更大。但它们的不同之处在于,词树还显示了词之间的联系,这增加了上下文并有助于找到模式。
在本教程中,我将根据法国飞行员兼作家 Antoine de Saint-Exupéry 的着名书籍《小王子》的文本创建一个可爱的词树。查看下面最终图表的演示并继续阅读以了解如何轻松构建此和任何其他交互式 JS 单词树。
目录
制作一个基本的 JavaScript 词树
交互式 JS 单词树图可能看起来很复杂。但是请继续学习如何通过四个非常简单的步骤来构建它。
- 创建一个 HTML 页面。
- 包括所需的 JavaScript 文件。
- 准备数据。
- 为图表添加一些 JS 代码。
1. 创建一个 HTML 页面
第一步是创建一个 HTML 页面来保存图表。在页面中,添加一个<div>带有 id的元素,稍后将引用该元素。
<html>
<head>
<title>JavaScript Word Tree Chart</title>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
要使单词树占据整个页面,请将宽度和高度参数指定为 100%。这可以根据您的项目要求进行调整。
2. 包含所需的 JavaScript 文件
使用JavaScript 图表库来创建单词树很方便。使用此类库的最佳部分是无需高级技术技能即可快速制作开箱即用的图表。在本教程中,我将根据AnyChart的word 树文档使用它。它可以免费用于非商业用途,但无论如何,这只是一个示例。所有 JS 图表库的数据可视化逻辑都非常相似。因此,基本上,您也可以使用这种学习与其他具有预先构建的词树的人一起创建图表。
我将<head>在 HTML 页面的部分中包含来自 AnyChart 的 CDN 所需的 JS 文件。对于单词树图,我需要添加两个脚本:核心模块和单词树模块。
<html>
<head>
<title>JavaScript Word Tree Chart</title>
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-wordtree.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// All the code for the JS word tree chart wi