给您的数据见解前端

pandas是用于分析和操纵数据的最受欢迎的数据科学库之一。但是，如果您想获取用大熊猫操纵的数据并以视觉方式将其呈现给其他人呢？使用Anvil，您可以获取本地脚本或Jupyter笔记本，并将其转换为交互式仪表板，全部免费，完全在Python中。

在本教程中，我们将使用Shivam Bansal的Netflix Movies and TV Shows dataset构建仪表板应用。您也可以直接下载数据here。

我们将使用pandas在本地脚本或笔记本中操纵我们的数据，绘制以可视化它，而Anvil Uplink将其连接到应用程序并将其转换为交互式仪表板。

这些是我们要涵盖的步骤：

我们将由creating our Anvil app。
然后，我们使用砧块design our dashboard。
之后，我们将绘制clean and prepare the data。
然后，我们将通过上行链路connect our script or notebook to our app。
使用Plotly，我们将build our plots。
最后，我们将add some finishing touches到我们的仪表板。

让我们开始！

如果您没有当地的Python环境，或者您想完全在云中工作，here’s a version of this tutorial entirely in Anvil。

步骤1：创建您的砧应用

转到Anvil编辑器，单击“空白应用程序”，然后选择“ Rally”。我们只想要一个空的应用程序，因此我们将删除当前的form1，然后添加一个新的空白面板表格：

现在让我们的rename our app。单击屏幕左上角的应用程序名称。这将我们带到了“一般设置”页面，我们可以在其中修改应用程序的名称。

步骤2：设计仪表板

我们将通过从Toolbox中添加drag-and-drop components来构建用户界面。首先，添加一个ColumnPanel，我们将适合所有其他组件。然后，让我们添加三个Plots到列中 - 我们可以通过单击和拖动边缘来调整它们的尺寸（使用CTRL+拖动进行更精细的调整）。

我们还将一个Label放入我们的应用程序中，并将其放在图上。选择您的标签，在右侧的Properties Panel中，将文本更改为Netflix Content dashboard。将font_size设置为32，如果需要的话，可以customize the font。

最后，我们将所有组件的spacing_above属性都设置为large（您可以在属性面板的“布局”部分下找到它。

步骤3：使数据成形

是时候清理我们的数据并准备好显示它了。在您喜欢的开发环境中创建一个文件 - 打开新的jupyter笔记本，或在您选择的IDE中创建一个新脚本。本教程中包含的所有代码都将使用这两个选项。

首先，在顶部导入大熊猫。然后，编写csv_to_df函数，该功能将从我们的CSV文件中获取数据并将其转换为PANDAS DataFrame。

import pandas

def csv_to_df(f):
    return pd.read_csv(f, index_col=0)

在我们绘制数据之前，我们需要清理数据并准备绘图。我们将对我们的数据进行所有必要的转换。在其中，我们首先将我们的csv_to_df函数称为获取我们的数据。

def prepare_netflix_data():
    netflix_df = csv_to_df('netflix_titles.csv')

我们的数字只能使用type，country和date_added列中的数据，因此我们使用koude8 property将数据帧切成薄片。

netflix_df = netflix_df.loc[:,['type', 'country', 'date_added']]

我们还必须处理一些丢失的值，因此我们在地块中不包括丢失的数据。 Pandas有a few different ways来处理缺失值，但是在这种情况下，我们将使用koude9来摆脱它们：

netflix_df = netflix_df.dropna(subset=['country'])

country列包含Netflix中每个电影或电视节目的制作国家。但是，其中一些人列出了一个以上的国家。为了简单起见，我们将假设提到的第一个是最重要的，我们将忽略其他人。我们还创建了一个单独的数据框架，该数据框仅包含该列的值计数，该列是由国家 /地区排序的 - 稍后我们将数据输入到我们的图中时将很有用。

netflix_df['country'] = [countries[0] for
    countries in netflix_df['country'].str.split(',')]
country_counts = pd.DataFrame(   netflix_df['country'].value_counts().rename_axis('countries').reset_index(name='counts')).sort_values(by=['countries'])

