VisActor — Narrative-oriented Intelligent Visualization Solution
玄魂
Posted on November 8, 2023
1. What is VisActor ？
（Official Website： https://www.visactor.io)
VisActor is a data visualization solution
VisActor originates from a multitude of visualization scenarios within ByteDance. While covering conventional visualization scenarios, it takes narrative visualization as a new focus and aims for intelligent visualization. It has formed a visualization solution composed of multiple modules including a rendering engine, visualization grammar, data analysis components, chart components, table components, GIS components, graph visualization components, intelligent components, and other peripheral ecological components.
As a comprehensive solution, VisActor provides capabilities support at all key points in the complete visualization process.
VRender
It’s not just a feature-rich visualization rendering engine, but also a handy and exquisite brush for creating visualization artistry.
github：https://github.com/VisActor/VRender
website：https://www.visactor.io/vrender
VRender is a visualization graphics rendering engine responsible for the final presentation of visual charts.
In addition to providing basic graphic drawing capabilities, VRender caters to a wider range of visualization scenarios, offering various capabilities such as custom animations, graphic combinations, and narrative orchestration.
All the components, events, and cross-end capabilities needed in the whole solution are built around VRender as the core, and each module provides expansion interfaces. For instance, it allows the introduction of third-party libraries to add hand-drawn style rendering:
VGrammar
It’s not just a visualization grammar that generates thousands of charts, but also a data magician that transforms the mundane into the extraordinary.
github：https://github.com/VisActor/VGrammar
website：https://www.visactor.io/vgrammar
Visualization grammar is a universal visualization system that implements the transition from data to graphic display, providing semantical grammar (or language). In theory, any desired visualization form can be achieved based on the visualization grammar, not limited to specific chart types. For scenarios with more customization requirements, we recommend using VGrammar.
VGrammar is the core of the entire VisActor system. On this basis, we abstract out component libraries such as VChart, VTable, VGraph, and VGis for specific business scenarios.
To lower the cost of using visualization grammar, we offer both declarative and imperative syntax.
In addition, aimed at common visualization scenarios, we provide common basic components.
Compared to the chart library, VGrammar provides flexible and powerful feature support in many aspects such as graphic element types, animation arrangements, layout, rendering, custom extensions, and more. Here are a few examples:
VChart
It’s not just a ready-to-use multi-end chart library, but also a vivid and flexible data storytelling narrator.
github：https://github.com/VisActor/VChart
website：https://www.visactor.io/vchart
Based on VGrammar, VChart initially caters to traditional statistical chart applications, covering common types of charts based on existing business deposits.
It extends to 3D charts on the basis of regular 2D charts.
Meanwhile, in the direction of narrative visualization, by utilizing the powerful and flexible interfaces of VGrammar, it continues to perfect various narrative features, add various narrative templates, and match more narrative scenarios.
dynamic scatter chart created by VChart
VTable
It’s not just a high-performance multi-dimensional data analysis table, but also a grid artist creating between rows and columns.
github：https://github.com/VisActor/VTable
website：https://www.visactor.io/vtable
VTable is a high-performance multi-dimensional analysis table component developed based on Canvas. Compared to the traditional DOM table components, VTable primarily solves rendering and interaction performance issues under the condition of massive data, providing a smooth experience even with millions-of-level data.
In terms of business scenarios, it mainly provides data computation and visualization capabilities for multi-dimensional data display scenes, such as pivot analysis and tree-shaped display. At the same time, VTable can directly embed VChart instances to become a chart container, achieving high-performance rendering of multiple charts on a single canvas, greatly expanding the visual presentation forms based on the table.
Intelligent Visualization
Intelligence is the future core direction of VisActor. Only on this basis can we truly reduce the access and development costs for developers and focus their attention beyond visualization. The VisActor team has been conducting research and practice in several areas including intelligent color matching, intelligent chart recommendations, automatic layout, data parsing, and intent recognition by integrating large models as well as traditional intelligent algorithms. The first intelligent visualization component will be released in the third quarter of 2023.
Regarding the direction of intelligent visualization, we will continue to output content from multiple perspectives. You’re welcome to keep an eye on our GitHub and social media for updates.
There’s More
Other components of the VisActor visualization solution have been implemented in hundreds of projects within ByteDance, and we are currently preparing for open-sourcing and will meet you gradually. This includes (but is not limited to) the following directions:
VGraph in the direction of graph visualization.
（Creating with @visactor/vgraph）
VGis in the direction of GIS.
Creating with @visactor/vgis
In cross-platform direction, VisActor can currently adapt to Node, H5, and various mini-program ends. The solutions to embed in Python, Flutter, and Rust will officially meet you soon, as which time VisActor will become a truly full-platform visualization solution.
For the BI field, where statistical chart applications are most used, we will also open source a lightweight Headless BI system. Please stay tuned.
2、VisActor Open Source Philosophy
Open source is not just about showing off code, but connecting to the community through the code.
Placing the code on GitHub is the beginning of embracing the community. We hope to truly integrate VisActor into the community and push for its better and healthier development along with thousands of developers.
Open source is not just about opening code, but also sharing experiences.
VisActor is not castles in the air — it’s a distillation and upgrade based on a vast amount of practical experience. To better assist developers in using visualization components, we will continue to share our best practices, while also aggregating and sharing the community’s experience summaries.
Open source is not just geared towards developers, but also designers, product managers, and end users.
The value of VisActor ultimately has to be reflected in the enhancement of different products’ quality and value. The same as serving developers, we are also committed to connecting designers, product managers, and end users through open-source means. We will offer visualization design resources, product practice cases, and are willing to enter more product teams for valuable exchanges, looking forward to hearing voices from different segments.
3、Welcome to Join Us
Finally, we sincerely welcome all friends interested in data visualization to join us. You can participate in VisActor’s open-source construction in several ways:
Clone the project you’re interested in, submit a PR. For specific methods, please refer to: Code of Conduct 和 contributing guide 。
Of course, you can also create your own open-source project to contribute to the Visactor ecosystem, and we will promote and build it together!
You can also share your experiences with everyone, including demos, articles, cases. Each project has a Wiki for recording, where you can edit VChart VTable VGrammar
If you find a bug or have a good suggestion, you can raise an issue on GitHub . You can also directly join our community （VisActor Channel）for communication. Of course, you can also leave us a message on Twitter.
Posted on November 8, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.