追求卓越追求完美規范學習_追求新的黃金比例

追求卓越追求完美規范學習

The golden ratio is originally a mathematical term. But art, architecture, and design are inconceivable without this math. Everyone aspires to golden proportions as beautiful and unattainable perfection. By visualizing data, we challenge ourselves to strike a balance between design and analysis; finding a similar harmony in the visual perception of a graph much like the harmony of the golden ratio in the world around us. How do we bring numbers and dry logical conclusions to life? How do we get them to tell a fascinating story without losing its meaning? Perhaps we can consider this the “new” Golden Ratio.

黃金比例最初是一個數學術語。 但是,沒有這種數學,藝術,建筑和設計是不可想象的。 每個人都渴望獲得美麗和無法達到的完美的黃金比例。 通過可視化數據,我們挑戰自己,在設計和分析之間取得平衡。 在圖形的視覺感知中找到相似的和諧,就像我們周圍世界的黃金比例的和諧一樣。 我們如何將數字和干燥的邏輯結論帶入生活? 我們如何讓他們講一個有趣的故事而又不失去其含義? 也許我們可以認為這是“新的”黃金分割率。

In search for the answers to these questions, I investigated the best examples of modern data visualization by searching through the category “Greatest” in the Tableau Public gallery of works. The work “How Safe Are Ivy League Schools?” by authors Alex Dixon & Tarannum Ansari caught my eye. The authors asked the non-standard question: How safe is it to study at Ivy League universities?

在尋找這些問題的答案時,我通過在Tableau公共作品庫中搜索“最偉大”類別來研究現代數據可視化的最佳示例。 常春藤聯盟學校有多安全? ”作者Alex Dixon和Tarannum Ansari引起了我的注意。 作者提出了一個非標準的問題: 在常春藤盟校學習安全嗎?

For those unfamiliar, the Ivy League is an association of the eight oldest American universities — often used as a shorthand for prestigious higher education in the United States. To answer their question, the authors used open data on the website of the US Department of Education.

對于那些陌生的人來說,常春藤聯盟是美國八所最古老大學的協會,通常被用作美國享有聲望的高等教育的簡寫。 為了回答他們的問題,作者使用了美國教育部網站上的開放數據。

Despite the age of the visualization (it was released in 2017 and features data from 2001–2014), I decided to choose this piece for my investigation of the balance between analysis and visual design. I believe that paying attention to nuances that can confuse users is the best way to learn how to avoid misleading context in my own work, as well as to discuss differences in perception with other specialists.

盡管可視化的年代很久(它于2017年發布,并具有2001-2014年的數據),但我還是決定選擇此作品來調查分析與視覺設計之間的平衡。 我認為,關注可能使用戶感到困惑的細微差別是學習如何避免在我自己的作品中產生誤導性上下文以及與其他專家討論看法差異的最佳方法。

Image for post

報告格式 (Report Layout)

At first glance, it’s pleasing that the visualization is made with the ideology of a dashboard — on one screen without scrolling. Three vertical logical blocks are highlighted:

乍看之下,令人愉悅的是,可視化是通過儀表板的思想進行的–在一個屏幕上無需滾動。 突出顯示了三個垂直邏輯塊:

  • for administrative violations,

    對于行政違規,
  • for administrative penalties,

    對于行政處罰,
  • for criminal offenses.

    刑事犯罪。
Image for post
The “How Safe Are Ivy League Schools?” dashboard
“常春藤聯盟學校有多安全?” 儀表板

Vertical blocks are united by a horizontal strip at the top: eight logos and the short names of the universities. The logos make it possible to reference the universities throughout the dashboard without having to rely on the written name. The logos also work as filters: by clicking, you can select the desired university and view only its information.

垂直塊由頂部的水平條組合在一起:八個徽標和大學的簡稱。 徽標使您可以在整個儀表板中引用大學,而不必依賴書面名稱。 徽標也可以用作過濾器:通過單擊,您可以選擇所需的大學并僅查看其信息。

