En un tutorial de freeCodeCamp anterior, expliqué cómo crear visualizaciones de datos de actualización automática en Python.
Algunos lectores se acercaron para preguntar si había alguna forma de hacer que las visualizaciones fueran interactivas. Afortunadamente, ¡ya está disponible una solución fácil!
En este tutorial, le enseñaré cómo puede crear una visualización de datos interactiva en Python. Estas visualizaciones son excelentes candidatos para incrustar en su blog o sitio web.
La visualización de datos específica con la que trabajaremos
En lugar de crear una visualización de datos completa desde cero en este artículo, trabajaremos con la visualización que creamos en mi último tutorial.
La visualización utiliza pandas, matplotlib y Python para presentar varios puntos de datos de los 5 bancos que cotizan en bolsa más grandes de los Estados Unidos.
Aquí hay una imagen estática de la visualización que creamos:
El código real para la visualización se incluye a continuación. Cubrimos esto en el último tutorial, pero tenga en cuenta que deberá generar su propia clave IEX Cloud API e incluirla en la IEX_API_Keyvariable para que el script funcione.
######################## #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')Ahora que entendemos la visualización específica con la que trabajaremos, hablemos de lo que significa que una visualización sea interactiva.
¿Qué significa que una visualización sea interactiva?
Hay dos tipos de visualizaciones de datos que son útiles para incrustar en su sitio web.
El primer tipo es una visualización estática. Esto es básicamente una imagen - pensar .pngo .jpgarchivos.
El segundo tipo es una visualización dinámica. Estas visualizaciones cambian en respuesta al comportamiento del usuario, generalmente al hacer una panorámica o hacer zoom. Las visualizaciones dinámicas no se almacenan en archivos .pngo .jpg, sino generalmente en etiquetas svgo iframe.
Este tutorial trata sobre la creación de visualizaciones de datos dinámicas. En concreto, la visualización que queremos crear tendrá las siguientes características:
- Hará clic en un botón en la parte inferior izquierda para habilitar el modo dinámico.
- Una vez que el modo dinámico está habilitado, puede hacer zoom y desplazar la visualización con el mouse.
- También puede recortar y hacer zoom en una sección específica de la visualización.
En la siguiente sección de este tutorial, aprenderá cómo instalar e importar la mpld3biblioteca, que es la dependencia de Python que usaremos para crear nuestros gráficos interactivos.
Cómo importar la biblioteca mpld3
Para usar la mpld3biblioteca en nuestra aplicación Python, hay dos pasos que debemos completar primero:
- Instale la
mpld3biblioteca en la máquina en la que estamos trabajando. - Importe la
mpld3biblioteca a nuestro script Python.
Primero, instalemos mpld3en nuestra máquina local.
La forma más sencilla de hacer esto es utilizando el pipadministrador de paquetes para Python3. Si ya lo ha pipinstalado en su máquina, puede hacerlo ejecutando la siguiente declaración desde su línea de comando:
pip3 install mpld3Ahora que mpld3está instalado en nuestra máquina, podemos importarlo a nuestro script Python con la siguiente declaración:
import mpld3En aras de la legibilidad, se considera una mejor práctica incluir esta importación junto con el resto de sus importaciones en la parte superior de su secuencia de comandos. Esto significa que su sección de importación ahora se verá así:
######################## #Import dependencies ######################## import pandas as pd import matplotlib.pyplot as plt import mpld3Cómo transformar una matplotlibvisualización estática en una visualización de datos interactiva
La mpld3funcionalidad principal de la biblioteca es tomar una matplotlibvisualización existente y transformarla en un código HTML que puede incrustar en su sitio web.
La herramienta que usamos para esto es mpld3's fig_to_htmlfile, que acepta un matplotlibfigureobjeto como su único argumento y devuelve HTML.
Para usar el fig_to_htmlmétodo para nuestro propósito, simplemente agregue el siguiente código al final de nuestro script Python:
html_str = mpld3.fig_to_html(fig) Html_file= open("index.html","w") Html_file.write(html_str) Html_file.close()Este código genera el HTML y lo guarda con el nombre index.htmlde archivo en su directorio de trabajo actual. Así es como se ve esto cuando se representa en una página web:
Al pasar el cursor sobre esta visualización, aparecerán tres iconos en la parte inferior izquierda. El icono de la izquierda devuelve la visualización a su apariencia predeterminada. El icono del medio habilita el modo dinámico. El icono de la derecha le permite recortar y hacer zoom en un punto específico de la visualización.
Un error común al trabajar con pandas y mpld3
Al crear la visualización interactiva en este tutorial, es posible que se encuentre con el siguiente error generado por mpld3:
TypeError: array([ 1.]) is not JSON serializableAfortunadamente, existe una solución bien documentada para este error en GitHub.
Necesita editar el archivo _display.py que se encuentra en Lib \ site-packages \ mpld3 y reemplazar la clase NumpyEncoder por esta:
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)Una vez que se realiza este reemplazo, su código debería funcionar correctamente y su index.htmlarchivo debería generarse correctamente.
Pensamientos finales
En este tutorial, aprendió cómo crear visualizaciones de datos interactivas en Python usando las bibliotecas matplotlib y mpld3. Aquí hay un resumen específico de lo que cubrimos:
- La definición de visualización dinámica de datos
- Cómo instalar e importar la
mpld3biblioteca para Python - Cómo usar la
mpld3biblioteca para transformar unamatplotlibvisualización en una visualización dinámica que puede incrustar en su sitio web - Cómo corregir un error común que
mpld3experimentan los usuarios de la biblioteca
Este tutorial fue escrito por Nick McCullum, quien enseña el desarrollo de Python y JavaScript en su sitio web.