The summit forum was held in Tianjin University. At the proposal of the company, I applied to attend the conference. The date of the event is April 19, 2021. Due to the working time, I finished sorting out the notes today.

Here are my notes of the meeting and some of my impressions.

From Tree to Map: Exploring visual design space for Hierarchical Data — Yuan Xiaoru

Content of the report

An introduction to hierarchical data

Professor Yuan first introduced the concept of hierarchical data and the world’s first organization chart [George Holt Henshaw, 1855].

It shows treevis.net, a collection site that specializes in hierarchical data visualization. So far, 318 tree visualization methods have been collected.

Since there are so many tree layouts, there is still a lot of design space for hierarchical data.

Existing problems

There are two main visualization solutions on the market:

• Various visual icon libraries, such as D3, AntV, EChart, etc. Programming background is required.
• Visualization tools, such as Tableau, PowerBI, etc. No programming background is required, but with so many tree structures, fine-tuning can take a lot of effort. (I feel the same way.)

Professor Yuan then listed two challenges of hierarchical data design space:

• How to define common components in the visual form of a tree.
• How to support building diverse visualizations.

By analyzing the composition of tree visualization, abstracted the common components, and took the maximum coverage as the criterion, finally split tree visualization into the following three parts:

• Layout: such as left and right, up and down, including layout, etc.
• Coordinate system: such as Cartesian coordinate system, polar coordinate system, etc
• Visual elements: mainly the form of points and lines in tree visualization, such as lines: straight lines, curves, right angles, points: squares, triangles, circles, etc.

GoTree grammar

Practice has proved that a tree can be better described according to the coordinate system, layout and visual elements. It also introduces the results of their laboratory research on this: GoTree grammar.

The usage syntax for GoTree is shown below, and you can see how semantic it is.

This syntax makes it very easy to create tree visualizations, and notes that you can have multiple layouts within a tree visualizations. This is true because it reduces the complexity of development.

GoTree considers only two dimensions and can draw more than 100 visualizations on Treevis.net, which covers a lot of ground.

Tree Illustrator

The lab also developed an interactive interface based on the GoTree syntax: Tree Illustrator.

Using this system you can quickly visualize trees. You can also create freely and generate new tree visualizations. Here are some Tree visualizations produced by the Tree Illustrator system.

Then came a new challenge. Free combinations of the GoTree syntax can produce more than 10 million tree expressions. How do you find the one that the user needs from so many diagrams?

Interactive exploration map

Starting from different user scenarios and goals, Professor Yuan proposed the concept of interactive exploration map. Through hierarchical visual exploration, the tree is finally found to match the user.

BarCodeTree(BCT)

In order to compare multiple shallow and stable tree structures, Professor Yuan introduced a new visual form of tree structure comparison: BarCodeTree(BCT).

In the figure below, the comparison of three different trees is realized by mapping the values of the nodes to the width of the bar code.

BCT also has some variants. Interested students can go to the Visualization and Visual Analysis Laboratory of Peking University to consult relevant literature.

R-map

Finally, Professor Yuan introduced the tree visualization R-Map of metaphor Map through the visualization of forwarding path in social media.

These are two kinds of maps: exploratory interactive map, R-Map, and hierarchical data visualization discussion: GoTree, BTC, Tree Illustrator.

Related papers:

• GoTree: A Grammar of Tree Visualizations
• Tree Illustrator: Interactive Construction of Tree Visualizations
• BarcodeTree: Scalable Comparison of Multiple Hierarchies
• R-Map: A Map Metaphor for Visualizing Information Reposting Process in Social Media.

Intelligent Visual Design and Data Story Generation — Cao Nan

Content of the report

Basic knowledge of information visualization

Professor Cao first introduced a general reference model for information visualization:

The following five steps of information visualization are introduced:

First, abstract data

The original data is transformed into structured graph data through data cleaning, data transformation, data abstraction and other steps.

Second, visual design

• Design criteria: letter (accurate expression), reach (efficient communication, to achieve the goal), elegant (visual beauty).
• Visual coding: Graphical symbols and attributes (i.e. visual channels) present data elements and attributes.
• Common visual channels: color, shape, size, Angle, position, transparency, texture, bend, area, length, etc.

Visual layout

Calculate the distribution of data in space and gradually optimize the effect.

Four, apply colours to a drawing

Draw graphics on different terminals through webGL, Canvas, Svg and other technologies.

Interaction and animation

For visualization of large or complex data, adding appropriate interaction can improve user experience.

When the data changes, well-designed animations do not let the user lose focus.

Current problems

