To answer the first design question,

data of 4,725 posts from weibo.com were collected.

I used API from Baidu AI open platform and processed the result to get the sentiment score between 0 and 1.

To answer the second design question,

data of 142 hashtags from weibo.com were collected.

However, many hashtags had similar content, so I categorized them.

The distribution of hashtag numbers over time indicates a strong correlation between hashtags and official reports.

It inspired me to sort hashtags and posts into following 8 groups.

To answer the third design question,

data of 97, 750 victims of human trafficking from CTDC were collected.

Samara seeds - posts

Like posts on social media, samara seeds represents freedom, are easy to spread and take root.

Wind - hashtags

Like public opinions, wind is intangible yet powerful and influential. This metaphor is consistent: wind carries seeds just as hashtags contain posts, and it also provides an image of freedom.

Data

This visualization part used the data from 4,725 posts.

Encode post data into seed glyph

I started by sorting out the post attributes by their information importance.

To begin with, I answered "who were influencers of this incident?" by mapping according attributes to the seed glyph and making influential posts more visually dominant.

Then I played with different parameters on real data utilizing d3.js. This is what I got:

To answer "what voices were made in different stages?", I used the post time, hashtag groups and sentiment to map seeds layout. My sketch looks like:

After applying real data, I found that the glyphs from the same hashtag groups were overlapping when posts had similar sentiment and were posted at the similar time.

Therefore I applied a repulsive force by d3.js to push the overlapping glyphs apart.

Data

This visualization part used the data from 142 hashtags.

Similarly, I began by grouping and sorting attributes.

Then I brainstormed the appearance of wind, and was inspired by this amazing work of wind visualization from Google's "Big Picture" data visualization group. Therefore, I decided to present wind glyph also with CURVES.

I also sketched possible visual channels and mapping rules of the wind.

Mapping create time & active time duration, hashtag group, and average sentiment were similar as seeds layout.

The huge challenge is to map no. of views, originals, and discussions; it’s difficult to encode these attributes into a simple wind curve that contains three visual channels.

This is one solution I tried:

After applying real data, I found these three attributes can be reduced to one with a conclusive representation of "public influence". Then I encoded it into one visual channel: curve shape.

And there it goes! This is my result of visualizing the overview of public opinions: an angry wind.

Data

This visualization part used the data from 97,750 victims of human trafficking (from CTDC).

Sketch

In order to tell a consistent visual story, I still used the glyph of wind, which is the metaphor of public voices.

Larger wind glyph indicates more human trafficking cases, which implies more awareness, public voice and action are needed.

Result

One wind glyph represents one country with human trafficking case(s). Then I realized that I can group the cases by the geographies of the countries.

So I tried KMeans clustering algorithm and different calculation methods for clustered centroid.

clustered centroid equals:

However, this algorithm sometimes might produce unreasonable results.

Eventually, I decided to group the cases by continents.

In the design process, I found that it was difficult to observe micro and macro features of seed glyph at the same time.

When zoomed in to the details, the user would lose the big picture of the visualization; when zoomed out, the user could not clearly perceive the details and interact with each glyph.

Solution

I wanted to use Focus + Context technique, which allows interactive exploration of an area of interest (the focus) in greater detail, while preserving the surrounding environment (the context).

Eventually, I decided to use a fisheye distortion technique to the layout, which magnifies the local region around the mouse, while leaving the larger graph unaffected for context.

In seed glyph layout and wind glyph design, Y-axis and X-axis of the web page were used to represent timeline respectively, which might confuse readers.

Option A

Map Y-axis of wind glyph into timeline.

Hmm... wind blowing downwards... A bit counterintuitive

Option B

Map X-axis of seed layout into timeline.

when there's a burst of posts at the same time, seeds tend to fall into the scope of other hashtag groups

Option C - My Final Solution

Eventually, I used animation to convey the transition in mapping from X-axis to Y-axis. This is also like the wind is blowing.

X-axis: timeline

X-axis: timeline

Y-axis: timeline

Y-axis: timeline