Under the logos there is a time slicer by years — you can select the period of interest and the data will update accordingly. Traditional and understandable visual solutions are used for visualization:

徽標下有一個按年劃分的時間切片器-您可以選擇感興趣的時間段,數據將相應地更新。 傳統且易于理解的視覺解決方案用于可視化:

  • bar chart,

    條形圖
  • filter with a choice from the drop-down list,

    從下拉列表中選擇一個選項進行過濾,
  • heat chart,

    熱圖,
  • area diagram.

    區域圖。

字體和配色方案 (Fonts and Colors Scheme)

The authors use fonts very skillfully: two catchy bold fonts are chosen for the headers and a concise, well-read sans-serif font for the description and numbers.

作者非常熟練地使用字體:標題選擇了兩種醒目的粗體字體,描述和數字選擇了簡潔易讀的sans-serif字體。

The color scheme is a harmonious combination of milky cream and green (perhaps as a reference to the color of ivy leaves). While from a design standpoint this color palette is quite pleasing, it raises a few questions for our inner Analyst. For many people green is intuitively perceived as positive — the greener the better. Accordingly, a saturated green color should indicate a more positive situation (low level of danger). As a result, some users may potentially be confused due to the choice of this palette.

配色方案是乳白色和綠色(可能是常春藤葉顏色的參考)的和諧組合。 從設計的角度來看,此調色板非常令人滿意,但它給我們的內部分析師帶來了一些問題。 對于許多人來說,綠色在直觀上被認為是積極的-綠色越好。 因此,飽和的綠色應表示更積極的情況(危險程度低)。 結果,由于選擇此調色板,某些用戶可能會感到困惑。

In addition, the heat map visualizations have a somewhat confusing color logic, which leads to color and data conflicts. For example, the data for Cornell University is distributed as follows:

此外,熱圖可視化還具有一些令人困惑的顏色邏輯,從而導致顏色和數據沖突。 例如,康奈爾大學的數據分布如下:

  • 100–200 offenses — standard green,

    100–200次進攻-標準果嶺,
  • 200–500 offenses — light green color,

    200–500次進攻-淺綠色,
  • over 500 offenses — dark green color.

    超過500次進攻-深綠色。
Image for post
Source)來源 )

What could make the Analyst feel a little more comfortable? Perhaps adding an alternative red spectrum color to the report to create a transition between negative and positive. And this color exists. The Ivy League has several signature colors and one of it — Harvard crimson — just the “crimson” shade we need.

是什么讓分析師感到更舒服? 也許在報告中添加其他紅色光譜顏色以在負值和正值之間創建過渡。 并且這種顏色存在。 常春藤盟軍有幾種標志性的顏色,其中之一是哈佛深紅色,這正是我們需要的“深紅色”色調。

Please note: This solution is not the best for all people due to color vision deficiency (CVD). It is just one of the suggestions to make the visualization more clear, though one should always check to ensure a viz is using colorblind-friendly palette to avoid misunderstandings due to color perception (for example, Color Blindness Simulator)

請注意:由于色覺不足(CVD),此解決方案并非對所有人都適用。 這只是使可視化效果更清晰的建議之一,盡管應該始終檢查以確保可視對象正在使用對色盲友好的調色板,以避免由于色覺而引起的誤解(例如,“ 色盲模擬器” )。

可視化:分析師感到困惑 (Visualization: The Analyst is Confused)

As already mentioned, simple and intuitive graphs have been chosen for the visualizations. The authors brilliantly managed to reflect a large amount of data without excessive fragmentation and visual weight. Pop-up tips played a significant role — there are lots of them and they are quite informative.

如前所述,為可視化選擇了簡單直觀的圖形。 作者出色地設法反映了大量數據,而沒有過多的碎片和視覺負擔。 彈出提示起著重要作用-其中很多提示都非常有用。

