Interaktív Python-vizualizációk beágyazása a webhelyre a Python és a Matplotlib segítségével

Programozás

Egy korábbi freeCodeCamp oktatóanyagban elmagyaráztam, hogyan lehet automatikus frissítésű adatmegjelenítéseket létrehozni a Pythonban.

Néhány olvasó megkérdezte, hogy lehet-e valamilyen módon interaktívvá tenni a vizualizációkat. Szerencsére már elérhető egy egyszerű megoldás!

Ebben az oktatóanyagban megtanítom, hogyan hozhat létre interaktív adatmegjelenítést a Pythonban. Ezek a megjelenítések kiválóan alkalmasak a blogba vagy a webhelyre történő beágyazásra.

Az a specifikus adatmegjelenítés, amellyel együtt fogunk dolgozni

Ahelyett, hogy ebben a cikkben egy teljes adatmegjelenítést készítenénk a semmiből, a legutóbbi oktatóanyagomban létrehozott vizualizációval fogunk dolgozni.

A megjelenítés pandák, matplotlib és Python segítségével különböző adatpontokat mutat be az Egyesült Államok 5 legnagyobb tőzsdén jegyzett bankjából.

Itt van egy statikus kép a létrehozott vizualizációról:

A megjelenítés tényleges kódja az alábbiakban található. A legutóbbi oktatóanyagban erre kitértünk, de kérjük, vegye figyelembe, hogy IEX_API_Keya szkript működéséhez elő kell állítania saját IEX Cloud API kulcsát, és be kell építenie a változóba.

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

Most, hogy megértettük a konkrét vizualizációt, amellyel együtt fogunk dolgozni, beszéljünk arról, hogy mit jelent egy vizualizáció interaktív működése.

Mit jelent az, hogy a vizualizáció interaktív legyen?

Kétféle adatmegjelenítés létezik, amelyeket hasznos beágyazni a webhelyére.

Az első típus egy statikus megjelenítés. Ez alapvetően kép - gondolat .pngvagy .jpgfájlok.

A második típus egy dinamikus megjelenítés. Ezek a megjelenítések a felhasználói viselkedésre reagálva változnak, általában pásztázással vagy nagyítással. A dinamikus vizualizációkat nem fájlokban .pngvagy .jpgfájlokban tárolják, hanem általában a (z) svgvagy a iframecímkékben.

Ez az oktatóanyag dinamikus adatmegjelenítések létrehozásáról szól. Pontosabban, a létrehozni kívánt vizualizációnak a következő tulajdonságai lesznek:

  1. A bal alsó sarokban található gombra kattintva engedélyezheti a dinamikus módot.
  2. A dinamikus mód engedélyezése után az egérrel nagyíthatja és pásztázhatja a megjelenítést.
  3. Kivághat és nagyíthat is a megjelenítés egy adott szakaszán.

Az oktatóanyag következő szakaszában megtudhatja, hogyan kell telepíteni és importálni a mpld3könyvtárat, amely a Python-függőség, amelyet az interaktív diagramok létrehozásához fogunk használni.

Az mpld3 könyvtár importálása

A mpld3könyvtár Python alkalmazásunkban való használatához először két lépést kell végrehajtanunk:

  1. Telepítse a mpld3könyvtárat arra a gépre, amelyen dolgozunk.
  2. Importálja a mpld3könyvtárat a Python szkriptünkbe.

Először telepítsük mpld3a helyi gépünkre.

Ennek legegyszerűbb módja pipa Python3 csomagkezelőjének használata. Ha már piptelepítette a gépére, akkor ezt megteheti a következő utasítás futtatásával a parancssorból:

pip3 install mpld3

Most, hogy mpld3telepítve van a gépünkre, a következő utasítással importálhatjuk a Python szkriptünkbe:

import mpld3

Az olvashatóság érdekében bevált gyakorlatnak tekinthető, ha ezt az importot a többi importtal együtt a szkript tetejére helyezi. Ez azt jelenti, hogy az importálási szakasz most így néz ki:

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

A statikus matplotlibmegjelenítések átalakítása interaktív adatmegjelenítéssé

A mpld3könyvtár fő funkciója az, hogy készítsen egy meglévő matplotlibvizualizációt, és átalakítsa HTML kódokká, amelyet beágyazhat a webhelyére.

Az eszköz, amit használni erre a mpld3„s fig_to_htmlfájl, amely elfogad egy matplotlibfiguretárgyat, mint a kizárólagos argumentum, és visszatér a HTML.

A fig_to_htmlmódszer céljainkhoz történő felhasználáshoz egyszerűen adja hozzá a következő kódot a Python szkriptünk végéhez:

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

Ez a kód létrehozza a HTML-t, és index.htmla jelenlegi munkakönyvtár fájlnév alá menti . Így néz ki, amikor egy weboldalon renderelik:

Amikor az egérmutató fölé viszi ezt a megjelenítést, a bal alsó sarokban három ikon jelenik meg. A bal oldali ikon visszaállítja a megjelenítés alapértelmezett megjelenését. A középső ikon lehetővé teszi a dinamikus módot. A jobb ikonnal kivághatja és nagyíthatja a megjelenítés egy adott pontját.

Gyakori hiba a pandák és az mpld3 használatakor

Az oktatóanyag interaktív vizualizációjának létrehozásakor a következő hibával találkozhat mpld3:

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

Szerencsére van egy jól dokumentált megoldás erre a hibára a GitHubon.

Szerkesztenie kell a Lib \ site-package \ mpld3 fájlban található _display.py fájlt, és a NumpyEncoder osztályt ezzel kell kicserélnie:

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)

Miután ez a csere megtörtént, akkor a kódnak megfelelően kell működnie, és a index.htmlfájlnak sikeresen generálnia kell.

Végső gondolatok

Ebben az oktatóanyagban megtanulta, hogyan lehet interaktív adatmegjelenítéseket létrehozni a Pythonban a matplotlib és az mpld3 könyvtárak használatával. Itt van egy konkrét összefoglalás arról, amit lefedtünk:

  1. A dinamikus adatmegjelenítés meghatározása
  2. A mpld3Python könyvtárának telepítése és importálása
  3. Hogyan használható a mpld3könyvtár a matplotlibvizualizáció dinamikus megjelenítéssé alakításához, amelyet beágyazhat a webhelyére
  4. Hogyan lehet kijavítani a mpld3könyvtár felhasználói által tapasztalt gyakori hibát

Ezt az oktatóanyagot Nick McCullum írta, aki a Python és a JavaScript fejlesztését tanítja a weboldalán.