使用 Plotly 创建专业可视化时你应该知道的七个关键功能

欢迎来到雲闪世界。我们习惯于在在线报纸上看到交互式可视化，并且我们经常想知道数据记者使用什么工具来创建这些看起来专业的可视化。事实是，创建这种类型的可视化不需要任何特殊软件；Python 中的大多数交互式可视化库都是高度可定制的，允许从设计角度创建高质量的可视化。在本文中，我们将逐步展示如何自定义在 Plotly 中创建的交互式可视化，只需进行一些调整即可显著改善其设计。

原始可视化

在本文中，我们将使用一个简单的可视化，例如变量的时间演变。要可视化的数据对应于 1800 年至 2020 年的德国人口。首先，我们将使用 Plotly 创建最简单的数据可视化，无需任何自定义。随后，我们将逐步解释所使用的所有自定义，并在本文末尾提供改进的可视化代码。

您可以下载包含数据的文件并在您的计算机上运行本文中的代码，以获得与本文中所示的相同结果。此外，您可以继续自定义以进一步改善可视化。

首先，我们下载数据并将其存储在 Pandas DataFrame 中。

# Read the data into a Pandas DataFrame
df = pd.read_excel('statistic_id1066918_population-of-germany-1800-2020.xlsx', sheet_name='Data', skiprows=4)

# Selection of the columns 1 and 2
df = df.iloc[:, 1:3]

# Rename the columns
df.columns = ['Year', 'Population']

# Visualize the first rows of the DataFrame
df.head()

我们从在 Plotly 中创建的简单可视化开始；在本例中，可视化由一条折线图组成，无需额外的定制。

# Create a line plot using Plotly Graph Objects
fig = go.Figure()

fig.add_trace(go.Scatter(
    x=df['Year'],
    y=df['Population'],
    mode='lines',
    name='Population',
))

# Update the layout of the visualization
fig.update_layout(
    title='Population Growth in Germany: 1800-2020',
    width=850,  
    height=500,
)

fig.show()

原创剧情，无需定制

创建专业可视化的关键功能

本文的目的是美化原始可视化，使其看起来更专业，风格类似于《金融时报》等报纸上的可视化。接下来，我们将逐步解释为转换可视化并使其更具视觉吸引力而应用的每一种技术。

直接贴标

直接标签是一种在可视化中突出显示特定信息的简单方法。在此示例中，目标是突出显示从 1800 年到 2020 年的一段时间内德国人口的开始和结束。可以使用悬停来观察其余点的信息。如下面的代码所示，直接标签是通过在兴趣点处添加注释来实现的。此外，已删除 y 轴标签以避免可视化过载，因为可以从直接标签和悬停中获得值。

阴影区域

当我们创建反映时间演变的可视化时，在图表上突出显示某些事件有时很有趣，可以提供背景信息。有时，这些事件发生在特定的一天，因此使用垂直线进行可视化；然而，在其他情况下，事件发生在一段时间内，应该使用阴影区域进行可视化。

字幕

报纸中的可视化通常有一个标题和一个副标题。其中一个通常解释可视化中显示的内容，而另一个则传达可视化提供的关键见解。注释用于在图形中创建副标题，如下面的代码所示。重要的部分是调整 x 和 y 坐标以将注释置于标题下方。另一个重要方面是使用比标题更小的字体创建副标题，如可视化中所示。

页脚

报纸或杂志中的许多可视化通常具有的另一个功能是有关数据源的信息，这些信息放置在图表下方的页脚中。这与副标题一样，使用注释来完成。与以前一样，需要找到适当的 x 和 y 坐标，以正确放置注释。另一个重要方面是字体大小，页脚的字体大小通常小于副标题的字体大小。

自定义悬停效果

默认的悬停效果只是一个包含 x 和 y 值的元组，如本文开头的原始图片所示。这些可以自定义以创建更详细的悬停效果。在本例中，创建了一个带有两条线的悬停效果：一条表示年份，另一条表示人口。此悬停效果比默认创建的悬停效果专业得多。

字体类型

Plotly 中的默认字体是 Open Sans。这种字体看起来非常专业；但是，有时您可能需要使用其他字体类型自定义可视化。我非常喜欢圆形字体，主要是因为我认为它们看起来既专业又现代。出于这个原因，我决定在可视化中使用一种名为 Rubik 的字体。在我看来，Poppins、Aptos 和 Rubik 是可视化中最现代、最专业的字体。您还可以尝试其他字体，具体取决于特定项目的需求或偏好。

背景和网格

设计良好可视化的关键原则之一是仅使用墨水来表示数据。因此，良好的可视化设计应避免不必要地使用墨水。遵循此准则，我们可以在可视化中实施更改，例如删除背景或网格，因为这些元素不提供任何附加信息。

定制可视化

以下代码显示了之前实施的所有更改。我邀请您根据自己的喜好尝试其他更改。事实是，Plotly 是提供更高质量和高度可定制可视化的 Python 库之一。此外，这些可视化可以轻松地用于 Web 应用程序（例如使用 Streamlit 制作的应用程序）。

