Sådan integreres interaktive Python-visualiseringer på dit websted med Python og Matplotlib

I en tidligere gratisCodeCamp-vejledning forklarede jeg, hvordan man opretter automatisk opdatering af datavisualiseringer i Python.

Nogle læsere rakte ud for at spørge, om der var nogen måde at gøre visualiseringerne interaktive på. Heldigvis er en nem løsning allerede tilgængelig!

I denne vejledning lærer jeg dig, hvordan du kan oprette interaktiv datavisualisering i Python. Disse visualiseringer er fremragende kandidater til indlejring på din blog eller dit websted.

Den specifikke datavisualisering, vi vil arbejde med

I stedet for at bygge en hel datavisualisering fra bunden i denne artikel vil vi arbejde med den visualisering, som vi oprettede i min sidste vejledning.

Visualiseringen bruger pandaer, matplotlib og Python til at præsentere forskellige datapunkter fra de 5 største børsnoterede banker i USA.

Her er et statisk billede af den visualisering, vi oprettede:

Den aktuelle kode til visualisering er inkluderet nedenfor. Vi dækkede dette i den sidste vejledning, men vær opmærksom på, at du bliver nødt til at generere din egen IEX Cloud API-nøgle og inkludere den i IEX_API_Keyvariablen for at scriptet skal fungere.

######################## #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 hvor vi har forståelse for den specifikke visualisering, vi vil arbejde med, lad os tale om, hvad det betyder for en visualisering at være interaktiv.

Hvad betyder det for en visualisering at være interaktiv?

Der er to typer datavisualiseringer, som er nyttige at integrere på dit websted.

Den første type er en statisk visualisering. Dette er dybest set et billede - tænk .pngeller .jpgfiler.

Den anden type er en dynamisk visualisering. Disse visualiseringer ændres som reaktion på brugeradfærd, normalt ved at panorere eller zoome. Dynamiske visualiseringer er ikke gemt i .pngeller .jpgfiler, men normalt i svgeller iframetags.

Denne tutorial handler om at oprette dynamiske datavisualiseringer. Specifikt vil den visualisering, vi ønsker at oprette, have følgende egenskaber:

  1. Du klikker på en knap nederst til venstre for at aktivere dynamisk tilstand.
  2. Når dynamisk tilstand er aktiveret, kan du zoome og panorere visualiseringen med din mus.
  3. Du kan også beskære og zoome til et bestemt afsnit af visualiseringen.

I det næste afsnit af denne vejledning lærer du, hvordan du installerer og importerer mpld3biblioteket, som er den Python-afhængighed, som vi bruger til at oprette vores interaktive diagrammer.

Sådan importeres mpld3-biblioteket

For at bruge mpld3biblioteket i vores Python-applikation er der to trin, som vi først skal udføre:

  1. Installer mpld3biblioteket på den maskine, vi arbejder på.
  2. Importer mpld3biblioteket til vores Python-script.

Lad os først installere mpld3på vores lokale maskine.

Den nemmeste måde at gøre dette på er at bruge pippakkehåndteringen til Python3. Hvis du allerede har pipinstalleret på din maskine, kan du gøre dette ved at køre følgende udsagn fra din kommandolinje:

pip3 install mpld3

Nu, der mpld3er installeret på vores maskine, kan vi importere det til vores Python-script med følgende udsagn:

import mpld3

For læsbarhedens skyld betragtes det som en bedste praksis at inkludere denne import sammen med resten af ​​din import øverst i dit script. Dette betyder, at din importafsnit nu ser sådan ud:

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

Sådan matplotlibomdannes en statisk visualisering til en interaktiv datavisualisering

Den mpld3bibliotekets vigtigste funktionalitet er at tage en eksisterende matplotlibvisualisering og omdanne den til nogle HTML-kode, som du kan indlejre på din hjemmeside.

Værktøjet vi bruger til dette er mpld3's fig_to_htmlfil, som accepterer et matplotlibfigureobjekt som sin eneste argument og returnerer HTML.

For at bruge fig_to_htmlmetoden til vores formål skal du blot tilføje følgende kode i slutningen af ​​vores Python-script:

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

Denne kode genererer HTML og gemmer den under filnavnet index.htmli din nuværende arbejdsmappe. Sådan ser det ud, når det gengives til en webside:

Når du holder markøren over denne visualisering, vises tre ikoner nederst til venstre. Det venstre ikon returnerer visualiseringen til sit standardudseende. Det midterste ikon muliggør dynamisk tilstand. Det højre ikon giver dig mulighed for at beskære og zoome til et bestemt sted i visualiseringen.

En almindelig fejl ved arbejde med pandaer og mpld3

Når du opretter den interaktive visualisering i denne vejledning, kan du støde på følgende fejl genereret af mpld3:

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

Heldigvis er der en veldokumenteret løsning på denne fejl på GitHub.

Du skal redigere filen _display.py, der findes i Lib \ site-packages \ mpld3 og erstatte NumpyEncoder-klassen med denne:

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)

Når denne udskiftning er foretaget, skal din kode fungere korrekt, og din index.htmlfil skal genereres med succes.

Afsluttende tanker

I denne vejledning lærte du, hvordan du opretter interaktive datavisualiseringer i Python ved hjælp af matplotlib- og mpld3-bibliotekerne. Her er et specifikt resumé af, hvad vi dækkede:

  1. Definitionen af ​​en dynamisk datavisualisering
  2. Sådan installeres og importeres mpld3biblioteket til Python
  3. Sådan bruges mpld3biblioteket til at omdanne en matplotlibvisualisering til en dynamisk visualisering, som du kan integrere på dit websted
  4. Sådan løses en almindelig fejl, som brugere af mpld3biblioteket oplever

Denne vejledning blev skrevet af Nick McCullum, der underviser i Python og JavaScript-udvikling på sin hjemmeside.