However, there is an ambiguous logic in the choice of the measurement which crosses out all the ease of the visual perception for the Analyst. The authors chose absolute values as the unit of measurement: the total number of violations or offenses. It seems to me that it’s not entirely informative to use absolute values in such studies.

但是,在選擇度量時存在一個含糊不清的邏輯,這種邏輯與分析人員的所有視覺感覺都難以相提并論。 作者選擇絕對值作為度量單位:違法或違法的總數。 在我看來,在此類研究中使用絕對值并不完全有益。

For example, 691 law violations were committed at Cornell University in 2014 — is this a lot or a little? It seems to be a lot. That same year there were only 386 violations at Dartmouth College. It looks like things are really going bad at Cornell University after all, doesn’t it? Moreover, the current logic of the heat map tells us this too— Cornell University is shown with darker green than Dartmouth College.

例如,2014年在康奈爾大學犯下了691起違反法律的行為-是多少? 似乎很多。 同年,達特茅斯學院只有386起違規事件。 畢竟,康奈爾大學看起來真的真的很糟糕,不是嗎? 此外,熱圖的當前邏輯也告訴我們這一點–康奈爾大學的綠色深于達特茅斯學院。

Image for post
Source)來源 )

But this conclusion may be wrong. To fully understand the situation, I would recommend taking into account the total number of students. And the authors have this data — when you hover over the histograms (left visual block) informative tips with this data for each university appear.

但是這個結論可能是錯誤的。 為了充分了解這種情況,我建議考慮學生總數。 作者擁有這些數據-當您將鼠標懸停在直方圖(左圖塊)上時,就會出現每所大學的數據提示性提示。

So, 691 law violations occurred at Cornell University, which has 21,679 students, and 386 law violations occurred at Dartmouth College with 6,298 students. That’s 31.9 law violations per 1,000 students at Cornell University and 61.3 law violations per 1,000 students at Dartmouth College — with a convincing advantage… Cornell University wins!

因此,康奈爾大學發生了691起違反法律的行為,有21,679名學生,達特茅斯學院發生了386起違反法律的行為,有6,298名學生。 這就是康奈爾大學每1,000名學生違反法律的31.9例,達特茅斯大學每1000名學生違反法律的11.3項–具有令人信服的優勢……康奈爾大學獲勝!

The authors do attempt to compensate for this difference in volume in the bar graphs on the left, which use thickness to designate the number of students. However, this makes the visual less readily understandable at a glance and adds more cognitive load to the reader.

作者的確嘗試補償左側條形圖中的音量差異,該條形圖使用厚度來指定學生人數。 然而,這使視覺一眼就不易理解,并給讀者增加了更多的認知負擔。

Image for post
Source)來源 )

Our internal Explorers also lacked clear color legends — at least one for each block. Finally, the Analytist tore up something else about the horizontal scale for heat maps — because it was only from the prompts that he could understand that there is aggregate year-by-year data for each of the universities.

我們的內部資源管理器也缺少清晰的顏色說明-每個塊至少一個。 最后,分析家對熱圖的水平比例進行了其他修改,因為只有從提示中他才能了解每所大學的年度匯總數據。

Image for post

您批評-您提供! (You Criticize — You Offer!)

This report has deservedly entered the category “Greatest” in Tableau — the authors set a fairly complex and voluminous task and have effectively realized it. If it wasn’t for the mentioned remarks on the measurement logic and color choice, the report would be almost flawless from the user’s point of view.

該報告當之無??愧地進入了Tableau的“最偉大”類別-作者設定了一個相當復雜和繁瑣的任務,并有效地實現了這一目標。 如果不是針對測量邏輯和顏色選擇的上述說明,那么從用戶的角度來看,該報告幾乎是完美無缺的。

At the same time, we don’t necessarily get the answer to the basic question: how safe is it to study in the Ivy League? Trying to answer, our Analyst suggested the report be supplemented with a consolidated safety indicator for the entire Ivy League, also normalized to provide the data in the form of a percentage of events per 1,000 students. Our Designer enthusiastically released all that. The result of their collaborative search for the new golden ratio is this visualization:

