如何使用Python和Matplotlib在您的网站上嵌入交互式Python可视化效果

In an earlier freeCodeCamp tutorial, I explained how to create auto-updating data visualizations in Python.

在较早的freeCodeCamp教程中，我解释了如何在Python中创建自动更新数据可视化 。

Some readers reached out to ask if there was any way to make the visualizations interactive. Fortunately, an easy solution is already available!

一些读者伸出手来询问是否有任何方法可以使可视化交互。 幸运的是，已经有一个简单的解决方案！

In this tutorial, I will teach you how you can create interactive data visualization in Python. These visualizations are excellent candidates for embedding on your blog or website.

在本教程中，我将教你如何在Python中创建交互式数据可视化。 这些可视化是嵌入到您的博客或网站中的绝佳选择。

我们将使用的特定数据可视化 (The Specific Data Visualization We Will Be Working With)

Instead of building an entire data visualization from scratch in this article, we will be working with the visualization that we created in my last tutorial.

与其从头开始构建整个数据可视化，我们将使用在上一教程中创建的可视化。

The visualization uses pandas, matplotlib, and Python to present various data points from the 5 largest publicly-traded banks in the United States.

可视化使用pandas ， matplotlib和Python来显示来自美国5家最大的公开交易银行的各种数据点。

Here is a static image of the visualization we created:

这是我们创建的可视化的静态图像：

The actual code for the visualization is included below. We covered this in the last tutorial, but please note that you will need to generate your own IEX Cloud API key and include it in the IEX_API_Key variable in order for the script to work.

可视化的实际代码如下。 我们在上一教程中介绍了此方法，但请注意，您需要生成自己的IEX Cloud API密钥，并将其包含在IEX_API_Key变量中，脚本才能起作用。

########################
#Import dependencies
########################

import pandas as pd
import matplotlib.pyplot as plt

########################
#Import and clean data
########################

IEX_API_Key = ''

tickers = [
            'JPM',
            'BAC',
            'C',
            'WFC',
            'GS',
            ]

#Create an empty string called `ticker_string` that we'll add tickers and commas to
ticker_string = ''

#Loop through every element of `tickers` and add them and a comma to ticker_string
for ticker in tickers:
    ticker_string += ticker
    ticker_string += ','
    
#Drop the last comma from `ticker_string`
ticker_string = ticker_string[:-1]

#Create the endpoint and years strings
endpoints = 'chart'
years = '5'

#Interpolate the endpoint strings into the HTTP_request string
HTTP_request = f'https://cloud.iexapis.com/stable/stock/market/batch?symbols={ticker_string}&types={endpoints}&range={years}y&cache=true&token={IEX_API_Key}'

#Send the HTTP request to the IEX Cloud API and store the response in a pandas DataFrame
bank_data = pd.read_json(HTTP_request)

#Create an empty list that we will append pandas Series of stock price data into
series_list = []

#Loop through each of our tickers and parse a pandas Series of their closing prices over the last 5 years
for ticker in tickers:
    series_list.append(pd.DataFrame(bank_data[ticker]['chart'])['close'])

#Add in a column of dates
series_list.append(pd.DataFrame(bank_data['JPM']['chart'])['date'])

#Copy the 'tickers' list from earlier in the script, and add a new element called 'Date'. 
#These elements will be the column names of our pandas DataFrame later on.
column_names = tickers.copy()
column_names.append('Date')

#Concatenate the pandas Series togehter into a single DataFrame
bank_data = pd.concat(series_list, axis=1)

#Name the columns of the DataFrame and set the 'Date' column as the index
bank_data.columns = column_names
bank_data.set_index('Date', inplace = True)

########################
#Create the Python figure
########################

#Set the size of the matplotlib canvas
fig = plt.figure(figsize = (18,8))

################################################
################################################
#Create subplots in Python
################################################
################################################

########################
#Subplot 1
########################
plt.subplot(2,2,1)

#Generate the boxplot
plt.boxplot(bank_data.transpose())

#Add titles to the chart and axes
plt.title('Boxplot of Bank Stock Prices (5Y Lookback)')
plt.xlabel('Bank')
plt.ylabel('Stock Prices')

#Add labels to each individual boxplot on the canvas
ticks = range(1, len(bank_data.columns)+1)
labels = list(bank_data.columns)
plt.xticks(ticks,labels)

########################
#Subplot 2
########################
plt.subplot(2,2,2)

#Create the x-axis data
dates = bank_data.index.to_series()
dates = [pd.to_datetime(d) for d in dates]

