視圖可視化 后臺

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.

我們在處理大型數據集時遇到了這樣的挑戰，該數據集包含了大型資產管理公司10年的股東投票。 這是我們處理該項目的方式，歡迎任何建議和反饋。

如何在單視圖中可視化復雜的多層主題 (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.

我們的數據集的簡短摘要：指數基金投票贊成該基金所持股票。 我們查看了其中最大的基金經理的投票數據。 我們對金融業的可持續性充滿熱情，因此我們很想知道是否能在過去十年中發現三大基金經理之間的差異以及他們對環境，社會和治理(ESG)主題提案的投票行為的變化。

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.

受先前的研究發現了股東集中度和投票模式的較大趨勢的啟發，我們在單個基金的基礎上收集了詳細數據，以探索更全面的觀點。 我的同事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:

其次，我們致力于制定一系列目標，并定義了哪些見解一見鐘情。 由于之前(據我們所知)尚未對個人基金票數進行過如此詳細的分析，因此我們主要希望查看四個分布：

Is there any difference in support across the three biggest asset managers BlackRock, Vanguard and State Street?

三大資產管理公司貝萊德，先鋒和道富之間的支持是否存在差異？

Do funds support proposals in the three ESG categories, Environmental, Social and Governance, differently?

做資金支持三個ESG類提案，E環境中的物體，S ocial和G overnance，不同？

Do larger funds (or funds that vote more often) show a similar voting pattern as funds that vote less often?

大型基金(或投票頻率較高的基金)是否表現出與投票頻率較低的基金類似的投票模式？

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.

對我們來說，ESG類別是第一個也是最重要的切入點，因此我們將它們安排為x軸頂部圖的主要劃分。 此外，類別還用顏色進行了編碼：從視覺上強調我們分析的角度。

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.

考慮到移動設備上的縱向視口，我們希望使用y軸來顯示對基金投票的提案的相對支持。 對于移動設備，其想法是水平滑動一次查看一次一個ESG類別。 我們在圖的左側添加了可刷寫的直方圖，以放大到y軸上特定的關注區域。

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.

為了更細致地了解數據，每個圓圈的大小代表與同一個ESG類別中投票最多的基金相比投票的頻率：如果75％的支持代表四分之三的支持，則該支持的權重更大如果是100票中的75票。

Final result: Screenshot of the first view of the graph a reader sees on the Fund Checker website.最終結果：讀者在Fund Checker網站上看到的圖形的第一個視圖的屏幕截圖。

我們的側面板：組織讀者一次可以訪問哪些信息和交互 (Our side panel: organizing what information and interaction the reader can access at a time)

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.

側面板具有多項功能，這些功能我們放在圖表旁邊，但在視覺上是分開的。 第一個選項卡專用于圖例，我們在其中描述了如何讀取圖形。 目前，“ 重點摘要”標簽上有兩個示例，分別針對Facebook和Google上存在爭議的治理問題以及對ESG建議最支持的基金排名。 我們在第三個標簽中實現了搜索和比較功能，該功能顯示了提案級別的數據，并比較了最多兩個基金的票數。

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.

我們還添加了一些可以通過“ 設置”標簽訪問的數據的替代視圖。 除了某些過濾選項(特定的基金經理，以ESG為重點的基金)之外，您還可以激活一種以力為導向的布局，避免重疊，并折疊基金經理的細分以查看ESG類別的總體比較。

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.

我們最關注的反饋是將垂直軸確定為主要分析水平，以比較ESG類別中的資金支持。

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.

在下一個迭代中，性能也可以并且將得到提高：我們最終能夠抓取比我們最初想象的更多的數據，并且可能希望將圖形從DOM移至基于畫布的渲染 。

替代方法和下一步 (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.

一種方法是放棄側面板，并在其他UI元素中表示其目的。 我們可以通過對軸進行更具描述性的標記來解決圖例的較大部分。 我們正在考慮翻轉圖表，希望不同基金的支持比較更加清晰。

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.草圖：在y軸上使用交互式方法進行層次結構可以更直接地比較基金經理。

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.

對于我們的某些測試讀者而言，最引人注目的比較是基金經理之間而不是ESG類別之間的比較。 我們正在考慮為讀者提供切換層次結構級別的選項，但是我們認為，只有簡化整個界面，才可以添加該功能。

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.

我們希望分享我們的過程對其他人有幫助。 我們從該項目中學到了很多東西，花一點時間進行反思通常可以幫助我們應對新的挑戰。 我們很想聽到更多反饋和評論。 如果您對此項目或類似項目感興趣，我們歡迎新的合作伙伴。 隨時聯系LinkedIn 。 您可以在此處查看生活項目 。 在我的數據可視化產品組合中找到我的其他作品和項目。

翻譯自: https://medium.com/nightingale/how-we-visualized-a-data-set-that-contains-many-messages-d8318bdc9acf

視圖可視化 后臺

總結

以上是生活随笔為你收集整理的视图可视化 后台_如何在单视图中可视化复杂的多层主题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。