同時,我們不一定能回答基本問題: 在常春藤聯盟學習安全嗎? 為了回答這個問題,我們的分析師建議為報告添加一個針對整個常春藤聯盟的綜合安全指標,并進行標準化,以每1000名學生事件百分比的形式提供數據。 我們的設計師熱情地發布了所有這些內容。 他們共同尋找新的黃金比例的結果是這種可視化效果:

Image for post
A new variant of the same dashboard (Courtesy of the author)
同一儀表板的新變體(由作者提供)

So what do we see? The leader among all types of law violations is liquor law violations. Among the criminal offenses, burglary and robbery have a sad leadership .

那我們看到了什么? 在所有類型的違法行為中,領導者是酒業違法行為。 在刑事犯罪中,入室盜竊和搶劫行為可悲。

The already mentioned Dartmouth College and its affiliated Princeton University and Brown University are the most “red” participants in our table.

已經提到的達特茅斯學院及其附屬的普林斯頓大學和布朗大學是我們表中最“紅”的參與者。

In contrast, Columbia University in the City of New York, Cornell University, Harvard University, and the University of Pennsylvania are mostly in the safe “green” zone.

相反,紐約市的哥倫比亞大學,康奈爾大學,哈佛大學和賓夕法尼亞大學則大多位于安全的“綠色”區域。

Harvard University, however, proved to be an unexpected leader in burglary and robbery. But if you look closely at Criminal Offenses’ heat map 2001–2014, it is clear that these problems have been experienced by Harvard University in the past — since 2009, the university has moved to the “green” team and has never left it again.

然而,事實證明,哈佛大學是搶劫和搶劫領域的出人意料的領導者。 但是,如果您仔細查看2001-2014年《刑事犯罪》的熱圖,很顯然,哈佛大學過去曾遇到過這些問題-自2009年以來,該大學已轉入“綠色”團隊,并且再也沒有離開過。

Image for post

結論 (Conclusions)

Modern data is called Big Data for a reason — the more data, the more difficult it is to visualize. Volumetric data requires detail, and this affects the visual component of the analysis. The original report successfully avoided visualization problems by proposing a constructive graphical solution for a massive data block.

現代數據之所以被稱為大數據,是因為一個原因-數據越多,可視化就越困難。 體積數據需要詳細信息,這會影響分析的視覺組成。 原始報告通過為海量數據塊提出了建設性的圖形解決方案,成功避免了可視化問題。

Image for post

But the completeness of the data presented has replaced the analysis itself.

但是,所提供數據的完整性已取代了分析本身。

Not claiming the truth and armed with Occam’s razor (yes, analysts have a lot of surprising techniques in the arsenal), I grouped the data on crimes into the category “criminal offenses” and got rid of the details of the sanctions in “law violations”.

我沒有聲稱真相,而是用奧卡姆的剃刀武裝(是的,分析家在武器庫中有很多令人驚訝的技術),我將犯罪數據歸為“犯罪罪”一類,并擺脫了“違反法律的行為”中制裁的細節。 ”。

This allowed me to calculate aggregated security indicators, compare Ivy League universities, and find some answers. Maybe it wasn’t as elegant as the original version — that’s something for my inner Designer to think about.

這使我能夠計算匯總的安全指標,比較常春藤盟校,并找到一些答案。 也許它沒有原始版本那么優雅-這是我的內部設計師要考慮的事情。

My final word of advice — when working on data visualization switch internally from Analyst to Designer and vice versa. (Don’t forget to involve the User however, since he will be the one who will evaluate the final result.) By switching between these two modes of thinking, we work towards that perfect balance between design and analysis — our “new” Golden Ratio.

我最后的建議是-在進行數據可視化時,在內部從Analyst切換到Designer,反之亦然。 (但是,不要忘了讓用戶參與,因為他將是評估最終結果的人。)通過在兩種思維方式之間切換,我們努力在設計和分析之間實現完美的平衡-我們的“新” Golden比。

