近期,字节跳动宣布开源面向叙事的智能可视化解决方案——VisActor。VisActor来源于字节跳动海量场景实践,能在可视化完整流程的各个关键节点提供支持,包括可视化图形渲染引擎、可视化语法、图表、高性能多维分析表格等多个组件能力。
文丨字节跳动数据平台前端团队
/ VisActor 是一个数据可视化解决方案 /
VisActor 是从字节跳动大量可视化场景沉淀而来。
在覆盖常规可视化场景的同时,以叙事可视化为新的着力点,以智能可视化为目标, 形成了包括渲染引擎、可视化语法、数据分析组件、图表组件、表格组件、GIS组件、图可视化组件、智能组件等多个模块以及周边生态组成的可视化解决方案。
作为一个完备的解决方案,VisActor在可视化完整流程的各个关键节点提供能力支持。
/ VRender /
VRender
📣不只是一个功能丰富的可视化渲染引擎,更是一支得心应手的生花妙笔
Github: https://github.com/VisActor/VRender
Website: https://www.visactor.io/vrender
VRender 是可视化图形渲染引擎,负责可视化图表的最终呈现。
除了提供基础的图元绘制能力之外,VRender面向更广泛的可视化场景,提供动画自定义,图元组合,叙事编排等多种能力。
●
Demo : https://www.visactor.io/vrender/demo/examples/graphic-rect/morphing-animate
整个方案中所需的组件、事件、跨端能力都是以VRender为核心来构建,而且每种模块都提供了扩展接口。
比如引进第三方库增加手绘风格渲染:
●
Demo :
https://codesandbox.io/s/eloquent-black-k3mf87
3D图表渲染:
● Demo: https://www.visactor.io/vrender/demo/examples/graphic-symbol/symbol-wave
/ VGrammar /
VGrammar
📣不只是生成万千图表的可视化语法,更是化枯燥为神奇的数据魔法师
Github: https://github.com/VisActor/VGrammar
Website: https://www.visactor.io/vgrammar
可视化语法,是一种实现了从数据到图形展现的通用可视化系统,对外提供语义化语法(语言)。 理论上基于可视化语法可以实现任意我们想要的可视化形式,而不局限于特定的图表类型。
在一些定制化需求比较多的场景,我们推荐使用VGrammar。
VGrammar 是整个VisActor 体系的核心,在此基础上,我们针对特定的业务场景,抽象出VChart、VTable、VGraph和VGis 等组件库。
● 本图源码: https://codesandbox.io/s/vchart-muti-pie-j48xj5
为了降低可视化语法的使用成本,我们同时提供声明式和命令式语法。
同时面向常见的可视化场景,提供常见的基础组件。
● 截图来源 : https://www.visactor.io/vgrammar/guide/guides/marks/component
相对于图表库,VGrammar 在图元类型、动画编排、布局、渲染、自定义扩展等诸多方面都提供灵活强大的特性支持。
下面简单举几个例子:
1. 阿 基米德螺线:
● 在线体验: https://www.visactor.io/vgrammar/demo/basic-mark-line/spiral)
2. Cell 图元:
● 在线体验: https://www.visactor.io/vgrammar/demo/mark-cell/basic-cell
3. 自定义动画:
● 在线体验: https://www.visactor.io/vgrammar/demo/animate/basic-animate)
/ VChart /
VChart
📣不只是开箱即用的多端图表库,更是生动灵活的数据故事讲述者
Github: https://github.com/VisActor/VChart
Website: https://www.visactor.io/vchart
VChart 在VGrammar的基础上,首先面向传统统计图表应用,基于已有的业务沉淀,覆盖常见的图表类型。
在常规2d图表的基础上扩展了3D图表。
●
Demo url :
https://codesandbox.io/s/adoring-gates-96pfy2
同时,在叙事可视化方向,借助VGrammar强大而灵活的接口,持续完善各种叙事特性,添加各类叙事模板,匹配更多的叙事场景。
●
在线体验:
https://www.visac tor.io/vchart/demo/example/area-chart/storytelling/timeline-scatter)
/ VTable /
VTable
📣不只是高性能的多维数据分析表格,更是行列间创作的方格艺术家
Github: https://github.com/VisActor/VTable
Website: https://www.visactor.io/vtable
VTable 是基于Canvas 开发的高性能多维分析表格组件。
相对于传统DOM表格组件,VTable 主要解决的是大量数据情况下的渲染和交互性能问题,百万级数据纵享丝滑。
●
在线体验:
https://www.visactor.io/vtable/demo/performance/100W
业务场景上,重点面向多维数据展现场景提供数据运算与可视化能力,比如透视分析、树形展现。
同时VTable可以直接嵌入VChart实例,成为图表容器,实现单一画布多图表高性能渲染,极大拓展了基于表格的可视化呈现形式。
●
在线体验:
https://www.visactor.io/vtable/example
/ 智能可视化 /
智能化是 VisActor的未来核心方向,唯有在此基础上,才能真正的降低开发者的接入和研发成本,将注意力集中在可视化之外。
VisActor 团队目前已经结合大模型以及传统智能算法,在
智能配色、智能图表推荐、自动布局、数据解析和意图识别
等多个方面进行研发和实践。2023年第三季度会发布首个智能可视化组件。
关于智能可视化方向,我们会持续进行多角度的内容输出,欢迎大家持续关注我们的 github 和 社交媒体。
/ 还有更多 /
VisActor 可视化解决方案中的其他组件已经在字节跳动内部的上百个项目中落地,目前在做开源准备,会陆续和大家见面。这其中包括(但不限于)以下这些方向:
图可视化方向的 VGraph。
使用 @visactor/vgraph 创建
Gis 方向的VGis。
使用@visactor/vgis 创建
在跨端方向,目前VisActor 已经可以适配Node、H5和各种小程序端,嵌入Python、Flutter和Rust的解决方案不久之后就会正式和大家见面, 届时VisActor会成为真正的全平台可视化解决方案。
●
Demo:
https://codesandbox.io/s/word-cloud-w45g3c
针对统计图表应用最多的BI领域,我们也会开源轻量化的Headless BI系统,敬请期待。
● 开源不只是晒代码,而是通过代码连接社区
把代码放在github上,是拥抱社区的开始。我们希望将VisActor真正的融入到社区当中,和万千开发者一同推进它更好更健康的发展。
● 开源不只是开放代码,还要开放经验
VisActor 不是空中楼阁,是基于大量实践的沉淀和升华。想要更好的辅助开发者使用好可视化组件,我们会持续输出我们的最佳实践,同时聚集更多开发者的经验总结同社区共享。
● 开源不只是面向开发者,还要面向设计师、产品经理和终端用户
VisActor 价值,最终还是要体现在提升不同产品的品质和价值上。同服务开发者一样,我们也同时致力于通过开源的方式连接设计师、产品经理和终端用户。
我们会开放可视化的设计资源,产品实践案例,并且愿意走入到更多产品的团队中去做有价值的交流,期待听到不同人群的声音。
最后,我们诚挚的欢迎所有对数据可视化感兴趣的朋友参与进来。你有多种方式参与VisActor的开源建设:
1.克隆你感兴趣的项目, 提交PR,具体方式参考 Code of Conduct 和 contributing guide 。
2. 当然, 你也可以创建自己的开源项目, 为VisActor生态添砖加瓦,我们一起宣传和建设!
3.你也可以把你的经验分享给大家, 包括demo,文章,案例,每个项目都开通了Wiki来做记录,你可以进行编辑. VChart VTable VGrammar
4.如果你发现bug或者有好的建议,可以在github (https://github.com/VisActor) 提issue。你也可以直接加入我们的社群 (VisActor Channel) 进行交流。也可以在微信公众号进行留言。
--推荐阅读--