你听说过马赛克情节吗？这是一种非常有趣的图表类型，旨在促进探索变量之间的关系。马赛克图（也称为马赛克图）将数据可视化为矩形块，矩形块的宽度编码一个变量，高度编码另一个变量。
如果你想学习如何轻松地创建这样一个优雅的图表，请跟随我，因为我现在将向你展示诀窍！在本教程中，我将按照年龄组和年份构建美国社交媒体采用情况的互动马赛克图，使用JavaScript并详细解释每一步。
将要建造的马赛克图
为了让您有心情进行一些创造性的工作，我邀请您先看看将在文章末尾完成的最终马赛克图。现在是时候让球滚动了！
基本马赛克图
如果您曾经使用 JavaScript 创建过任何图表，那么您已经了解了它的工作原理。在这种情况下，您只需选择一个 JS 图表库并遵循其马赛克图文档。但是，如果这将是您第一次这样的体验（或者您之前的体验不太容易和令人兴奋），那么本教程正是为您准备的！
让我们从定义应该采取的步骤开始。一般来说，几乎任何基于 JS 的酷交互式数据可视化，包括马赛克图，都建立在四个基本步骤中：
- 获取要放置图表的网页。
- 参考要使用的 JavaScript 文件。
- 设置要可视化的数据。
- 编写一些 JS 代码来生成您需要的绘图。
现在，和我一起深入研究每一个！
1. 获取网页
第一件事。我创建了一个基本的 HTML 页面。在本<body>节中，我包含了一个块级元素 ，<div>这将是马赛克图将被渲染的位置，并在本例中为它提供一个独特的id属性。container我还将它的高度和宽度设置为 100%，因为我想看到马赛克图沿着整个网页拉伸。
这是我的 HTML 页面的外观：
<html>
<head>
<title>Mosaic Plot in JS</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>
2.引用JavaScript文件
现在，是时候加载将用于在网页上创建预期马赛克图的脚本了。
在这里，我将使用 AnyChart 的JS 图表库。它功能丰富，具有全面的文档和API参考，以及图库中的大量现成示例。此外，AnyChart 是模块化的，这意味着一个人只能连接几个轻量级脚本来支持实际需要的功能，而不是使用整个库不必要地使网页或应用程序过载。
马赛克图需要两个模块：Core和Mekko。<head>我通过在该部分中包含以下内容将它们添加到页面：
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-mekko.min.js"></script>
我还在<script>该部分放置了一个标签<body>。（或者它可以转到该<head>部分。没关系。）这就是我即将发布的马赛克图的完整 JavaScript 代码将被放置的地方。
这是我目前所得到的：
<html>
<head>
<title>Mosaic Plot in JS</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-mekko.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>
// The JS mosaic plotting code will come here.
</script>
</body>
</html>
3.设置数据
然后是数据。正如我在介绍中指出的那样，我想看看美国的社交媒体采用情况 如今，据报道，大约四分之三的美国成年人至少使用一个社交媒体网站。让我们更深入地探索不同年龄组和不同年龄的情况——这将是马赛克情节的一个很酷的例子！
我将可视化的数据来自皮尤研究中心。它看起来并不复杂，所以我将它直接添加到代码中。注意数据的格式，因为这就是马赛克图“理解”在哪个轴上表示什么的方式。
let data = {
header: ['#', '2006', '2009', '2012', '2015', '2018', '2021'],
rows: [
['18–29', 41, 70, 81, 90, 88, 84],
['30–49', 6, 42, 64, 77, 78, 81],
['50–64', 3, 20, 39, 51, 64, 73],
['65+', 0, 5, 16, 35, 37, 45]
]
};
4.写一些JS代码
我已经为我的马赛克图、绘制它的脚本和需要可视化的数据找到了位置。现在这些东西都准备好了，我将在<script>标签内做一些快速的 JavaScript 编码。
我在这里做的第一件事就是添加anychart.onDocumentReady()函数。其他所有内容都将进入其中，并在网页完全加载后执行。
<script>
anychart.onDocumentReady(function () {
// The JS mosaic plotting code will come here.
});
</script>
然后我添加上一步中的数据：
anychart.onDocumentReady(function () {
let data = {
header: ['#', '2006', '2009', '2012', '2015', '2018', '2021'],
rows: [
['18–29', 41, 70, 81, 90, 88, 84],
['30–49', 6, 42, 64, 77, 78, 81],
['50–64', 3, 20, 39, 51, 64, 73],
['65+', 0, 5, 16, 35, 37, 45]
]
};
});
然后，在同一个函数中，我创建了一个马赛克图的实例：
let chart = anychart.mosaic();
并将数据加载到它：
chart.data(data);
我还为整个马赛克图添加了一个标题：
chart.title("Social Media Use in U.S. by Age");
最后，我通过指定元素的 ID（参见步骤 1）来定义可视化的放置位置，<div>并绘制生成的马赛克图。
chart.container('container');
chart.draw();
这是我的马赛克图的整个 JavaScript 代码的样子：
anychart.onDocumentReady(function () {
// set the data to visualize
let data = {
header: ['#', '2006', '2009', '2012', '2015', '2018', '2021'],
rows: [
['18–29', 41, 70, 81, 90, 88, 84],
['30–49', 6, 42, 64, 77, 78, 81],
['50–64', 3, 20, 39, 51, 64, 73],
['65+', 0, 5, 16, 35, 37, 45]
]
};
// create a mosaic plot
let chart = anychart.mosaic();
// load the data to the plot
chart.data(data);
// set the plot title
chart.title("Social Media Use in U.S. by Age");
// set the mosaic chart container element id
chart.container('container');
// draw the resulting chart
chart.draw();
});
答对了！几行代码就准备好了一个基本的马赛克图！
我们可以立即看到，在最年轻的年龄组中，使用社交媒体的比例高于其他任何人。嗯，可以期待。但是看看现在其他年龄段的人使用社交媒体的人数与 10 或 15 年前相比有多少。看看你还能注意到什么。
在AnyChart Playground上查看这个基本的马赛克图。以防万一，完整的代码也在下面：
<html>
<head>
<title>Mosaic Plot in JS</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-mekko.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>
anychart.onDocumentReady(function () {
// set the data to visualize
let data = {
header: ['#', '2006', '2009', '2012', '2015', '2018', '2021'],
rows: [
['18–29', 41, 70, 81, 90, 88, 84],
['30–49', 6, 42, 64, 77, 78, 81],
['50–64', 3, 20, 39, 51, 64, 73],
['65+', 0, 5, 16, 35, 37, 45]
]
};
// create a mosaic plot
let chart = anychart.mosaic();
// load the data to the plot
chart.data(data);
// set the plot title
chart.title("Social Media Use in U.S. by Age");
// set the mosaic chart container element id
chart.container('container');
// draw the resulting chart
chart.draw();
});
</script>
</body>
</html>
高级马赛克图
本教程上一部分中构建的马赛克图基于 AnyChart JS 图表库中配置的此图表类型的默认设置。但也有各种选项来调整可视化。现在，随着我利用定制的力量来让我的马赛克情节更加时尚和信息丰富。
- 更改图表设计主题。
- 增强标签。
- 调整瓷砖间距。
- 改进标题。
- 增强工具提示。
要了解这些 JS 时间线图表自定义，请继续阅读此处。
链接：https://anychart.hashnode.dev/how-to-make-a-mosaic-plot-in-javascript
网友评论