我们的date_added变量当前仅包含字符串，当我们想按时间顺序绘制某些内容时，这不是一个非常简单的格式。因此，我们将使用koude12将其转换为DateTime格式，这将使我们能够在一年后轻松地订购数据。

netflix_df['date_added'] = pd.to_datetime(netflix_df['date_added'])

我们将返回我们刚刚创建的转换的数据框和country_counts变量。这就是完整函数应该结束的样子：

def prepare_netflix_data():
    netflix_df = csv_to_df('netflix')
    netflix_df = netflix_df.loc[:,['type', 'country', 'date_added']]
    netflix_df = netflix_df.dropna()
    netflix_df['country'] = [countries[0] for countries in netflix_df['country'].str.split(',')]
    country_counts = pd.DataFrame(netflix_df['country'].value_counts().rename_axis('countries').reset_index(name='counts')).sort_values(by=['countries'])
    netflix_df['date_added'] = pd.to_datetime(netflix_df['date_added'])
    return netflix_df, country_counts

最后，我们可以打印netflix_df和country_counts的输出，以确保一切看起来都正确。

print(prepare_netflix_data())

这是输出的样子：

现在，我们对数据的外观感到满意，我们可以构建我们的情节，但是在此之前，我们必须将本地脚本连接到我们的Anvil应用程序。

步骤4：建立连接

现在，我们的代码正在我们的计算机上或jupyter笔记本电脑上运行，但是我们将希望我们构建的图以在应用程序上显示并在Web浏览器上运行。为了能够做到这一点，我们将必须将本地代码连接到我们的Anvil应用程序，并制作我们从应用程序中collable callable编写的功能。这样，本地代码充当服务器，当应用程序运行Web浏览器中的所有客户端代码。

这称为 client-server 编程，并且每个Web应用程序的工作原理。想了解更多吗？ Check out our client-server explainer article。

要将我们的本地脚本连接到我们的应用程序，让我们首先启用Anvil Uplink。在编辑器中，单击侧栏菜单中的 +按钮，选择上行链路，然后单击+ Enable server Uplink。

之后，我们需要在本地计算机上pip install上行链路库（如果在jupyter笔记本上工作，请使用!pip install instead）：

pip install anvil-uplink

现在，我们将在本地脚本顶部添加以下行（您可以从上行链路窗口对话框中复制它们）：

import anvil.server

anvil.server.connect("<your-uplink-key-here>")

如果您使用本地脚本，我们还将在脚本的底部添加koude19，这将使我们的脚本运行以允许我们的应用程序在其中调用函数。我们编写的所有代码都将在此行之上。这不是jupyter笔记本的必要条件。

anvil.server.wait_forever()

在笔记本中开发时，您的anvil.server.callable功能只能在笔记本内核处于活动状态时保持访问。许多托管的笔记本电脑环境（例如Google Colab）将关闭一段时间以来一直空转的内核。您可能可以通过不断运行单元格来增加本超时 - while True: sleep(1)会做到，而这正是anvil.server.wait_forever()所做的。即使那样，托管的内核也不太可能永远运行，对于生产部署，您应该看到我们的Deploy a Google Colab Notebook with Docker guide。

这样，我们的本地脚本已连接到我们的应用程序。这意味着它现在可以在砧座Server Module中做我们可以做的任何事情。

步骤5：构建图

现在，我们需要获取我们的处理数据，并将其变成我们要显示的图。我们的数据现在位于pandas数据框架中，这意味着我们要求pandas阅读它。因此，我们可以直接将数据发送到我们的应用程序，因为pandas无法用于Web浏览器或客户端（详细介绍了为什么我们的Client vs Server code in Anvil explainer中客户端不可用某些软件包）。

。

但是，我们可以发送已建造的图。因此，我们将首先在脚本或笔记本中构建数字，然后将图返回到我们的应用程序以显示它们。

我们的仪表板将包含三个数字：

a 地图显示每个生产国家的电影数量
内容类型饼图
a 线图通过时间添加的内容

现在，我们需要创建它们。我们将首先导入plotly.graph_objects，然后编写create_plots函数。在其他任何事情之前，我们将调用我们的prepare_netflix_data函数来获取转换的数据。之后，我们首先使用Plotly’s Scattergeo创建并返回地图图。请记住，如果使用本地脚本，请在anvil.server.wait_forever()调用上方添加此代码。

