VisActor——面向叙事的智能可视化解决方案

技术

文章来源 | VisActor 开源社区 GitHub | github.com/VisActor

一、VisActor 是什么

picture.image

(官网截图:https://www.visactor.io)

VisActor 是一个数据可视化解决方案

VisActor 是从字节跳动大量可视化场景沉淀而来。在覆盖常规可视化场景的同时,以叙事可视化为新的着力点,以智能可视化为目标,形成了包括渲染引擎、可视化语法、数据分析组件、图表组件、表格组件、GIS 组件、图可视化组件、智能组件等多个模块以及周边生态组成的可视化解决方案。

picture.image

作为一个完备的解决方案,VisActor 在可视化完整流程的各个关键节点提供能力支持。

VRender

不只是一个功能丰富的可视化渲染引擎,更是一支得心应手的生花妙笔
github:https://github.com/VisActor/VRender
website:https://www.visactor.io/vrender VRender 是可视化图形渲染引擎,负责可视化图表的最终呈现。

除了提供基础的图元绘制能力之外,VRender 面向更广泛的可视化场景,提供动画自定义,图元组合,叙事编排等多种能力。

picture.image (demo:https://www.visactor.io/vrender/demo/examples/graphic-rect/morphing-animate)

整个方案中所需的组件、事件、跨端能力都是以 VRender 为核心来构建,而且每种模块都提供了扩展接口。

比如引进第三方库增加手绘风格渲染:

picture.image

(demo:https://codesandbox.io/s/eloquent-black-k3mf87)

3D 图表渲染:

picture.image

(demo:https://www.visactor.io/vrender/demo/examples/graphic-symbol/symbol-wave)

VGrammar

不只是生成万千图表的可视化语法,更是化枯燥为神奇的数据魔法师
github:https://github.com/VisActor/VGrammar
website:https://www.visactor.io/vgrammar 可视化语法,是一种实现了从数据到图形展现的通用可视化系统,对外提供语义化语法(语言)。理论上基于可视化语法可以实现任意我们想要的可视化形式,而不局限于特定的图表类型。在一些定制化需求比较多的场景,我们推荐使用 VGrammar。

VGrammar 是整个 VisActor 体系的核心,在此基础上,我们针对特定的业务场景,抽象出 VChart、VTable、VGraph 和 VGis 等组件库。

picture.image

(本图源码:https://codesandbox.io/s/vchart-muti-pie-j48xj5)

为了降低可视化语法的使用成本,我们同时提供声明式和命令式语法。

同时面向常见的可视化场景,提供常见的基础组件。

picture.image

(截图来源:https://www.visactor.io/vgrammar/guide/guides/marks/component)

相对于图表库,VGrammar 在图元类型、动画编排、布局、渲染、自定义扩展等诸多方面都提供灵活强大的特性支持。下面简单举几个例子:

  • 阿基米德螺线

picture.image

(在线体验: https://www.visactor.io/vgrammar/demo/basic-mark-line/spiral)

  • Cell 图元picture.image

(在线体验:https://www.visactor.io/vgrammar/demo/mark-cell/basic-cell)

  • 自定义动画

picture.image

(在线体验:https://www.visactor.io/vgrammar/demo/animate/basic-animate)

VChart

不只是开箱即用的多端图表库,更是生动灵活的数据故事讲述者
github:https://github.com/VisActor/VChart
website:https://www.visactor.io/vchart VChart 在 VGrammar 的基础上,首先面向传统统计图表应用,基于已有的业务沉淀,覆盖常见的图表类型。

picture.image

在常规 2d 图表的基础上扩展了 3D 图表。

picture.image

(demo url: https://codesandbox.io/s/adoring-gates-96pfy2)

同时,在叙事可视化方向,借助 VGrammar 强大而灵活的接口,持续完善各种叙事特性,添加各类叙事模板,匹配更多的叙事场景。

picture.image

(在线体验:https://www.visactor.io/vchart/demo/example/area-chart/storytelling/timeline-scatter)

VTable

不只是高性能的多维数据分析表格,更是行列间创作的方格艺术家
github:https://github.com/VisActor/VTable
website:https://www.visactor.io/vtable VTable 是基于 Canvas 开发的高性能多维分析表格组件。

相对于传统 DOM 表格组件,VTable 主要解决的是大量数据情况下的渲染和交互性能问题,百万级数据纵享丝滑。

picture.image (在线体验:https://www.visactor.io/vtable/demo/performance/100W)

业务场景上,重点面向多维数据展现场景提供数据运算与可视化能力,比如透视分析、树形展现。

同时 VTable 可以直接嵌入 VChart 实例,成为图表容器,实现单一画布多图表高性能渲染,极大拓展了基于表格的可视化呈现形式。

picture.image

(在线体验:https://www.visactor.io/vtable/example)

智能可视化

智能化是 VisActor 的未来核心方向,唯有在此基础上,才能真正的降低开发者的接入和研发成本,将注意力集中在可视化之外。VisActor 团队目前已经结合大模型以及传统智能算法,在智能配色、智能图表推荐、自动布局、数据解析和意图识别等多个方面进行研发和实践。2023 年第三季度会发布首个智能可视化组件。

picture.image

关于智能可视化方向,我们会持续进行多角度的内容输出,欢迎大家持续关注我们的 GitHub 和社交媒体。

还有更多

VisActor 可视化解决方案中的其他组件已经在字节跳动内部的上百个项目中落地,目前在做开源准备,会陆续和大家见面。这其中包括(但不限于)以下这些方向:

图可视化方向的 VGraph。

picture.image

(使用 @visactor/vgraph 创建)

Gis 方向的 VGis。

picture.image

(使用 @visactor/vgis 创建)

在跨端方向,目前 VisActor 已经可以适配 Node、H5 和各种小程序端,嵌入 Python、Flutter 和 Rust 的解决方案不久之后就会正式和大家见面,届时 VisActor 会成为真正的全平台可视化解决方案。

picture.image

(demo: https://codesandbox.io/s/word-cloud-w45g3c)

针对统计图表应用最多的 BI 领域,我们也会开源轻量化的 Headless BI 系统,敬请期待。

二、VisActor 开源理念

开源不只是晒代码,而是通过代码连接社区

把代码放在 github 上,是拥抱社区的开始。我们希望将 VisActor 真正的融入到社区当中,和万千开发者一同推进它更好更健康的发展。

开源不只是开放代码,还要开放经验

VisActor 不是空中楼阁,是基于大量实践的沉淀和升华。想要更好的辅助开发者使用好可视化组件,我们会持续输出我们的最佳实践,同时聚集更多开发者的经验总结同社区共享。

开源不只是面向开发者,还要面向设计师、产品经理和终端用户

VisActor 价值,最终还是要体现在提升不同产品的品质和价值上。同服务开发者一样,我们也同时致力于通过开源的方式连接设计师、产品经理和终端用户。我们会开放可视化的设计资源,产品实践案例,并且愿意走入到更多产品的团队中去做有价值的交流,期待听到不同人群的声音。

三、欢迎加入

最后,我们诚挚的欢迎所有对数据可视化感兴趣的朋友参与进来。你有多种方式参与 VisActor 的开源建设:

  1. 克隆你感兴趣的项目,提交 PR,具体方式参考 Code of Conduct 和 contributing guide。
  2. 当然,你也可以创建自己的开源项目,为 VisActor 生态添砖加瓦,我们一起宣传和建设!
  3. 你也可以把你的经验分享给大家,包括 demo,文章,案例,每个项目都开通了 Wiki 来做记录,你可以进行编辑。
  4. 如果你发现 bug 或者有好的建议,可以在 github(https://github.com/VisActor) 提 issue。你也可以直接加入我们的社群(VisActor Channel)进行交流。也可以在微信公众号进行留言。

*Code of Conduct:

https://github.com/VisActor/VChart/blob/develop/CODE\_OF\_CONDUCT.md*

contributing guide: https://github.com/VisActor/VChart/blob/develop/CONTRIBUTING.zh-CN.md

VisActor Channel: https://discord.com/invite/3wPyxVyH6m

点击底部【阅读原文】直达项目 GitHub ~

0
0
0
0
评论
未登录
看完啦,登录分享一下感受吧~
暂无评论