#Create the y-axis data
WFC_stock_prices =  bank_data['WFC']

#Generate the scatterplot
plt.scatter(dates, WFC_stock_prices)

#Add titles to the chart and axes
plt.title("Wells Fargo Stock Price (5Y Lookback)")
plt.ylabel("Stock Price")
plt.xlabel("Date")

########################
#Subplot 3
########################
plt.subplot(2,2,3)

#Create the x-axis data
dates = bank_data.index.to_series()
dates = [pd.to_datetime(d) for d in dates]

#Create the y-axis data
BAC_stock_prices =  bank_data['BAC']

#Generate the scatterplot
plt.scatter(dates, BAC_stock_prices)

#Add titles to the chart and axes
plt.title("Bank of America Stock Price (5Y Lookback)")
plt.ylabel("Stock Price")
plt.xlabel("Date")

########################
#Subplot 4
########################
plt.subplot(2,2,4)

#Generate the histogram
plt.hist(bank_data.transpose(), bins = 50)

#Add a legend to the histogram
plt.legend(bank_data.columns,fontsize=10)

#Add titles to the chart and axes
plt.title("A Histogram of Daily Closing Stock Prices for the 5 Largest Banks in the US (5Y Lookback)")
plt.ylabel("Observations")
plt.xlabel("Stock Prices")

plt.tight_layout()

################################################
#Save the figure to our local machine
################################################

plt.savefig('bank_data.png')

Now that we have an understanding of the specific visualization we'll be working with, let's talk about what it means for a visualization to be interactive.

现在我们已经了解了将要使用的特定可视化，下面让我们讨论一下可视化进行交互意味着什么。

可视化是交互式的意味着什么？ (What Does It Mean for a Visualization to be Interactive?)

There are two types of data visualizations that are useful to embed on your website.

有两种类型的数据可视化可用于嵌入您的网站。

The first type is a static visualization. This is basically an image - think .png or .jpg files.

第一种是静态可视化。 这基本上是一个图像-考虑.png或.jpg文件。

The second type is a dynamic visualization. These visualizations change in response to user behavior, usually by panning or zooming. Dynamic visualizations are not stored in .png or .jpg files but usually in svg or iframe tags.

第二种是动态可视化。 这些可视化通常是通过平移或缩放来响应用户行为而更改的。 动态可视化文件不存储在.png或.jpg文件中，而是通常存储在svg或iframe标签中。

This tutorial is about creating dynamic data visualizations. Specifically, the visualization we want to create will have the following characteristics:

本教程是关于创建动态数据可视化的。 具体来说，我们要创建的可视化将具有以下特征：

1. You will click a button in the bottom left to enable dynamic mode.
   您将单击左下角的按钮以启用动态模式。
2. Once dynamic mode is enabled, you can zoom and pan the visualization with your mouse.
   启用动态模式后，您可以使用鼠标缩放和平移可视化效果。
3. You can also crop and zoom to a specific section of the visualization.
   您也可以裁剪和缩放到可视化的特定部分。

In the next section of this tutorial, you will learn how to install and import the mpld3 library, which is the Python dependency that we'll use to create our interactive charts.

在本教程的下一部分中，您将学习如何安装和导入mpld3库，该库是我们将用来创建交互式图表的Python依赖项。

如何导入mpld3库 (How to Import the mpld3 Library)

To use the mpld3 library in our Python application, there are two steps that we need to complete first:

要在我们的Python应用程序中使用mpld3库，首先需要完成两个步骤：

1. Install the mpld3 library on the machine we're working on.

   在我们正在使用的机器上安装mpld3库。

2. Import the mpld3 library into our Python script.

   将mpld3库导入我们的Python脚本中。

First, let's install mpld3 on our local machine.

首先，让我们在本地计算机上安装mpld3 。

The easiest way to do this is using the pip package manager for Python3. If you already have pip installed on your machine, you can do this by running the following statement from your command line:

最简单的方法是使用适用于Python3的pip包管理器。 如果您已经在计算机上安装了pip ，则可以通过从命令行运行以下语句来执行此操作：

pip3 install mpld3

Now that mpld3 is installed on our machine, we can import it into our Python script with the following statement:

现在mpld3已安装在我们的计算机上，我们可以使用以下语句将其导入到我们的Python脚本中：

import mpld3

For readability's sake, it is considered a best practice to include this import along with the rest of your imports at the top of your script. This means that your import section will now look like this:

出于可读性考虑，将此导入与其余导入一起包括在脚本顶部被认为是最佳实践。 这意味着您的导入部分现在将如下所示：