import plotly.graph_objects as go

@anvil.server.callable
def create_plots():
    netflix_df, country_counts = prepare_netflix_data()

    fig1 = go.Figure(
    go.Scattergeo(
        locations=sorted(netflix_df['country'].unique().tolist()),
        locationmode='country names',
        text = country_counts['counts'],
        marker= dict(size= country_counts['counts'], sizemode = 'area')))

    return fig1

我们通过将应用程序以koude30的方式进行装饰，从应用程序的客户端获得此功能，这意味着我们可以从Anvil应用程序中访问函数的输出，以显示我们的数字。我们将通过在我们的Form1代码中的__init__方法中使用anvil.server.call来调用我们的功能。然后，我们将其输出到我们的情节koude33 property。

class Form1(Form1Template):
def **init**(self, **properties): # Set Form properties and Data Bindings.
  self.init_components(**properties)

      fig1 = anvil.server.call('create_plots')

      self.plot_1.data = fig1

我们可以通过运行本地脚本或笔记本和应用程序来检查一切都像我们想要的一样工作。这就是到目前为止的外观：

现在，让我们的其他两个图也这样做。我们将在我们的create_plots函数中添加饼图和线图：

@anvil.server.callable
def create_plots():
    netflix_df, country_counts = prepare_netflix_data()

    fig1 = go.Scattergeo(
        locations=sorted(netflix_df['country'].unique().tolist()),
        locationmode='country names',
        text = country_counts['counts'],
        marker= dict(
        size= country_counts['counts'],
        line_width = 0,
        sizeref = 2,
        sizemode = 'area',
        reversescale = True
        ))

    fig2 = go.Pie(
        labels=netflix_df['type'],
        values=netflix_df['type'].value_counts(),
        hole=.4,
        textposition= 'inside',
        textinfo='percent+label'
        )

    fig3 = go.Scatter(
        x=netflix_df['date_added'].dt.year.value_counts().sort_index().index,
        y=netflix_df['date_added'].dt.year.value_counts().sort_index()
        )

    return fig1, fig2, fig3

，我们会以与以前的情节相同的方式向客户打电话：

class Form1(Form1Template):
def **init**(self, **properties): # Set Form properties and Data Bindings.
    self.init_components(**properties)

        fig1, fig2, fig3 = anvil.server.call('create_plots')

        self.plot_1.data = fig1
        self.plot_2.data = fig2
        self.plot_3.data = fig3

这样，我们有一个功能仪表板：

我们的仪表板到目前为止的外观。

步骤6：完成触摸

设置了所有设置，我们可以转向自定义地块。情节支持描述情节样式的预配置模板，而Anvil提供了pre-built templates以匹配我们的Rally and M3 themes。我们可以通过koude35 property应用它们。

对于此仪表板，我将选择rally绘图主题，该图将与我们的应用程序的配色方案和样式匹配。我将通过将此代码行添加到__init__方法：
将其设置为应用程序的默认图主题。

class Form1(Form1Template):
def **init**(self, **properties): # Set Form properties and Data Bindings.
    self.init_components(**properties)

        Plot.templates.default = "rally"

这就是地块现在的外观：

我们的仪表板以拉力赛主题为主题。

最后，我们将使用其layout属性更改图和字体。我们还会为每个标题添加标题：

fig1, fig2, fig3 = anvil.server.call('create_plots')

self.plot_1.data = fig1
self.plot_1.layout.margin = dict(t=60, b=30, l=0, r=0)
self.plot_1.layout.font.family='Raleway'
self.plot_1.layout.title = 'Production countries'

self.plot_2.data = fig2
self.plot_2.layout.margin = dict(t=60, b=30, l=10, r=10)
self.plot_2.layout.font.family='Raleway'
self.plot_2.layout.title = 'Content breakdown by type'

self.plot_3.data = fig3
self.plot_3.layout.margin = dict(t=60, b=40, l=50, r=50)
self.plot_3.layout.font.family='Raleway'
self.plot_3.layout.title = 'Content added over time'