Рубрики
Без рубрики

Как встроить интерактивные визуализации Python на вашем сайте с Python и MatPlotlib

Автор оригинала: Nick McCullum.

В более раннем руководстве FreeCodeCamp я объяснил, как создавать автоматические обновления визуализации данных в Python.

Некоторые читатели протянулись, чтобы спросить, есть ли способ сделать визуализации интерактивными. К счастью, простое решение уже доступно!

В этом руководстве я научу вас, как вы можете создавать интерактивную визуализацию данных в Python. Эти визуализации – отличные кандидаты для встраивания в ваш блог или веб-сайт.

Конкретные визуализации данных мы будем работать с

Вместо того, чтобы построить всю визуализацию данных с нуля в этой статье, мы будем работать с визуализацией, которую мы создали в моем последнем уроке.

Визуализация использует Пандас , Матплотлиб и Python Представлять различные точки данных от 5 крупнейших публичных банков в Соединенных Штатах.

Вот статическое изображение визуализации, которую мы создали:

Фактический код для визуализации включен ниже. Мы накрыли это в последнем руководстве, но обратите внимание, что вам нужно будет генерировать свой собственный ключ 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')

Теперь, когда у нас есть понимание конкретной визуализации, с которым мы будем работать, давайте поговорим о том, что значит для визуализации, чтобы быть интерактивным.

Что значит для визуализации, чтобы быть интерактивными?

Существует два типа визуализации данных, которые полезны для встраивания на ваш сайт.

Первый тип – это статическая визуализация. Это в основном изображение – думаю .png или .jpg файлы.

Второй тип – это динамическая визуализация. Эти визуализации меняются в ответ на поведение пользователя, обычно путем панорамирования или масштабирования. Динамические визуализации не хранятся в .png или .jpg файлы, но обычно в SVG или Iframe Теги.

В этом руководстве по созданию динамических визуализации данных. В частности, визуализация, которую мы хотим создавать, будут иметь следующие характеристики:

  1. Вы нажмете кнопку в левой нижней части, чтобы включить динамический режим.
  2. Как только динамический режим включен, вы можете увеличить и поднимать визуализацию с помощью мыши.
  3. Вы также можете обрезать и масштабировать определенный раздел визуализации.

В следующем разделе этого учебника вы узнаете, как установить и импортировать MPLD3 Библиотека, которая является зависимостью Python, которую мы будем использовать для создания наших интерактивных графиков.

Как импортировать библиотеку MPLD3

Использовать MPLD3 Библиотека в нашем приложении Python, есть два шага, которые нам нужно выполнить в первую очередь:

  1. Установите MPLD3 Библиотека на машине мы работаем.
  2. Импорт MPLD3 Библиотека в наш сценарий Python.

Во-первых, давайте установим MPLD3 на нашей местной машине.

Самый простой способ сделать это использует Пип Пакет менеджер для Python3. Если у вас уже есть Пип Установлен на вашу машину, вы можете сделать это, запустив следующую оператор из вашей командной строки:

pip3 install mpld3

Теперь, когда MPLD3 Установлен на нашей машине, мы можем импортировать его в наш сценарий Python со следующим утверждением:

import mpld3

Для читабельности, считается наилучшей практикой, чтобы включить этот импорт вместе с остальной частью вашего импорта в верхней части вашего сценария. Это означает, что ваш раздел импорта теперь будет выглядеть так:

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

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

Как преобразовать статическое визуализацию MATPLOTLIB в интерактивную визуализацию данных

MPLD3 Основная функциональность библиотеки – принять существующую Матплотлиб Визуализация и преобразуйте его в код HTML, который вы можете встроить на ваш сайт.

Инструмент, который мы используем для этого MPLD3 ‘s fig_to_html Файл, который принимает Матплотлиб Рисунок Объект как его единственный аргумент и возвращает HTML.

Использовать 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()

Этот код генерирует HTML и сохраняет его под именем файла index.html в вашем текущем рабочем каталоге. Вот что это выглядит, когда представляется веб-странице:

Когда вы наведите следующую визуализацию, три иконы появятся внизу влево. Левый значок возвращает визуализацию на внешний вид по умолчанию. Средний значок обеспечивает динамический режим. Правый значок позволяет обрезать и масштабировать определенное место в визуализации.

Общая ошибка с работой с Pands и MPLD3

При создании интерактивной визуализации в этом уроке вы можете настроить следующую ошибку, созданную по MPLD3 :

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

К счастью, есть хорошо документированное решение этой ошибки на Github Отказ

Вам необходимо отредактировать файл _display.py, который найден в lib \ site-packages \ mpld3 и замените класс 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)

После того, как эта замена сделана, то ваш код должен функционировать правильно и ваш index.html Файл должен генерировать успешно.

Последние мысли

В этом руководстве вы узнали, как создавать интерактивные визуализации данных в Python с использованием библиотек MATPLOTLIB и MPLD3. Вот определенное резюме того, что мы покрыли:

  1. Определение динамической визуализации данных
  2. Как установить и импортировать MPLD3 Библиотека для Python
  3. Как использовать MPLD3 Библиотека для преобразования Матплотлиб Визуализация в динамическую визуализацию, которую вы можете встроить на ваш сайт
  4. Как исправить общую ошибку, которую пользователи MPLD3 Опыт библиотеки

Этот учебник был написан Ник Маккалум , кто учит Python и JavaScript Развитие на его сайте.