########################
#Import dependencies
########################

import pandas as pd
import matplotlib.pyplot as plt
import mpld3

如何将静态matplotlib可视化转换为交互式数据可视化 (How To Transform a Static matplotlib Visualizations into an Interactive Data Visualization)

The mpld3 library's main functionality is to take an existing matplotlib visualization and transform it into some HTML code that you can embed on your website.

mpld3库的主要功能是获取现有的matplotlib可视化并将其转换为一些HTML代码，您可以将它们嵌入网站中。

The tool we use for this is mpld3's fig_to_html file, which accepts a matplotlib figure object as its sole argument and returns HTML.

我们用于此目的的工具是mpld3的fig_to_html文件，该文件接受matplotlib figure对象作为其唯一参数并返回HTML。

To use the fig_to_html method for our purpose, simply add the following code to the end of our Python script:

要使用fig_to_html方法达到目的，只需将以下代码添加到Python脚本的末尾：

html_str = mpld3.fig_to_html(fig)
Html_file= open("index.html","w")
Html_file.write(html_str)
Html_file.close()

This code generates the HTML and saves it under the filename index.html in your current working directory. Here's what this looks like when rendered to a webpage:

此代码生成HTML并将其保存在当前工作目录中的文件名index.html下。 呈现到网页时的外观如下：

When you hover over this visualization, three icons will appear in the bottom left. The left icon returns the visualization to its default appearance. The middle icon enables dynamic mode. The right icon allows you to crop and zoom to a specific spot in the visualization.

将鼠标悬停在此可视化上时，三个图标将出现在左下方。 左侧的图标将可视化效果恢复为其默认外观。 中间的图标启用动态模式。 右边的图标允许您裁剪和缩放到可视化中的特定位置。

使用pandas和mpld3的常见错误 (A Common Error With Working With pandas and mpld3)

When creating the interactive visualization in this tutorial, you may come across the following error generated by mpld3:

在本教程中创建交互式可视化时，您可能会遇到mpld3生成的以下错误：

TypeError: array([ 1.]) is not JSON serializable

Fortunately, there is a well-documented solution to this error on GitHub.

幸运的是，在GitHub上有一个针对此错误的有据可查的解决方案。

You need to edit the _display.py file found in Lib\site-packages\mpld3 and replace the NumpyEncoder class by this one:

您需要编辑在Lib \ site-packages \ mpld3中找到的_display.py文件，并将NumpyEncoder类替换为此：

class NumpyEncoder(json.JSONEncoder):
    """ Special json encoder for numpy types """

    def default(self, obj):
        if isinstance(obj, (numpy.int_, numpy.intc, numpy.intp, numpy.int8,
            numpy.int16, numpy.int32, numpy.int64, numpy.uint8,
            numpy.uint16,numpy.uint32, numpy.uint64)):
            return int(obj)
        elif isinstance(obj, (numpy.float_, numpy.float16, numpy.float32, 
            numpy.float64)):
            return float(obj)
        try: # Added by ceprio 2018-04-25
            iterable = iter(obj)
        except TypeError:
            pass
        else:
            return list(iterable)
         # Let the base class default method raise the TypeError
        return json.JSONEncoder.default(self, obj)

Once this replacement is made, then your code should function properly and your index.html file should generate successfully.

进行此替换后，您的代码应正常运行，并且index.html文件应成功生成。

最后的想法 (Final Thoughts)

In this tutorial, you learned how to create interactive data visualizations in Python using the matplotlib and mpld3 libraries. Here is a specific summary of what we covered:

在本教程中，您学习了如何使用matplotlib和mpld3库在Python中创建交互式数据可视化。 以下是我们涵盖内容的具体摘要：

1. The definition of a dynamic data visualization
   动态数据可视化的定义

2. How to install and import the mpld3 library for Python

   如何为Python安装和导入mpld3库

3. How to use the mpld3 library to transform a matplotlib visualization into a dynamic visualization that you can embed on your website

   如何使用mpld3库将matplotlib可视化效果转换为可嵌入网站的动态可视化效果

4. How to fix a common error that users of the mpld3 library experience

   如何修复mpld3库用户遇到的常见错误

This tutorial was written by Nick McCullum, who teaches Python and JavaScript development on his website.

本教程由Nick McCullum编写，他在他的网站上教授Python和JavaScript开发。

翻译自: https://www.freecodecamp.org/news/how-to-embed-interactive-python-visualizations-on-your-website-with-python-and-matplotlib/