Hoe u interactieve Python-visualisaties op uw website kunt insluiten met Python en Matplotlib

In een eerdere freeCodeCamp-zelfstudie heb ik uitgelegd hoe je automatisch bijgewerkte gegevensvisualisaties in Python kunt maken.

Sommige lezers vroegen of er een manier was om de visualisaties interactief te maken. Gelukkig is er al een makkelijke oplossing beschikbaar!

In deze tutorial leer ik je hoe je interactieve datavisualisatie in Python kunt maken. Deze visualisaties zijn uitstekende kandidaten om in te bedden in uw blog of website.

De specifieke datavisualisatie waarmee we zullen werken

In plaats van in dit artikel een volledige datavisualisatie vanaf het begin op te bouwen, zullen we werken met de visualisatie die we in mijn laatste tutorial hebben gemaakt.

De visualisatie maakt gebruik van panda's, matplotlib en Python om verschillende datapunten van de 5 grootste beursgenoteerde banken in de Verenigde Staten te presenteren.

Hier is een statisch beeld van de visualisatie die we hebben gemaakt:

De daadwerkelijke code voor de visualisatie is hieronder opgenomen. We hebben dit in de laatste tutorial behandeld, maar houd er rekening mee dat u uw eigen IEX Cloud API-sleutel moet genereren en deze in de IEX_API_Keyvariabele moet opnemen om het script te laten werken.

######################## #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'//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')

Nu we inzicht hebben in de specifieke visualisatie waarmee we gaan werken, laten we het hebben over wat het betekent dat een visualisatie interactief is.

Wat betekent het dat een visualisatie interactief is?

Er zijn twee soorten gegevensvisualisaties die handig zijn om op uw website in te sluiten.

Het eerste type is een statische visualisatie. Dit is in feite een afbeelding - denk .pngof .jpgbestanden.

Het tweede type is een dynamische visualisatie. Deze visualisaties veranderen als reactie op gebruikersgedrag, meestal door te pannen of te zoomen. Dynamische visualisaties worden niet opgeslagen in .pngof .jpgbestanden, maar meestal in svgof iframetags.

Deze tutorial gaat over het maken van dynamische gegevensvisualisaties. Concreet zal de visualisatie die we willen maken de volgende kenmerken hebben:

  1. U klikt linksonder op een knop om de dynamische modus in te schakelen.
  2. Zodra de dynamische modus is ingeschakeld, kunt u de visualisatie zoomen en pannen met uw muis.
  3. U kunt ook bijsnijden en inzoomen naar een specifiek gedeelte van de visualisatie.

In de volgende sectie van deze tutorial leert u hoe u de mpld3bibliotheek installeert en importeert , dit is de Python-afhankelijkheid die we zullen gebruiken om onze interactieve grafieken te maken.

Hoe de mpld3-bibliotheek te importeren

Om de mpld3bibliotheek in onze Python-applicatie te gebruiken, zijn er twee stappen die we eerst moeten doorlopen:

  1. Installeer de mpld3bibliotheek op de computer waaraan we werken.
  2. Importeer de mpld3bibliotheek in ons Python-script.

Laten we eerst mpld3op onze lokale computer installeren .

De eenvoudigste manier om dit te doen, is door de pippakketbeheerder voor Python3 te gebruiken. Als u het al pipop uw computer hebt geïnstalleerd, kunt u dit doen door de volgende instructie vanaf uw opdrachtregel uit te voeren:

pip3 install mpld3

Nu dat mpld3op onze machine is geïnstalleerd, kunnen we het in ons Python-script importeren met de volgende verklaring:

import mpld3

Omwille van de leesbaarheid wordt het als een best practice beschouwd om deze import samen met de rest van je importen bovenaan je script op te nemen. Dit betekent dat uw importgedeelte er nu als volgt uitziet:

######################## #Import dependencies ######################## import pandas as pd import matplotlib.pyplot as plt import mpld3

Hoe u een statische matplotlibvisualisatie omzet in een interactieve gegevensvisualisatie

De mpld3belangrijkste functionaliteit van de bibliotheek is om een ​​bestaande matplotlibvisualisatie te nemen en deze om te zetten in een HTML-code die u op uw website kunt insluiten.

De tool die we hiervoor gebruiken is mpld3het fig_to_htmlbestand van, dat een matplotlibfigureobject als zijn enige argument accepteert en HTML retourneert.

Om de fig_to_htmlmethode voor ons doel te gebruiken, voegt u eenvoudig de volgende code toe aan het einde van ons Python-script:

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

Deze code genereert de HTML en slaat deze onder de bestandsnaam op index.htmlin uw huidige werkmap. Hier is hoe dit eruit ziet wanneer het wordt weergegeven op een webpagina:

Als u de muisaanwijzer over deze visualisatie beweegt, verschijnen er links onderaan drie pictogrammen. Met het linkerpictogram keert de visualisatie terug naar de standaardweergave. Het middelste pictogram maakt de dynamische modus mogelijk. Met het rechterpictogram kunt u bijsnijden en inzoomen op een specifieke plek in de visualisatie.

Een veel voorkomende fout bij het werken met panda's en mpld3

Wanneer u de interactieve visualisatie in deze zelfstudie maakt, kunt u de volgende fout tegenkomen die wordt gegenereerd door mpld3:

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

Gelukkig is er een goed gedocumenteerde oplossing voor deze fout op GitHub.

U moet het _display.py-bestand in Lib \ site-packages \ mpld3 bewerken en de klasse NumpyEncoder door deze vervangen:

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)

Zodra deze vervanging is gemaakt, zou uw code correct moeten werken en zou uw index.htmlbestand met succes moeten worden gegenereerd.

Laatste gedachten

In deze zelfstudie hebt u geleerd hoe u interactieve gegevensvisualisaties in Python kunt maken met behulp van de matplotlib- en mpld3-bibliotheken. Hier is een specifieke samenvatting van wat we hebben behandeld:

  1. De definitie van een dynamische gegevensvisualisatie
  2. Hoe de mpld3bibliotheek voor Python te installeren en importeren
  3. Hoe u de mpld3bibliotheek gebruikt om een matplotlibvisualisatie om te zetten in een dynamische visualisatie die u kunt insluiten op uw website
  4. Een veelvoorkomende fout oplossen die gebruikers van de mpld3bibliotheek ervaren

Deze tutorial is geschreven door Nick McCullum, die op zijn website lesgeeft in Python en JavaScript-ontwikkeling.