如何構建一個基於可視化理論的完美Python圖表?

全文共3114字，預計學習時長14分鐘

圖源：unsplash

將數據轉換為可視化圖表是門學問。本文介紹了能從經典的《定量信息的視覺展示》（Edward Tufte）中學到的大部分知識，並向你展示以及如何在Python中實現它。

信息展示的支柱

圖表的完整性

這代表演示的真實性。通過確保正確縮放坐標軸並反映趨勢，可以如實地解釋數據。從長遠來看，真實總是更有價值。每個人都至少目睹過一個帶有非線性y軸的圖，以使假設看起來更有說服力——請發誓永遠不會這樣做。

圖表的卓越性

這代表演示的質量。通過刪除多餘的形狀、分散的顏色和不一致的字體，可以更好地查看數據。根據我（以及Edward Tufte）的經驗，卓越的圖表源於許多小變化累積出的優勢。對圖形的每一處著墨都是至關重要的。

本教程只有所需的少數幾行代碼，以便簡潔真實地展示數據。

對於所有的數據科學家和信息學迷，《定量信息的視覺展示》絕對是一本咖啡桌書籍。在展示信息方面這本書是無可爭議的王，而且趣味性十足。

我一直將書中概述的方法用於在機器人學和機器學習的研究論文中創建功能強大的圖表。以下是幾段摘錄。

具有固有密度的散點圖

穿過由線和標記繪製的離散對象的彩色軌

這篇文章目標有三：

1. 想要確保每個人都能理解使用默認繪圖功能所犯的一些嚴重錯誤。

2. 將Plotly介紹給這些受眾，使用數據並通過探究人工智慧和數據領域的文章來進行自我提升。

3. 涵蓋可視化理論的基礎知識，以及足以使在擁擠數字領域中的工作吸引從業者眼球的先進技術。

本文包含的代碼是對我的教程plot.py的摘錄，我將對其進行擴展使得3d繪圖，動畫等的最佳實踐也包含進來。對兩個繪圖工具Matplotlib和Plotly的使用將貫穿本教程。

Matplotlib的logo；Plotly的logo。

1. Matplotlib: 這一舊的繪圖引擎驅動了眾多先前的實驗代碼，其對工程師的支持已淪為過去。

2. Plotly：數據科學、數據分析以及我的職業生涯未來的繪圖工具。

在整個過程中，plotly可以為用戶提供更多的工具來保持圖形的卓越和完整。

準備

這是將要構建的圖表。有點雜亂，數據簡

本文的末尾敘述了準備（導入和數據加載）的過程，大家可以按需複製。依賴的壁壘很低，因此可以輕鬆獲得頂層繪圖和安全的保存機制。更少的依賴意味著更多的人可以對工作進行分支，複製和構建。

· 數學和數據工具：numpy，pandas

· 系統工具：os，sys

· 易於開發的繪圖工具：matplotlib，matplotlib.pyplot，plotly，plotly.graph_objects

初始化圖表

創建新的數據可視化的第一步是讓用戶為失敗做好準備。始終創建一個坐標軸或一個特定的圖形對象。這樣可以完全控制數據放置的位置和方式。

Plotly已經往前邁出了一步。存在子圖時，Plotly圖形是用每一行和每一列索引的，不像matplotlib必須跟蹤坐標軸的列表（當n=1時，plt.subplots的調用會生效）。

###### Init plot / subplots ######

# mpl

fig_mpl, ax = plt.subplots()# plotly

fig_plo = plotly.subplots.make_subplots(rows=1, cols=1)###### add data ######

for i in range(0, 4):

# mpl

ax.plot(...)

# plotly

fig_plo.add_trace(go.Scatter(...))

刪除多餘的信息

無需使用網格線

數位化和紙質印刷中混亂的最終來源是網格線。即使以PDF格式呈現，網格線也不會看起來很棒（放大並查看網格線的樣子），並且它們很少能幫助專注的讀者進行理解。趨勢能說明一切。

# mpl

ax.grid(False)#plotly

fig.update_layout(xaxis_showgrid=False, yaxis_showgrid=False)

無用的多餘框線

使用空白。在任何介質中，空間都是有限的。將數據裝箱會佔據頁面上可用於展示數據的寶貴空間。右邊和頂上的線應刪除，但有時左邊和底下的線很漂亮。

# mpl

ax.spines['right'].set_visible(False)

ax.spines['top'].set_visible(False)

ax.set_xlabel("Year")

ax.set_ylabel("Market Share (%)")# plotly

fig_plo.update_xaxes(title_text="Year", linecolor='black',

row=1, col=1,zeroline=True,)

fig_plo.update_yaxes(title_text="Market Share", linecolor='black',

row=1, col=1,zeroline=True,)

控制圖例

總會有快速閱讀的讀者在圖表之間掃來掃去。因此要有一個圖例來回答他們什麼代表什麼的問題。Plotly具有很棒的圖例工具，例如分組，始終可見的隱藏項目以及顯示所選圖例條目子集的交互式圖表。

