Link
http://vis.pku.edu.cn/grand_canal_migration/#/
INTERACTIVE DESIGN RESEARCH ON SPATIOTEMPORAL VISUALIZATION 2021.11-2022.04
The CBDB biographical database contains 370,000 pieces of data on Chinese historical figures, and can query relevant information such as birthplaces, places of study, official addresses, parents, relatives, and social relations of historical figures. However, this database lacks visualization, making it difficult for scholars to study it. This project hopes to visualize the location information of the characters in the CBDB, and display the overall situation of the geographical trajectory of ancient Chinese celebrities through interactive timelines and maps. It aims to help historical and humanistic researchers to study the geographical distribution and historical evolution of ancient figures.
Team Project
Yuchu Luo, Chen Li, Yuan Ma, Mingxuan Li, Xinyue Wang, Xiaoru Yuan
Role
Interaction Design, Visual Design
Supervisor Xiaoru Yuan
HTML
CSS
D3.js
SQLite Studio
01 DATABASE
02 DATA EXAMPLE
03 DATA ANALYSIS The distribution of people with more than 10 transfer records in each dynastya. 1
1894
1000 Number of characters
220
100
10
The China Biographical Database is a freely accessible relational database with biographical information about approximately 521,442 individuals as of August 2022.2
[2] China Biographical Database Project (CBDB)
Spatial Distribution It shows the spatial distribution of a cross dynastic subset of 190,000 people in CBDB by basic affiliations.
7th -9th Time Span Primarily from the 7th through 9th centuries. With both online and offline versions, the data is meant to be useful for statistical, social network, and spatial analysis as well as serving as a kind of biographical reference.
1
Name
2500
2
Dynasty
2000
3
Lifetime
4
Trajectory
4.2 Y_coord 4.3 Name 4.4 Year
5
4
4
2 1
1
Sui Tang Wudai Shiguo Song Yuan Ming Qing
Dynasty
Frequency of “visit to location” in 152 person trajectories.
2277
1500 1000 500
4.1 X_coord
4
2
Visit to locations
Individual
190,000
7
6 2
1
521,442
13
9
475 172
0
1
Motivation
45 33
5
28
17
11
10
The database lacks some information, and effective data can be obtained through data cleaning.
2
11
4
2
3
15
Conclusion
1
20
Frequency
After data cleaning, we can obtain thousands of pieces of character migration information.
04 MIGRATION EXAMPLE
05 TIME VISUALIZATION 1
06 SPACE SCALE 1/ Province
Time-Brightness Last route
First route
2
Frequency-Thickness nth route
| Strock n*3pt
Third route
| Strock 9pt
2/ City
Second route | Strock 6pt First route
3
Time The mobility and travel of ancient people were influenced by age and time.
Space
Map
Ancient people had a wide range of mobility, involving different locations.
The movement of ancient people is interwoven and mutually influenced in terms of time and space.
| Strock 3pt
Frequency-Size nth visit
| d-n*10pt
First visit
| d-10pt
Second visit
| d-20pt
Third visit
| d-30pt
Expectation
The chart aims to help user gain a clearer understanding of the movement patterns and activity characteristics of ancient people.
3/ Individual
Motivation
Trajectory visualization will play an important role in academic research, educational presentations, and other fields.
Conclusion
Tr a j e c t o r y v i s u a l i z a t i o n helps researchers to better understand the movement patterns and activity characteristics of ancient people.
07 POPULATION VISUALIZATION 1
1/ Family members
Color mapping-population
Different color saturation
2
08 RELATIONSHIPS VISUALIZATION
Density map
Density map - color 1
Migration track D
E L
J
A
L
C
B K
F H
A
Density map - color 4
A I
J
H F
G All migration at the provincial level
Using a graph to display family relationships or organizational hierarchies, the tree diagram arranges individuals in a hierarchical structure, starting from the top level and showing the relationships between individuals.
K
J
I
All migration at the nation level
Density map - color 3
K
F
G
3
Density map - color 2
Visualization
G H Partial migration at provincial level
2/ Click to expand
Interaction
3/ Slide to expand
Conclusion
I
Users can collapse the expanded n o d e s by c l i c k i n g o n t h e m, returning to a higher-level view. The collapse operation helps simplify complex charts and focus on higher-level relationships.
Density map
Province center point
Migration between points
Add map
Add density
Density Map
Visualizing interpersonal relationships can help us gain a clearer understanding of complex networks of interpersonal connections, such as social networks, family relationships, and historical events involving individuals.
08 USER INTERFACE
09 SCRIPT HTML
10 INTERACTION CSS
D3.js
1/ Choose people and time
SQLite Studio
Selecting people and time as the first step, generating relevant paths automatically.
Procedural assets
2
View dynamic information visualization
2/ Click to expand
The second step is to click and expand the paths of ancient people’s movements.
1 Interactive steps
migration.js
Java script
character.js
dataLoader.js
Procedural assets
Us in g p r o c e dural di git al as sets to batch produc e character animations.
Java script
Using JavaScript to build a website and visualize the movement trajectories of ancient people.
2022.08 Exhibited in Zhejiang Art Museum
Click
11 ALGORITHM
12 USER EXPERIENCE
Algorithm The algorithm displays the hierarchical relationships among academic schools based on their inheritance relationships.
Backgound
Using Song Dynasty paintings as a background to demonstrate the inheritance relationship of academic schools in accordance with the context.
1
Index
2
Single migration
3
Inheritance
Arrange the assets according to the order of inheritance Inheritance in order
Random position
Overview
Detail
Guidance
Guidance
Graph
Page segmentation
Conclusion
Design user interface and page relationships based on scenarios such as overview, details, and diagrams.
Inheritance relationship
Relationship between characters