#!/usr/bin/env python
# coding: utf-8

# In[7]:


import pandas as pd
import geopandas as gpd
import hvplot.pandas
import panel as pn
pn.extension(sizing_mode="stretch_width")
import param
import folium as fm

from matplotlib import pyplot as plt
import altair as alt
import folium
import matplotlib.colors as mcolors


# In[5]:


chicago_data_filter = pd.read_csv("data/chicago_data_filter.csv")
columns = list(chicago_data_filter.columns[:])

# Load panel and enable interactive features
pn.extension()

feature = pn.widgets.Select(name='feature', options=columns)
title = pn.Pane("<h1>Socioeconomic Features Explorer</h1>", width=1000)

@pn.depends(feature)
def plot(feature):
    return chicago_data_filter.hvplot.hist(
        feature,
        subplots=True, padding=0.1,
        responsive=True, min_height=500, size=100,
        c="#9ecae1"
    )
pn.Column(
    title,
    pn.Row(feature, plot),
    width_policy='max'
).servable()