There are plenty of visual icon libraries, tools, and frameworks on the market, but each has its own threshold. So I want to engage in automated aided visual design.

Through retrospecting the process of information visualization design, it is found that the difficulty of automation lies in visual design and layout, and the other steps can be programmed basically.

Regular design space

The key to automatic visual design is to design space.

Design space is a collection of various design elements. For example, the design space of illustration includes: background, configuration, image, copy and so on. Design space is often multi-dimensional.

The design space for visual charts includes:

• The layout algorithm
• interact
• Data mapping.

This is similar to the grammar of goTree mentioned by Professor Yuan above. The design space of goTree is layout, coordinates and visual elements.

A regular design space can make the design become regular, which I personally like very much. While inspiration may lead to great work, I think there is a pattern of things that can be programmed, and that can be productive. Once the design space is in place, the foundation for automated design is in place.

Then it introduces the concept of data story according to Hans Rosling’s 200 Countries 200 Years 4 Minutes, a classic video.

The seven representations of the data story correspond to the design space

The design spatial elements of the data story are determined

• Topic Mining: How to mine information points in data
• Visual Communication: How to present data correctly
• Narrative structure: How do charts translate narrative structure
• Emotional Expression: How to express emotions with visual symbols

Calliope, Data

The lab collects a wide range of information from high-quality data stories. For example, common charts, color schemes, combinations, etc.

And I made my own collection of design Spaces: there are a lot of visual suggestions for different intentions, such as how to emphasize, how to compare data, etc.

Interested can come here to see check the lab paper: videoexplorer.idvxlab.com/.

Finally, Professor Cao showed the result of their automatic design Calliope·Data, which automatically generates Data stories by uploading Data. It’s interesting to take a screenshot of the data story that the site generates.

You can also design different modes, such as data card mode, mobile phone mode and so on.

Related papers:

• Narrative Visualization: Telling Stories with Data. [Edward Segel and Jeffrey Heer]
• Visualization Analysis and Design [Tamara Munzner]
• Communicating with Motion: A Design Space for Animated Visual Narratives in Data Videos[Yang Shi, Xingyu Lan, Jingwen Li, Zhaorui Li, Nan Cao]

There are ~

And then there are three professors

• Visual Analysis of competitive Sports data — Wizard talents
• Data Visualization technology and its Application — Wu Yadong
• Data Visualization technology and Application — Chen Wei

All of them are heavyweight experts in the field of visualization. Unfortunately, I lost my lecture notes on the way back to Beijing, so I could not record them one by one. I can only talk about them in general.

Professor Wu yingcai is mainly engaged in the visualization research of sports, analyzing tactics and coordinating and adjusting athlete training in a visual way. It is very difficult to collect data. Professor Wu showed table tennis, football cases are very impressive.

Professor Wu yadong first introduced the concept and domain division of visualization, and the application of visualization. Next, some research and application of our laboratory are introduced, mainly in the field of liquor production process, production principle and so on. There are also some videos of visual immersion solutions, there is a great video of a visual underground lab, my first thought was to play CS🤣.

Professor Chen wei mainly introduced the combination of artificial intelligence and visualization, and the importance of visualization technology.

What impressed me most was a video of data news cooperated by Visualization Lab of Zhejiang University and CCTV-13, which was very cool. Unfortunately, I can’t remember the name of the video.

In addition, visual analysis technology is an export restricted technology on the U.S. control list. I read the following words in the book Data Visualization by Professor Chen Wei:

China’s data collection, analysis and application should be independent research and development, and can not be allowed to be collected and processed by foreign monopoly companies, otherwise it will endanger national life and national defense security. It is urgent to study the basic theory and method of visual analysis in China, and the research of visual analysis in important fields such as national major projects, national security and national economy should be carried out independently.

Reminds me of WPS and Offic. And a little sense of mission.

I harvest

• With the development of hardware, the application of immersive visualization will gradually become more extensive, and AR/VR and other technologies will bring greater development space for visualization.

• Automation, intelligence and configuration semantics will lower the threshold of visualization, but it still needs a period of development time to be the same as the low-code, no-code field advocated by the industry.

• Visualization is getting closer to people’s life, such as the video co-produced by CCTV News 13 and Zhejiang University. More firmly take visualization as their development direction.

• Learn about the visual research process for solving a data structure: select the data structure -> define the design space -> form the syntax -> interactive interface -> visual exploration map. If you want to do something similar in the future, you have reference objects.

• I learned BCT and R-Map, two previously unknown tree visualization forms.

• It feels good to be in class at school

End~