In [ ]:

    

import pandas as pd
from IPython.display import display
from ipywidgets import Label
from bqplot import *
from bqplot.market_map import MarketMap
import os


    

In [ ]:

    

data = pd.read_csv(os.path.abspath('data_files/country_codes.csv'), index_col=[0])
country_codes = data.index.values
country_names = data['Name']


    

In [ ]:

    

market_map = MarketMap(names=country_codes,      # basic data which needs to set for each map
                       ref_data=data,            # Data frame which can be used for different properties of the map
                       tooltip_fields=['Name'])  # Axis and scale for color data
display(market_map)


    

In [ ]:

    

gdp_data = pd.read_csv(os.path.abspath('data_files/gdp_per_capita.csv'), index_col=[0], parse_dates=True)
gdp_data.fillna(method='backfill', inplace=True)
gdp_data.fillna(method='ffill', inplace=True)


    

In [ ]:

    

col = ColorScale(scheme='Greens')
continents = data['Continent'].values
ax_c = ColorAxis(scale=col, label='GDP per Capita', visible=False)

data['GDP'] = gdp_data.ix[-1]

market_map = MarketMap(names=country_codes, groups=continents,       # Basic data which needs to set for each map
                       cols=25, row_groups=3,                        # Properties for the visualization
                       ref_data=data,                                # Data frame used for different properties of the map
                       tooltip_fields=['Name', 'Continent', 'GDP'],  # Columns from data frame to be displayed as tooltip
                       tooltip_formats=['', '', '.1f'],
                       scales={'color': col}, axes=[ax_c])           # Axis and scale for color data


    

In [ ]:

    

deb_output = Label()
def selected_index_changed(name, value):
    deb_output.value = str(value)
        
market_map.on_trait_change(selected_index_changed, name='selected')
display(deb_output)
display(market_map)


    

In [ ]:

    

# Attribute to show the names of the groups, in this case the continents
market_map.show_groups = True


    

In [ ]:

    

# Setting the selected countries
market_map.show_groups = False
market_map.selected = ['PAN', 'FRA', 'PHL']


    

In [ ]:

    

# changing selected stroke and hovered stroke variable
market_map.selected_stroke = 'yellow'
market_map.hovered_stroke = 'violet'


    

In [ ]:

    

# Adding data for color and making color axis visible
market_map.color = data['GDP']
ax_c.visible = True


    

In [ ]:

    

# Creating the figure to be displayed as the tooltip
sc_x = DateScale()
sc_y = LinearScale()

ax_x = Axis(scale=sc_x, grid_lines='dashed', label='Date')
ax_y = Axis(scale=sc_y, orientation='vertical', grid_lines='dashed',
            label='GDP', label_location='end', label_offset='-1em')

line = Lines(x= gdp_data.index.values, scales={'x': sc_x, 'y': sc_y}, colors=['orange'])
fig_tooltip = Figure(marks=[line], axes=[ax_x, ax_y], min_width=600, min_height=400)


    

In [ ]:

    

market_map = MarketMap(names=country_codes, groups=continents,
                       cols=25, row_groups=3,
                       color=data['GDP'], scales={'color': col}, axes=[ax_c],
                       ref_data=data, tooltip_widget=fig_tooltip)

# Update the tooltip chart
hovered_symbol = ''
def hover_handler(self, content):
    global hovered_symbol
    symbol = content.get('ref_data', {}).get('Country Code', '')
    if(symbol != hovered_symbol):
        hovered_symbol = symbol
        if(gdp_data.get(hovered_symbol) is not None):
            line.y = gdp_data[hovered_symbol].values
            fig_tooltip.title = content.get('ref_data', {}).get('Name', '')

# Custom msg sent when a particular cell is hovered on
market_map.on_hover(hover_handler)
display(market_map)