Автор оригинала: 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
Теги.
В этом руководстве по созданию динамических визуализации данных. В частности, визуализация, которую мы хотим создавать, будут иметь следующие характеристики:
- Вы нажмете кнопку в левой нижней части, чтобы включить динамический режим.
- Как только динамический режим включен, вы можете увеличить и поднимать визуализацию с помощью мыши.
- Вы также можете обрезать и масштабировать определенный раздел визуализации.
В следующем разделе этого учебника вы узнаете, как установить и импортировать MPLD3
Библиотека, которая является зависимостью Python, которую мы будем использовать для создания наших интерактивных графиков.
Как импортировать библиотеку MPLD3
Использовать MPLD3
Библиотека в нашем приложении Python, есть два шага, которые нам нужно выполнить в первую очередь:
- Установите
MPLD3
Библиотека на машине мы работаем. - Импорт
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. Вот определенное резюме того, что мы покрыли:
- Определение динамической визуализации данных
- Как установить и импортировать
MPLD3
Библиотека для Python - Как использовать
MPLD3
Библиотека для преобразованияМатплотлиб
Визуализация в динамическую визуализацию, которую вы можете встроить на ваш сайт - Как исправить общую ошибку, которую пользователи
MPLD3
Опыт библиотеки
Этот учебник был написан Ник Маккалум , кто учит Python и JavaScript Развитие на его сайте.