# Create a line plot using Plotly Graph Objects
fig = go.Figure()

# Define the color for the line and markers
line_color = 'steelblue'

# Line Plot
fig.add_trace(go.Scatter(
    x=df['Year'],
    y=df['Population'],
    mode='lines',
    name='Population',
    hovertemplate='Year: %{x}<br>Population: %{y}<extra></extra>', # Customized hover over
        hoverlabel=dict(
        font=dict(
            family='Rubik', # Customized font family of the hover over
            size=14,
        )
    ),
    line=dict(width=4, color=line_color),
    showlegend=False
))

# Highlight markers at the beginning and end
fig.add_trace(go.Scatter(
    x=[df['Year'].iloc[0], df['Year'].iloc[-1]],
    y=[df['Population'].iloc[0], df['Population'].iloc[-1]],
    mode='markers',
    name='Population',
    marker=dict(size=12, color=line_color), 
    showlegend=False  
))

# Annotations for the markers (direct labeling)
direct_labels = [
    dict(x=df['Year'].iloc[0] - 0.005 * df['Year'].iloc[0], y=df['Population'].iloc[0],
         xref='x', yref='y',
         text=str(df['Population'].iloc[0]),
         showarrow=False,
         font=dict(size=14, color=line_color)),
    dict(x=df['Year'].iloc[-1] + 0.005 * df['Year'].iloc[-1], y=df['Population'].iloc[-1],
         xref='x', yref='y',
         text=str(df['Population'].iloc[-1]),
         showarrow=False,
         font=dict(size=14, color=line_color))
]

# Shape areas annotations
shape_labels = [
        dict(x=1919, y=1.015, 
             xref='x', yref='paper',
             xanchor='left',
             text='WWI',
             showarrow=False,
             font=dict(size=12, color='grey')),
        dict(x=1945, y=1.015, 
             xref='x', yref='paper',
             xanchor='left',
             text='WWII',
             showarrow=False,
             font=dict(size=12, color='grey'))
]

# Subtitle annotations
subtitle_annotation = [dict(
    x=-0.06,
    y=1.125,
    xref='paper',
    yref='paper',
    text='The Remarkable Increase from 18 Million to 83 Million Over 220 Years',
    showarrow=False,
    font=dict(size=14, color='grey'),
    xanchor='left'
)]

# Footer annotations
footer_annotation = [dict(
    x=-0.06,
    y=-0.20,
    xref='paper',
    yref='paper',
    text='Source: <a href="https://www.statista.com/statistics/1066918/population-germany-historical/" target="_blank">Statista</a>. Retrieved July 14, 2024.',
    showarrow=False,
    font=dict(size=12, color='grey'),
    xanchor='left'
)]

fig.update_layout(
    shapes=[
        dict(
            type='rect',
            xref='x',
            yref='paper',
            x0=1914.6,
            y0=0,
            x1=1918.9,
            y1=1,
            fillcolor='rgba(0, 0, 0, 0.1)',
            layer='below',
            line=dict(width=0),
        ),
         dict(
            type='rect',
            xref='x',
            yref='paper',
            x0=1939.75,
            y0=0,
            x1=1945.75,
            y1=1,
            fillcolor='rgba(0, 0, 0, 0.1)',
            layer='below',
            line=dict(width=0),
        ) # Shaded areas
    ],
    title='Population Growth in <span style="color: steelblue; font-weight: bold;">Germany</span>: 1800-2020',
    xaxis_title='Year',
    yaxis_title='',
    yaxis=dict(showgrid=False, showticklabels=False),
    xaxis=dict(showgrid=False),  
    width=850,  
    height=500,
    plot_bgcolor='rgba(0,0,0,0)', 
    font=dict(family='Rubik'), # Customized font family of the visualization
    annotations=direct_labels + shape_labels + subtitle_annotation + footer_annotation # Include all labels in the visualization
)

fig.show()

定制地块

采用专业风格设计的 Plotly 可视化

在本文中，我们介绍了七种可用于创建专业可视化的功能，这些功能类似于您在报纸和在线出版物中看到的可视化，使用 Plotly。使用这些简单的方法，您可以使您的可视化看起来更加专业。在给定的示例中，它们已应用于折线图。不过，事实是，这些功能可以应用于各种可视化，从而显著提高其质量。我鼓励您在可视化中将它们付诸实践！

感谢关注雲闪世界。（Aws解决方案架构师vs开发人员&GCP解决方案架构师vs开发人员）

订阅频道(https://t.me/awsgoogvps_Host)
TG交流群(t.me/awsgoogvpsHost)

感谢关注雲闪世界。（Aws解决方案架构师vs开发人员&GCP解决方案架构师vs开发人员）

订阅频道(https://t.me/awsgoogvps_Host)
TG交流群(t.me/awsgoogvpsHost)