{"id":746,"date":"2019-01-31T12:15:13","date_gmt":"2019-01-31T11:15:13","guid":{"rendered":"http:\/\/35.180.88.53\/?p=746"},"modified":"2019-10-28T13:39:54","modified_gmt":"2019-10-28T12:39:54","slug":"interactive-data-visualization-with-python-using-bokeh","status":"publish","type":"post","link":"https:\/\/www.sergilehkyi.com\/es\/2019\/01\/interactive-data-visualization-with-python-using-bokeh\/","title":{"rendered":"Visualizaci\u00f3n interactiva de datos con Python usando Bokeh"},"content":{"rendered":"\n

Recientemente encontr\u00e9 \u00e9sta biblioteca, aprend\u00ed un poco sobre ella, la prob\u00e9, por supuesto, y decid\u00ed compartir mis pensamientos.<\/p>\n\n\n\n

Desde el sitio web oficial: \u201cBokeh es una biblioteca de visualizaci\u00f3n interactiva que se dirige a los navegadores web modernos para la presentaci\u00f3n. Su objetivo es proporcionar una construcci\u00f3n elegante y concisa de gr\u00e1ficos vers\u00e1tiles, y extender esta capacidad con interactividad de alto rendimiento en conjuntos de datos muy grandes o de transmisi\u00f3n por secuencias. Bokeh puede ayudar a cualquier persona que quiera crear parcelas interactivas, paneles y aplicaciones de datos de forma r\u00e1pida y sencilla.” Creo que la explicaci\u00f3n es bastante clara, pero ser\u00eda mejor verlo en acci\u00f3n, \u00bfno?<\/p>\n\n\n\n

Antes de comenzar, aseg\u00farese de tener Bokeh instalado en tu entorno; si no lo tienes, siga las instrucciones de instalaci\u00f3n aqu\u00ed<\/a>.<\/p>\n\n\n\n

Cre\u00e9 alg\u00fan tipo de estudio de caso para m\u00ed mismo. Decidi\u00f3 visualizar los cambios en las emisiones de CO2 en el tiempo y en correlaci\u00f3n con el PIB (y comprobar si existe esa correlaci\u00f3n, porque nunca se sabe \ud83d\ude10 ).<\/p>\n\n\n\n

As\u00ed que tom\u00e9 dos archivos: uno con emisiones de CO2 de Gapminder.org<\/a> y otro del curso en DataCamp (porque ese archivo ya estaba preprocesado \ud83d\ude00 yeeeeees, soy un bastardo perezoso \ud83d\ude00 ). Tambi\u00e9n puedes descargar estos archivos desde aqu\u00ed.<\/p>\n\n\n\n

co2_emissions_tonnes_per_person<\/a>Download<\/a><\/div>\n\n\n\n
gapminder_tidy<\/a>Download<\/a><\/div>\n\n\n\n

\u00bfC\u00f3mo empezamos a analizar los datos? Correcto, importando los paquetes necesarios e importando los datos mismos (muy importante :D). Luego realizamos un an\u00e1lisis exploratorio de datos (EDA, por sus siglas en ingl\u00e9s) para comprender con qu\u00e9 estamos trabajando y despu\u00e9s de eso, limpiar y transformar los datos en el formato necesario para el an\u00e1lisis. Muy claro. Como el art\u00edculo no se centra en estos pasos, solo insertar\u00e9 el c\u00f3digo a continuaci\u00f3n con todas las transformaciones que he realizado.<\/p>\n\n\n\n

import pandas as pd
import numpy as np

# Data cleaning and preparation
data = pd.read_csv('data\/co2_emissions_tonnes_per_person.csv')
data.head()

gapminder = pd.read_csv('data\/gapminder_tidy.csv')
gapminder.head()

df = gapminder[['Country', 'region']].drop_duplicates()
data_with_regions = pd.merge(data, df, left_on='country', right_on='Country', how='inner')
data_with_regions = data_with_regions.drop('Country', axis='columns')
data_with_regions.head()

new_df = pd.melt(data_with_regions, id_vars=['country', 'region'])
new_df.head()

columns = ['country', 'region', 'year', 'co2']
new_df.columns = columns

upd_new_df = new_df[new_df['year'].astype('int64') > 1963]
upd_new_df.info()
upd_new_df = upd_new_df.sort_values(by=['country', 'year'])
upd_new_df['year'] = upd_new_df['year'].astype('int64')

df_gdp = gapminder[['Country', 'Year', 'gdp']]
df_gdp.columns = ['country', 'year', 'gdp']
df_gdp.info()

final_df = pd.merge(upd_new_df, df_gdp, on=['country', 'year'], how='left')
final_df = final_df.dropna()
final_df.head()

np_co2 = np.array(final_df['co2'])
np_gdp = np.array(final_df['gdp'])
np.corrcoef(np_co2, np_gdp)<\/pre>\n\n\n\n
Por cierto, las emisiones de CO2 y el PIB se correlacionan, y de manera bastante significativa, de 0,78.<\/p>\n\n\n\n
np.corrcoef(np_co2, np_gdp)
 Out[138]: 
 array([[1.        , 0.78219731],
        [0.78219731, 1.        ]])<\/pre>\n\n\n\n
Y ahora vamos a la parte de la visualizaci\u00f3n. Nuevamente, comenzamos con las importaciones necesarias. Les explicar\u00e9 todos durante el articulo. Ahora, solo rel\u00e1jate e importa.<\/p>\n\n\n\n
from bokeh.io import curdoc
from bokeh.plotting import figure
from bokeh.models import HoverTool, ColumnDataSource, CategoricalColorMapper, Slider
from bokeh.palettes import Spectral6
from bokeh.layouts import widgetbox, row<\/pre>\n\n\n\n
Comenzaremos con una preparaci\u00f3n de diferentes detalles para nuestra aplicaci\u00f3n de visualizaci\u00f3n interactiva. Primero, creamos un mapeador de colores para diferentes regiones del mundo, por lo que cada pa\u00eds tendr\u00e1 un color diferente dependiendo de la regi\u00f3n en la que se encuentre. Seleccionamos regiones \u00fanicas y las convertimos en una lista. Luego usamos CategoricalColorMapper para asignar un color diferente para cada regi\u00f3n.<\/p>\n\n\n\n
regions_list = final_df.region.unique().tolist()
color_mapper = CategoricalColorMapper(factors=regions_list, palette=Spectral6)<\/pre>\n\n\n\n
A continuaci\u00f3n, prepararemos una fuente de datos para nuestra aplicaci\u00f3n. Bokeh acepta una gran cantidad de diferentes tipos de datos como fuente de gr\u00e1ficos y elementos visuales: proporciona datos directamente utilizando listas de valores, marcos de datos y series de pandas, matrices de n\u00fameros y as\u00ed sucesivamente. Pero el n\u00facleo de la mayor\u00eda de los gr\u00e1ficos de Bokeh es ColumnDataSource.<\/p>\n\n\n\n
En el nivel m\u00e1s b\u00e1sico, un objeto ColumnDataSource<\/code><\/a> es simplemente una asignaci\u00f3n entre los nombres de las columnas y las listas de datos. ColumnDataSource<\/code><\/a> toma un par\u00e1metro data<\/code> que es un dict, con nombres de columna de cadena como claves y listas (o matrices) de valores de datos como valores. Si se pasa un argumento posicional al inicializador ColumnDataSource<\/code><\/a>, se tomar\u00e1 como data<\/code>. (desde el sitio web oficial).<\/p>\n\n\n\n
# Make the ColumnDataSource: source
source = ColumnDataSource(data={
    'x': final_df.gdp[final_df['year'] == 1964],
    'y': final_df.co2[final_df['year'] == 1964],
    'country': final_df.country[final_df['year'] == 1964],
    'region': final_df.region[final_df['year'] == 1964],
})<\/pre>\n\n\n\n
Comenzamos con una muestra de nuestros datos solo por un a\u00f1o. B\u00e1sicamente creamos un diccionario de valores para x, y, pa\u00eds y regi\u00f3n.<\/p>\n\n\n\n
El siguiente paso es establecer l\u00edmites para nuestros ejes. Podemos hacerlo encontrando valores m\u00ednimos y m\u00e1ximos para x e y.<\/p>\n\n\n\n
# Save the minimum and maximum values of the gdp column: xmin, xmax
xmin, xmax = min(final_df.gdp), max(final_df.gdp)

# Save the minimum and maximum values of the co2 column: ymin, ymax
ymin, ymax = min(final_df.co2), max(final_df.co2)<\/pre>\n\n\n\n
Despu\u00e9s de eso creamos nuestra figura, donde colocaremos todos nuestros objetos de visualizaci\u00f3n. Le damos un t\u00edtulo, ajuste el ancho y la altura y tambi\u00e9n establecemos los ejes. (El eje Y<\/code> est\u00e1 configurado del tipo 'log'<\/code> solo para una mejor vista; se probaron unos tipos y este dio el mejor resultado)<\/p>\n\n\n\n
# Create the figure: plot
plot = figure(title='Gapminder Data for 1964', 
              plot_height=600, plot_width=1000,
              x_range=(xmin, xmax),
              y_range=(ymin, ymax), y_axis_type='log')<\/pre>\n\n\n\n
Bokeh usa una definici\u00f3n de glifo para todas las formas visuales que pueden aparecer en la trama. La lista completa de glifos incorporados en Bokeh se presenta a continuaci\u00f3n (sin inventar nada, toda la informaci\u00f3n de la p\u00e1gina oficial):<\/p>\n\n\n\n