讓用戶查看完整的數據，並通過交互式plotly儀錶板查看他們想要的內容。

# mpl

ax.legend()# plotly

fig_plo.update_layout(showlegend=True,)

一個plotly儀錶板示例

一致的字體

字體大小很重要且應匹配所用媒介

字體經常被忽略。將帶有Arial字體的字體放到帶有Times字體的複雜報表中，總是看起來格格不入。縮放字體大小以（儘量）匹配文本並始終統一字體。

# mpl

font = {'size': 24, 'family': 'serif', 'serif': ['Times']}

matplotlib.rc('font', **font)

matplotlib.rc('text', usetex=True)# plotly

fig_plo.update_layout(font=dict(

family="Times New Roman, Times, serif",

size=24,

color="black"

),

)

可印刷

刪除背景並使用高解析度

始終提高圖表的解析度。默認情況下，它們的dpi和尺寸都小，因此將它們投影到屏幕上幾乎沒用。

圖源：unsplash

Plotly支持在設置解析度以方便查看的同時進行保存，因此在展示時能夠確切地看到想要保存的圖表，在嘗試時就會理解這一優勢。

Matplotlib則將保存與查看分開，這使得使用show()與savefig()會生成不同的圖表，並由此引起麻煩。

# mpl

ax.set_facecolor((1, 1, 1))

# no resolution tool until saving :(# plotly

fig_plo.update_layout(plot_bgcolor='white',)

fig_plo.update_layout(width=1000, height=1000,)

心中有屏幕

低對比色

在屏幕上顯示還不錯的顏色。

在屏幕上繪圖的一個細微要點是決定使用哪種顏色。選取的顏色應是可區分的，以及眼睛易於辨認的。篩選過後的顏色將成為核心顏色。可以查看色圖，我有一些經過嘗試和測試的顏色可供參考。

我的顏色是天藍色＃23aaff，紅蘋果＃ff6555，苔綠色＃66c56c，芥末黃＃f4b247。

保存為PDF

可攜式文檔格式（PDF）將圖表另存為一系列彩色矢量對象，因此當它在屏幕上移動或移動到新設備時，它將被重新渲染。PDF使得演示或手稿中無法再有像素圖表。

# mpl

plt.savefig(os.getcwd()+"plop_mpl.pdf", dpi=300)

plt.show()# plotly

fig_plo.write_image(os.getcwd()+"plot_plotly.pdf")

fig_plo.show()

輸出

在滾動滑鼠前，請仔細查看這些圖。看看哪一個更一致且沒有錯誤。以此來決定使用哪個平臺。不要覺得有些錯誤是從源頭上不可避免的。

Plotly

Matplotlib 版本的自動圖例位置完全錯誤，某些字體沒有正確轉換，而且整個圖都不太清晰。我更喜歡plotly的版本，沒有錯誤且清晰。

Plotly改進版

Plotly的API幾乎對繪圖中的每個設置都有一個易於訪問的工具，您可以將它們以一到兩行代碼進行分批傳遞。以下是我喜歡的圖表微調（首選項）的集合。它可以控制圖例的形狀和位置，還能除圖表周圍的空白。試試看並查看相應的API，可以發現大量的工具。

# advanced

fig_plo.update_layout(legend_orientation="h",

legend=dict(x=.6,y=0.07,

bgcolor='rgba(205, 223, 212, .4)',

bordercolor="Black",

),

margin=dict(r=10, l=10, b=10,t=10),

)

plotly的Python API參考——4.6.0文檔：https://plotly.com/python-api-reference/

輸入

筆者喜歡這樣為繪圖腳本/模塊組織導入庫的排列。

# file tools

import os

import sys# plotting tools

import plotly

import plotly.graph_objects as go

import seaborn as sns

import matplotlib

import matplotlib.pyplot as plt# Core

import numpy as np

數據

本教程使用的數據來自一個plotly線圖示例。可以在這裡查看該圖。需要注意的重要一點是，plotly具有出色的色彩科學——在查看電子版圖表時，柔和的色彩對眼睛更友好（總色數r + g + b較低）。

# Frome https://plotly.com/python/line-charts/

title = 'Main Source for News'

labels = ['Television', 'Newspaper', 'Internet', 'Radio']

colors = ['#1f77b4', # muted blue

'#ff7f0e', # safety orange

'#2ca02c', # cooked asparagus green

'#d62728', # brick red

]mode_size = [8, 8, 12, 8]

line_size = [2, 2, 4, 2]x_data = np.vstack((np.arange(2001, 2014),)*4)y_data =np.array([

[74, 82, 80, 74, 73,72, 74, 70, 70, 66, 66, 69],

[45, 42, 50, 46, 36,36, 34, 35, 32, 31, 31, 28],

[13, 14, 20, 24, 20,24, 24, 40, 35, 41, 43, 50],

[18, 21, 18, 21, 16, 14, 13, 18, 17, 16,19, 23],

])

結果賞心悅目，多麼漂亮清晰的圖表呀！

留言點讚關注

我們一起分享AI學習與發展的乾貨

如轉載，請後臺留言，遵守轉載規範