什么是 kerplunk
Kerplunk 是一个用于构建基于 web 的交互式可视化数据的工具包，它是由 S2Labs 开发的一款 npm 包。kerplunk 极其灵活，可以呈现各种类型的数据，支持可视化控件和图表，并具有强大的数据处理和过滤功能。它是一个充满活力和生命力的开源项目，社区活动非常繁荣。
Kerplunk 使用了 d3.js、vega、cohortanalysis.js 等大量优秀开源项目，并基于这些项目进行了优化和扩展，致力于打造一款简单易用、高效快捷、可视化良好的数据可视化工具包。
安装使用 kerplunk
Kerplunk 可以通过 npm 安装使用，例如：
npm install kerplunk
使用 kerplunk 需要在 HTML 页面中引入样式文件和脚本文件，例如：
<link rel="stylesheet" href="kerplunk.css"> <script src="kerplunk.js"></script>
kerplunk 的基本用法
Kerplunk 提供了简洁的 API，使得你能够在几行代码中创建可视化和跟踪数据源。下面是一个基本的 Kerplunk 示例，它提供鼠标悬停在分类中的分组时，分组中的数据展示报表的功能。
-- -------------------- ---- ------- --- -------- - -------------------- --- ---- - - ------ ---- ------ --------- ------ --- ------ ---- ------ --------- ------ --- ------ ---- ------ --------- ------ --- ------ ---- ------ --------- ------ --- ------ ---- ------ --------- ------ --- ------ ---- ------ --------- ------ -- -- --- ----- - ---------------------------------- ---------------------------------------------------- ---------
用上面的代码创建一个图表，其中 data 变量为输入的数据，x 为分类，y 为数值，bar 可以变成 scatter, line 等其他可视化形式。其中 group 后面的可以替换成另一个字段来呈现其他的数据。运行这个程序，可以看到漂亮的可视化图表。
其它 kerplunk API 详见 官方文档
kerplunk 的数据处理
Kerplunk 提供了灵活、强大的数据处理能力，可以为数据提供排序、筛选、汇总等等功能。下面是一个示例，把一个字符串类型的数据通过 map() 映射为数字类型，然后通过 reduce() 汇总它们的和。再把结果排序，最后通过 kerplunk 中的 table 可视化展示数据。
var kerplunk = require('kerplunk');
var data = ['10', '20', '30', '40', '50'];
var total = data.map(function(d) {return +d}).reduce(function(a,b){return a+b});
var chart = kerplunk().height(200).width(600);
chart.data([{total: total}]).render('table');运行这段代码，你将看到一个可以显示总和的表格。
这只是 kerplunk 数据处理中非常基本的示例，更多进阶使用方法详见 官方文档
总结
Kerplunk 是一个非常优秀的数据可视化工具包，它不仅提供了灵活、强大的数据处理能力，还具有丰富多样的可视化类型和交互式控件。这让我们在前端开发中，能够更加高效快捷、简单易用的呈现和处理数据。希望通过本篇教程的介绍，帮助更多前端开发者更好地使用 kerplunk。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066efd4c49986ca68d8a25