2018年值得了解的11个JavaScript可视化库

我们生活在爆炸性增长的时代,人类生成和使用的数据量很大。 在当今几乎所有正在开发的应用程序中,数据要么在其内部某个位置使用,要么可视化。 程序员使用数据来努力使他们的程序尽可能舒适。

有时,应用程序可以为用户提供的最有价值和最有趣的东西可能是某些数据。 但是,如果以列表或表等形式表示它们,则使用此类数据可能会很乏味。 此外,如果有大量数据,仅查看其最简单的表示,用户将在分析数据和基于数据做出决策时遇到困难。

代表应用程序用户的数据,不仅对他自己有价值。 它们的设计应使其与他们一起工作时快速,方便和愉快。

图片

今天,我们提请您注意材料的翻译,该材料讨论了用于数据可视化的开源JavaScript库。

1. D3



D3库

开源库D3 (也称为D3.js)可能被称为现有JS库中最流行的数据可视化库。 尤其是,该项目在GitHub上已收集了近8万颗星。 创建该库是为了使用HTML,SVG和CSS等技术来可视化数据。

多亏了库的创建者对Web标准的关注,D3为开发人员提供了一个适合在现代浏览器中使用的整体环境,以可视化数据,从而无需搜索某些付费解决方案。 D3库结合了用于数据可视化的组件和基于数据的DOM处理方法。 D3允许您将任意数据输出到DOM,然后将适当的转换应用于文档。 这是使用该库示例的绝佳画廊

顺便说一下,请注意以下事实:D3根本不是用于数据可视化的库 。 我们相信您自己可以决定考虑什么,以及是否在项目中使用它。

2. Chart.js



Chart.js

Chart.js库在GitHub上已收集了约4万颗星,这是一个非常流行的解决方案,用于基于<canvas>创建HTML5图形和图表,旨在开发响应式Web应用程序。 库的当前第二版支持各种类型的图形(有8种基本类型的图形),各种坐标系的组合。 Chart.js可以与moment.js库结合使用。 如有必要,可以从cdnjs下载该库。

3. Three.js



Three.js

Three.js库是使用WebGL创建3D动画的非常受欢迎的解决方案(在GitHub上约有4.5万个星;该项目有1000多人参与)。 该项目的灵活性和抽象性意味着Three.js可以用于可视化2和3维数据。 例如, 这是 Three.js 专用模块,旨在创建三维图形。 这是用于数据可视化实验的在线沙箱 。 如果您正在考虑使用WebGL可视化数据,则一定要看看Three.js。

4. ECharts和Highcharts JS



