Team: Sophia Deng, Kenta Takatsu, Cristina Zhao, Gregory Schultz
Project URL: http://gjs86.me/Salient/index.html
Youtube continues to be one of the most widely-used video sharing platforms in the world. Our visualization project aims to do cultural analysis through the consumption and sharing of popular YouTube videos. This is inspired by an interest in content consumption habits of countries all over the world and what it reveals about relationships between them. By analyzing the data, we hope to give users insight into similarities and differences between countries’ media interests.
The initial implementation of the world map was inspired by the migration map from Metrocosm. We explored different visual channels for the animation of the particles, particularly, velocity and intervals. Initially, we scaled the velocity of particles to show the frequency of diffusion; however this visual channel was difficult to identify since the distance between two countries are not related to our data, but still skewed the view of our visualization. In the final design, we scale the interval by literally sending the particles with smaller intervals for frequent diffusion. We also explored the use of d3.ease to manipulate the animation of particles so they look more “diffusing” across the world. We were able to create this effect by using polynomial ease, in which the particle accelerates near the source and decelerates near the end of the path. In the final design, however, we decided to use linear ease without acceleration since it was easier to interpret and it revealed some patterns that we were overlooking with polynomial ease.
Our heatmap went under several revisions to arrive at our final product. Initially, we wanted to compare each country to each other based on genre. We thought this would be a good way to compare the countries directly to each other and see how the differ in the different categories (music, news, tech, etc…). After doing some exploratory data analysis, we unfortunately found that most of the comparisons looked very much the same and it was difficult to understand any societal or cultural differences. Even after applying different levels of scaling, there was not enough of an easily recognizable difference for the visualization to have any merit. Going back to the drawing board, we broadened our scope and explored ways to compare all the countries to each other at the same time. This is how we landed on the singular, large heatmap that is on the visualization. We initially had a form of quantified sorting that differed than the default alphabetical view. However, we found the alphabetical view to have a very natural distribution and enabled the user to organically spot differences between countries, so we removed the sort and replaced it with the tooltip for comparison. We also tried out a logarithmic scale, but found that the distribution of red visually appeared better with the regular quantile scaling over the logarithmic. Overall, we picked a combination of factors that help to portray our message as well as appear visually stimulating to the user.
The last visualization is supposed to serve as a more in depth visualization of the world map. Initially, we wanted to show a stacked bar visualization that showed the percentage of videos that became popular from country X in country Y and vice-versa. For instance, if we are comparing the US and Brazil and the US had a total of 100 videos and 5 of them became popular in Brazil first, 95% of US’ bar is one color and 5% is the overlap. Similarly, if Brazil had 100 videos and 20 of them became popular in the US first, 80% of the bar is one color and 20% is the overlap. We presented this idea in our poster session but all the feedback that we received indicated that it was too confusing and not intuitive to understand. Instead, we pursued a design similar to a venn diagram, which is familiar to most people. We considered using circles and diamonds but we realized the bar venn diagrams were the most space efficient especially considering that we wanted to show the breakdown in different categories. The bars are currently sorted from the least overlap to most overlap, which means the order of the categories is different every time two new countries are selected.
We used Python to pre-process the data, topoJSON for the world map, d3 for implementation of the graphics, and bootstrap for the styling.
Our final design incorporates three visualizations at different levels of specificity, from broad to specific. The first is a very general overview of video propagation and where it happens on a global level. By toggling different source countries and observing for several seconds, viewers can tell that the particles streaming from a source country may tend to bundle towards a specific region, indicating a stronger relationship between the source country and the country(ies) in the receiving region. The primary visual channel that was utilized here was movement and distance. The second visualization reveals a different aspect of viral videos around the world – namely, how far they spread. When the user hovers over each square, they will see the number of videos originating from the country listed above the square’s respective column and how many other countries they became popular in. By observing this heatmap, users will notice that certain countries tend to “send” more videos than others – Uganda’s (UG) videos tend to only be more popular within Uganda (reach of one country means it is popular within that country), while videos from the United States (US) enjoy greater popularity around the world. The primary visual channel here is saturation/intensity. Our final visualization aims to reveal more about the relationships between two countries by illustrating direct overlaps (the white region representing videos that become popular in both countries) within each genre of YouTube video. For example, in our default visualization, the UK and the US demonstrate the most similarities in the Gaming genre. The primary visual channel here is length.
Each visualization, from top to bottom, primes the viewer for the message that the next visualization provides. We wanted the audience to be naturally curious about the nature of video propagation illustrated at the top, prompting them to interact with and read about the other parts of the website.
The map at the top was purposely designed at a very broad level in order to encourage users to discover more through the other visualizations on the page. Therefore, a tradeoff is that the user cannot zoom in towards each country to learn more about the specifics of its videos.