Image for post

翻譯自: https://medium.com/nightingale/in-pursuit-of-a-new-golden-ratio-1ad528534222

追求卓越追求完美規范學習

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/390527.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/390527.shtml
英文地址,請注明出處:http://en.pswp.cn/news/390527.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

leetcode 275. H 指數 II

給定一位研究者論文被引用次數的數組(被引用次數是非負整數),數組已經按照 升序排列 。編寫一個方法,計算出研究者的 h 指數。 h 指數的定義: “h 代表“高引用次數”(high citations),一名科研…

Node js開發中的那些旮旮角角 第一部

#前戲 上一周是我到現公司來最忙碌的(最有意思的)一周了,為什么這么說呢?因為項目中需要提供服務端對用戶病人信息的一個匯總并以email的形式分享信息的接口,在幾天的時間里調研處理一套實施方案。我們服務端是Node.js…

文件2. 文件重命名

servlet對本機已存在的文件進行重命名。 .jsp界面 1 <form action"<%basePath %>fileAction" method"get" >2 <table>3 <tr>4 <td>輸入文件路徑</td>5 <td&…

js字符串slice_JavaScript子字符串示例-JS中的Slice,Substr和Substring方法

js字符串sliceIn daily programming, we often need to work with strings. Fortunately, there are many built-in methods in JavaScript that help us while working with arrays, strings and other data types. We can use these methods for various operations like sea…

leetcode 218. 天際線問題

城市的天際線是從遠處觀看該城市中所有建筑物形成的輪廓的外部輪廓。給你所有建筑物的位置和高度&#xff0c;請返回由這些建筑物形成的 天際線 。 每個建筑物的幾何信息由數組 buildings 表示&#xff0c;其中三元組 buildings[i] [lefti, righti, heighti] 表示&#xff1a…

[Android Pro] 終極組件化框架項目方案詳解

cp from : https://blog.csdn.net/pochenpiji159/article/details/78660844 前言 本文所講的組件化案例是基于自己開源的組件化框架項目github上地址github.com/HelloChenJi…其中即時通訊(Chat)模塊是單獨的項目github上地址github.com/HelloChenJi… 1.什么是組件化&#xff…

如何寫一個vue指令directive

舉個例子 &#xff1a;clickoutside.js const clickoutsideContext clickoutsideContext;export default {/*param el 指令所綁定的元素param binding {Object} param vnode vue編譯生成的虛擬節點*/bind (el, binding, vnode) {const documentHandler function(e) {console.…

安裝angular cli_Angular 9適用于初學者—如何使用Angular CLI安裝第一個應用程序

安裝angular cliAngular is one of the most popular JavaScript frameworks created and developed by Google. In the last couple of years, ReactJS has gained a lot of interest and has become the most popular modern JS library in the industry. But this doesn’t …

leetcode 1818. 絕對差值和

給你兩個正整數數組 nums1 和 nums2 &#xff0c;數組的長度都是 n 。 數組 nums1 和 nums2 的 絕對差值和 定義為所有 |nums1[i] - nums2[i]|&#xff08;0 < i < n&#xff09;的 總和&#xff08;下標從 0 開始&#xff09;。 你可以選用 nums1 中的 任意一個 元素來…

【轉載】keil5中加入STM32F10X_HD,USE_STDPERIPH_DRIVER的原因

初學STM32&#xff0c;在RealView MDK 環境中使用STM32固件庫建立工程時&#xff0c;初學者可能會遇到編譯不通過的問題。出現如下警告或錯誤提示&#xff1a; warning: #223-D: function "assert_param" declared implicitly;assert_param(IS_GPIO_ALL_PERIPH(GPIOx…

下崗職工_下崗后我如何獲得多位軟件工程師的面試

