How We Visualized a Data Set That Contains Many Messages

Guiding the reader through 10 years of shareholder votes

At the beginning of a data visualization project we often set contradictory goals. We have to prioritize. The clearer the vision of the balance we want to create, the better our results.

Sometimes a dataset can tell many stories. Trying to show them all in a single visualization is great, but can be too much of a good thing. How do you avoid information overload without oversimplification?

We faced just such a challenge while working with a large dataset featuring 10 years of shareholder votes from big asset managers. Here’s how we approached the project, and any suggestions and feedback are welcome.

How to visualize a complex multi-layered topic in a single-view

Short summary of our data set: Index funds vote as shareholders for the stocks held by the fund. We looked at voting data by the largest of these fund managers. We are passionate about sustainability in finance, so we were curious to see if we could find differences amongst the three biggest fund managers and changes in their voting behavior for proposals on environmental, social and governance (ESG) topics over the last ten years.

Motivated by previous research that has identified larger trends in shareholder concentration and voting patterns, we collected the detailed data on an individual fund basis to explore a more comprehensive perspective. There is more information about the context of the dataset in this post by my colleague Isabel Verkes.

Our challenge: Prioritizing perspectives on our data set

First we had to decide whether we wanted the visualization to be a narrative one, or provide an exploratory experience for the reader. We decided to go down an exploratory path since the data we collected provides insights from a variety of different angles.

Second we committed to a set of goals and defined which insights should be made available at first sight for the viewer. Since such a detailed analysis of individual fund votes hasn’t been done before (as far as we know), we mainly wanted to see four distributions:

1. Is there any difference in support across the three biggest asset managers BlackRock, Vanguard and State Street?
2. Do funds support proposals in the three ESG categories, Environmental, Social and Governance, differently?
3. Do larger funds (or funds that vote more often) show a similar voting pattern as funds that vote less often?
4. What is the average support of all funds in the three categories?

Building the wireframe and establishing hierarchies

At this stage, we mainly designed this for a desktop viewport and decided to split the screen showing the visualization on the left and a tab interface for the legend and additional options to explore the graph.

Annotated screenshot of the visualization – our layout approach

For us, the ESG categories are the first and most important entry point, so we arranged them as the main division of the graph on top of the x-axis. Additionally the categories are color-coded: to visually emphasize this angle of our analysis.

Our second interest is a comparison between fund managers. We decided to subdivide the horizontal space in sections for each manager. The subdivision for the managers is optional and can be deactivated in the side panel.

With a portrait viewport on mobile in mind we wanted to use the y-axis to show the relative support for the proposals a fund voted on. For mobile devices, the idea is to swipe horizontally to see one ESG category at a time. We added a brushable histogram on the left of the graph to zoom to specific areas of interests on the y-axis.

To get a more nuanced view of the data, the size of each circle represents how often a fund voted compared to the fund with the most votes in the same ESG category: A 75% support weighs heavier if it represents three out of four votes than if it is 75 out of 100 votes.

Final result: Screenshot of the first view of the graph a reader sees on the Fund Checker website.

Our side panel: organizing what information and interaction the reader can access at a time

Screenshot with the Highlights tab of the side panel open

The side panel serves multiple functions that we put close to the graph, but visually separated. The first tab is dedicated to legend where we describe how to read the graph. Currently the Highlights tab features two examples for a contested governance issue at Facebook and Google and a ranking of the funds that are most supportive of ESG proposals. We implemented a search and a comparison function in the third tab which shows the data on a proposal level, and compares the votes of up to two funds.

Screenshot of the Search & compare tab – This functionality probably deserves its own view in the next iteration

We also added some alternative views of the data that can be accessed via the Settings tab. As well as some filtering options (specific fund managers, ESG-focused funds), you can activate a force-directed layout which avoids overlaps, and collapse the subdivision by fund managers to see the overall comparison across the ESG categories.

Various filters and a force-directed layout are available in the Settings tab

Evaluation and feedback

Early in our own process we realized that our approach will be tailored to an audience that knows the basics and has some context to our topic.

For this group, we thought it would be best to have all interaction bundled on a single screen, so readers can explore for themselves. The tradeoff is information overload for a general audience. The concept is also more difficult to translate to a mobile viewport — not a priority but would be nice to have in the future.

Feedback that we’re most concerned about has been about identifying the vertical axis as our main level of analysis comparing the support of funds in the ESG categories.

Performance can and will be improved in the next iteration as well: we ended up being able to scrape more data than we initially thought, and probably want to move the graph from DOM to canvas-based rendering.

Alternative approaches and next steps

For the next iteration we are currently thinking about alternative layouts. Our main goal is to make the visualization more accessible to non-experts without sacrificing detail and exploration options for a more invested audience.

Sketch for a horizontal layout, labels could resolve some of the tasks of the legend

One approach would be to give up the side panel and represent its purposes in other UI elements. We could resolve larger parts of the legend by a more descriptive labeling of the axes. And we are thinking about flipping the graph, hoping the comparison of support by different funds will be clearer.

An introductory scrolly-telling section could familiarize the reader with the graphs and also provide a quick narrative overview.

The search and compare function grew beyond our initial plans, and we think it deserves its own screen now.

Sketch: An interactive approach to the hierarchy on the y-axis would allow a more direct comparison of fund managers.

For some of our test readers the most compelling comparison was between fund managers instead of ESG categories. We are considering giving the option to the readers to switch the hierarchy level, but we believe it is only sensible to add that functionality if the overall interface is simplified.

Wherever possible it would be nice to integrate the different “settings” of the graph at intuitive points of interaction (for example hovering over a fund manager label filters the view for that manager).

Feedback

We hope sharing our process is helpful to others. We learnt a lot from this project and taking a moment to reflect generally helps us going into new challenges. We’re very curious to hear more feedback and comments. If you are interested in this or similar projects we’re open to new collaborations. Feel free to reach out on LinkedIn. You can check out the life project here. And find my other works and projects on my data visualization portfolio.