使用ECharts的示例(图像来自此处

ECharts是一个百度项目,已在GitHub上收集了约3万颗星,是一个用于在浏览器中进行数据可视化和图形化的库。 它使用旨在与<canvas>一起使用的zrender库以纯JavaScript编写。

该库支持使用<canvas> ,SVG(4.0+)和VML进行绘图。 ECharts不仅可以用于开发为台式机或移动浏览器设计的页面,还可以用于组织有效的服务器呈现。 这是使用此库的示例库,您可以在交互式环境中尝试使用该库。


Highcharts js

Highcharts JS库被广泛使用,它在GitHub上收集了大约八千个星星。 她用于数据可视化的主要机制是SVG技术,能够针对较旧版本的浏览器切换到VML和<canvas> 。 据指出,全球最大的100家公司中有72家使用此库,如果为真,则使该库成为Facebook和Twitter等大公司中最受欢迎的图表解决方案。

5. MetricsGraphics.js



MetricsGraphics.js

MetricsGraphics.js库(在GitHub上约7,000个星)是针对时间序列可视化进行了优化的解决方案。 它以相对较小的尺寸(最小化形式为80 Kb)而著称,并为开发人员提供了一套小巧但周到的高度专业化的工具,其中包括构造线图,散点图,直方图,条形图和数据表的工具。 这是使用此库的示例的交互式库。

6.图表




图表

Recharts库在GitHub上拥有近10,000个星标,是一个基于React和D3的制图解决方案,看起来像在使用声明式React组件。 该库为开发人员提供了对SVG的支持。 它的轻量级依赖树(基于D3子模块)可通过组件属性进行高度自定义。 在这里,您可以找到其用法的示例。

7.拉斐尔




拉斐尔

Raphaël的 “矢量”库(在GitHub上约有1万颗星)旨在与Web环境中的矢量图形一起使用。 她作为创建图形对象的基本技术,使用了SVG和VML。 结果,图形对象也是您可以使用JavaScript连接到事件处理程序的DOM对象。 该库当前支持浏览器,例如Firefox 3.0 +,Safari 3.0 +,Chrome 5.0 +,Opera 9.5+和Internet Explorer 6.0+。

7. C3



C3库示例

C3库(在GitHub上约有8000个星标)基于D3,它为开发人员提供了对所有元素使用类的能力,这使您可以使用这些类定义自己的样式并使用D3的功能。 此外,它支持各种API和回调,用于组织与图表的交互式交互。 使用它们,即使图形显示在页面上,您也可以对其进行更新。 以下是使用此库的示例。

8. React-Vis,React虚拟化,胜利



React-Vis组件套件

这套React-Vis组件(在GitHub上约有4000星)是由Uber开发的,旨在在React应用程序中组织统一的数据可视化系统。 该解决方案支持各种形式的数据表示,尤其是以热图和散点图的形式。 例如,使用此库不需要像D3这样的初学者。 它为开发人员提供了低级的模块化构建块,例如X / Y轴。



反应虚拟组件集

这套React虚拟化组件(在GitHub上约有1.2万颗星)旨在组织有效的大型表格数据渲染。 有可用的React虚拟化ES6,CommonJS和UMD构建,该项目支持Webpack4。如果要使用这组组件,请注意其文档中的Dependencies部分。


胜利组件集合

胜利是React组件的集合,旨在通过交互功能可视化数据。 该项目由Formidable Labs创建,在GitHub上收集了约6000颗星。 Victory对常规的React应用程序和React Native环境使用相同的API,这有助于跨平台解决方案的开发。 Victory为开发人员提供了灵活漂亮的方法来使用React组件的功能进行数据可视化。

9. CartoDB



CartoDB服务

Carto平台(在GitHub上约有2千颗星)设计用于可视化和分析地理数据。 在此平台上,您可以下载地理数据(例如,以Shapefiles或GeoJSON格式),可视化它们,将其放置在地图上,使用CartoCSS设置样式,可以使用SQL搜索它们。 有关使用此平台的视频教程。

10. RAWGraphs




原始图

GitHub上有5,000个星的RAWGraphs库提供了一个工具,可让您将包含数据的表与可视化工具相关联。 RAWGraphs基于D3,它使开发人员可以创建自己的矢量数据可视化。 它可以处理各种格式的表格数据,并支持可以简单地从其他应用程序复制的数据。 RAWGraphs的结果以SVG格式显示,可以使用适当的应用程序进行编辑,或者在不更改的网页上使用。 以下是使用此库的示例。

11.元数据库



元数据库

Metabase库已经在GitHub上收集了超过11000个星星,它提供了一种相当快捷简便的方法来创建包含可视化数据的控制面板,这些数据不需要SQL知识。 同时,该库具有一种特殊的SQL模式,该模式专为分析人员和专业从事数据处理的人员设计。 元数据库允许您通过创建过滤器或过滤器集来细分数据,该库支持创建指标-您必须经常访问的计算指标。 Metabase的其他功能包括支持将数据发送到Slack并提供在此环境中使用MetaBot与之协作的功能 。 该库也许被认为是用于可视化公司内数据的出色工具,尽管应注意的是,要掌握它,需要付出一些努力。

奖励库:Taucharts



Taucharts

Taucharts数据可视化库(在GitHub上约有2千颗星)基于D3库。 它为开发人员提供了一个声明性界面,用于快速组织具有可视属性的数据字段的连接。 它的体系结构允许您创建图表,其中使用X和Y坐标对分组进行分组( 构面图 )。 Taucharts允许您使用适合重用的插件来扩展图表的行为。

总结


我们研究了JavaScript库,以可视化可用于开发Web应用程序的数据。 考虑到我们谈论的数据在现代世界中的作用,不足为奇的是,有大量的数据可视化解决方案。 因此,这里有一些更相似的库(在研究它们时,请注意以下事实:很长时间没有更新它们):


亲爱的读者们! 您使用哪些库来可视化Web项目中的数据?

Source: https://habr.com/ru/post/zh-CN423983/


All Articles