下崗職工“Opportunities to find our deeper powers come when life seems most challenging.” -Joseph Campbell“當生活似乎最具挑戰性時&#xff0c;就有機會找到我們更深層的力量。” 約瑟夫坎貝爾 I was recently laid off for the first time in my life. I realized t…

1846. 減小和重新排列數組后的最大元素

給你一個正整數數組 arr 。請你對 arr 執行一些操作&#xff08;也可以不進行任何操作&#xff09;&#xff0c;使得數組滿足以下條件&#xff1a; arr 中 第一個 元素必須為 1 。任意相鄰兩個元素的差的絕對值 小于等于 1 &#xff0c;也就是說&#xff0c;對于任意的 1 <…

bashdb常用命令

一、列出代碼和查詢代碼類&#xff1a; l 列出當前行以下的10行- 列出正在執行的代碼行的前面10行. 回到正在執行的代碼行w 列出正在執行的代碼行前后的代碼/pat/ 向后搜索pat&#xff1f;pat&#xff1f;向前搜索pat二、Debug控制類&#xff1a; h 幫助help 命令 得到…

podcast播客資源_為什么播客是我的新維基百科-完美的非正式學習資源

podcast播客資源In this article, I’ll explain why podcasts replaced a lot of my Wikipedia usage for informal learning. I’ll also talk about how I listen to 5 hours of podcasts every day.在本文中&#xff0c;我將解釋為什么播客代替了我的許多Wikipedia用于非正…

劍指 Offer 53 - I. 在排序數組中查找數字 I(二分法)

統計一個數字在排序數組中出現的次數。 示例 1: 輸入: nums [5,7,7,8,8,10], target 8 輸出: 2 示例 2: 輸入: nums [5,7,7,8,8,10], target 6 輸出: 0 限制&#xff1a; 0 < 數組長度 < 50000 解題思路 先用二分法查找出其中一個目標元素再向目標元素兩邊查找…

MVC與三層架構區別

我們平時總是將三層架構與MVC混為一談&#xff0c;殊不知它倆并不是一個概念。下面我來為大家揭曉我所知道的一些真相。 首先&#xff0c;它倆根本不是一個概念。 三層架構是一個分層式的軟件體系架構設計&#xff0c;它可適用于任何一個項目。 MVC是一個設計模式&#xff0c;它…

tensorflow 實現邏輯回歸——原以為TensorFlow不擅長做線性回歸或者邏輯回歸,原來是這么簡單哇!...

實現的是預測 低 出生 體重 的 概率。尼克麥克盧爾&#xff08;Nick McClure&#xff09;. TensorFlow機器學習實戰指南 (智能系統與技術叢書) (Kindle 位置 1060-1061). Kindle 版本. # Logistic Regression #---------------------------------- # # This function shows ho…

sdlc 瀑布式 生命周期_SDLC指南–軟件開發生命周期的階段和方法

sdlc 瀑布式 生命周期When I decided to teach myself how to code almost four years ago I had never heard of, let alone thought about, the software development life cycle.當我差不多四年前決定教自己如何編碼時&#xff0c;我從未聽說過軟件開發生命周期&#xff0c;…

劍指 Offer 48. 最長不含重復字符的子字符串

請從字符串中找出一個最長的不包含重復字符的子字符串&#xff0c;計算該最長子字符串的長度。 示例 1: 輸入: “abcabcbb” 輸出: 3 解釋: 因為無重復字符的最長子串是 “abc”&#xff0c;所以其長度為 3。 示例 2: 輸入: “bbbbb” 輸出: 1 解釋: 因為無重復字符的最長子…

Mysql-my-innodb-heavy-4G.cnf配置文件注解

Mysql-同Nginx等一樣具備多實例的特點&#xff0c;簡單的講就是在一臺服務器上同時開啟多個不同的服務端口&#xff08;3306,3307&#xff09;同時運行多個Mysql服務進程&#xff0c;這些服務進程通過不同的socket監聽不同的服務端口來提供服務。這些Mysql多實例公用一套Mysql安…