A BRIEF HISTORY of Network VISUalizations


Lab Reports, Timelines, Visualization

INTRODUCTION

On an average day in 2019, people around the world sent 500 million tweets, wrote 294 billion emails, and posted 545 million photos and videos on Facebook and Instagram. Combined with GPS data from phones and smart devices, this data gives us the opportunity to understand human interaction on an unprecedented scale. Many sociologists and scientists have turned to network visualizations to parse these vast troves of data, hoping that from the web of connected individuals we can learn something about the development of opinions, norms, and (mis)information. While the size of these visualizations has certainly increased exponentially over the past decades, in this timeline I attempt to demonstrate how the underlying methodology remains the same. Indeed, the building blocks of social network diagrams – representing humans as nodes and their relationships as connecting lines – has century old roots in genealogy. In my work, I trace the network visualization from the private to the public sphere, and demonstrate how the invention of the computer expanded upon decades of existing scientific and artistic theory to enable the visualizations we have today.

PROCESS

I used TimelineJS to create the visualization. This tool uses Google Sheets as a simple user interface for creating interactive timelines. Each row of the spreadsheet maps to a different slide of the timeline, and each column maps to an optional attribute of that slide. The tool has the capability to add multimedia, a title, and an explanatory paragraph to each slide. The multimedia can be placed in the slide background or next to the text, and the slide background color is customizable.

Template for TimelineJS on Google Sheets

Before building the timeline, I dug into the existing work on the history of network visualization. I used the following three pieces to better understand the field and choose events for my timeline:

  1. Pfeffer J., Freeman L.C. (2019) Social Network Visualization, Methods of. In: Meyers R. (eds) Encyclopedia of Complexity and Systems Science. Springer, Berlin, Heidelberg. http://www.pfeffer.at/data/visposter/

  2. Moody, James (2018) Network Visualization, Duke Network Analysis Center. https://www.slideshare.net/dnac2017/07-network-visualization

  3. Tabassum, Shazia & Pereira, Fabiola & Fernandes, Sofia & Gama, João. (2018). Social network analysis: An overview. Wiley Interdisciplinary Reviews: Data Mining and Knowledge Discovery. 8. e1256. 10.1002/widm.1256. https://www.researchgate.net/publication/324575362_Social_network_analysis_An_overview

As all three sources identified Jacob Moreno’s 1938 work as a pivotal moment in the development of network visualizations, I decided to orient my timeline with this in the middle as a point of inflection. I tried to further emphasize this event by making sure the events following it directly related to Moreno’s work, capturing the fact that his publications spurred a dialogue in the academic community.

I drew inspiration from this TimelineJS example on user interfaces. In particular, I appreciated the incorporation of events such as the Jacquard Loom which are not directly related to the subject at hand, but which provide important technological context. I thought this helped the viewer better grasp the significance of major breakthroughs later in history. Drawing form this, I decided to include both the invention of the graphical interface and the founding of major social media companies in my timeline.

Slide from Northwestern University Knight Lab TimelineJS Example

To develop the descriptive paragraphs on each slide I drew both from the primary source articles that the visualizations came from and secondary analyses of their work. I’ve listed these sources at the bottom of this documentation.

When visualizations that I wanted to use in my slides were part of non-html archives I took screenshots of them, cropped them in Google Drawings, and hosted the exported images on Flickr. This is because TimelineJS requires all multimedia to be hosted at a URL (ie. not stored locally and then uploaded).

RESULTS

Throughout the creation of my timeline I made a number of design choices:

  • Title slide background: I chose a visualization of the global Twitter network as the background for this title slide because I wanted something that alluded to the events that my timeline was building to. I could have chosen a more mathematically compelling visualization in which the nodes of the network are visible, but deliberately selected a higher level view to make the timeline more accessible to a general audience. I wanted to make sure that this slide conveyed the awe inspiring scale of our social data today, and thought that the contrast of the sweeping colors on the dark background did a good job of this. I thought that the minimalistic aesthetic of this image made it clearly modern, which provides a sharp contrast with the following slide which is a genealogical painting. I wanted this contrast to create the effect of traveling in time as the viewer moves from the title slide to begin their journey through the narrative.

  • Background color: I decided to keep the background black for all slides. This followed from two factors: a) that the background of my title slide was black and b) that I wanted each slide to build on the previous. It seemed that a change in color between each slide would jar this sense of continuity. I could have designed the background slides to progress through a gradient, but this would have had to be a grayscale since the first slide is black, and would have made the text hard to read in the middle grays. Thank you to Chris Sula for walking me through this logic.

  • Content: My narrative is summarized by my title slide:

While the advent of powerful computing and social media has enabled the study of human interactions at an unprecedented scale, humans have used spatial diagrams to understand society for many centuries.

Through my selection of specific events and explanations on each slide, I tried to tackle four main sub-points that build to this thesis:

  • The building blocks of network visualizations (ie. shape/size/color of nodes and weight/direction of lines) have been around for centuries.
  • Network visualizations have been used as a tool within sociological research since the early 1900s.
  • Methodologies for how to meaningfully and rigorously arrange nodes in a network, the same issue that modern algorithms tackle for big data networks today, pre-date computers.
  • The invention of the computer and proliferation of social media organizations has expanded upon these methodologies in a way that enables analysis at a scale never seen before.

REFLECTION

This project highlighted for me how a visualization technique which seems so modern, is actually quite old. I was particularly interested to read about how the theory behind node organization has evolved over time, and how complex algorithms that use solve radial optimization problems have roots in pen and paper strategies that used circular methodologies. If I were to expand on this project I would want to find a way to make this link between modern algorithms and older strategies more accessible to a non-technical audience. In particular, I think that the force-directed network slide would have a lot to gain from interactive multimedia that demonstrated how the simulation works and how it produces visualizations that follow the same principles of older pen-and-paper mathematical strategies. I did look for existing YouTube videos of this simulation, but found them all to be quite dense for a general audience.

I also would consider using a different timeline visualization tool. I thought that TimelineJS was a remarkably effective out-of-the-box tool, but found some aspects frustratingly inflexible. For example, I wished that I could have changed the font color and text positioning, or added captions to the background image in the bottom right hand corner of the slide. Overall though, I found TimelineJS to be a powerful tool with an intuitive user interface.

REFERENCES

SLIDE IMAGES

RESEARCH

  • Bjerstedt, A. (1952). A “Chess-Board Sociogram” for Sociographic Representation of Choice Directions and for the Analysis of “Sociometric Locomotions”. Sociometry, 15(3/4), 244-262. doi:10.2307/2785738
  • Lundberg, G., & Steele, M. (1938). Social Attraction-Patterns in a Village. Sociometry, 1(3/4), 375-419. doi:10.2307/2785589
  • Jennings, H. (1941). Sociometry and Social Theory. American Sociological Review, 6(4), 512-522. Retrieved September 4, 2020, from http://www.jstor.org/stable/2085934
  • Nehnevajsa, J. (1955). Sociometry: Decades of Growth. Sociometry, 18(4), 48-95. doi:10.2307/2785845