User Interface


In [1]:
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
import plotly
from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot
from plotly_usmap import usmap
from plotly_usmap import usmap_choose
from plotly_usmap import newdf

1. Set up options for Dropdowns and Slider


In [2]:
rank = pd.read_csv('../data/rank_file.csv')

# Create a list of indicators 
available = list(rank.columns.values)
for i in ['Unnamed: 0','City','State','Population','Natural_total_rank', 'Human_related_rank', 
          'Economy_rank', 'Tertiary_Rank', 'Latitude', 'Longitude']:
    available.remove(i)
    
# Create a list of labels for dropdown
labels = ['Air Quality','Water Quality','Fewer Toxics',
          'Fewer Hazardous Particles','Green Coverage',
          'Fewer Crimes','More Hospitals','Early Education Options',
          'University Options','Employment Rate','Sales Revenue',
          'Income','Tuition Affordability','Bars','Restaurants',
          'Museums','Libraries','Parks','Top Restaurants']

# Put available and labels in a two-dimensional list
pairs = [available,labels]

2. Set up layout for User Interface


In [3]:
app = dash.Dash()
# Get DataFrame value
import UI_setup
app.layout = UI_setup.layout_setup(pairs)

3.Set up for default graph


In [4]:
@app.callback(
    dash.dependencies.Output('Total-graphic', 'figure'),
    [dash.dependencies.Input('Total', 'n_clicks')]
)
def total_graph(Total):
    if(Total is None):
        return
    return {
           usmap(rank)    
        }
@app.callback(
    dash.dependencies.Output('Human-graphic', 'figure'),
    [dash.dependencies.Input('Hrank', 'n_clicks')]
)
def human_graph(Hrank):
    if(Hrank is None):
        return
    return {
           usmap(rank, 'human')    
        }
@app.callback(
    dash.dependencies.Output('Natural-graphic', 'figure'),
    [dash.dependencies.Input('Nrank', 'n_clicks')]
)
def environment_graph(Nrank):
    if(Nrank is None):
        return
    return {
           usmap(rank, 'natural')    
        }
@app.callback(
    dash.dependencies.Output('Economic-graphic', 'figure'),
    [dash.dependencies.Input('Erank', 'n_clicks')]
)
def economy_graph(Erank):
    if(Erank is None):
        return
    return {
           usmap(rank, 'economy')    
        }
@app.callback(
    dash.dependencies.Output('Tertiary-graphic', 'figure'),
    [dash.dependencies.Input('Trank', 'n_clicks')]
)
def entertainment_graph(Trank):
    if(Trank is None):
        return
    return {
           usmap(rank, 'tertiary')    
        }

4.Set up for user call


In [5]:
@app.callback(
    dash.dependencies.Output('User-graphic', 'figure'),
    [dash.dependencies.Input('Search', 'n_clicks')],
    [dash.dependencies.State('First-care', 'value'),
     dash.dependencies.State('Second-care', 'value'),
     dash.dependencies.State('Third-care', 'value'),
     dash.dependencies.State('Fourth-care', 'value'),
     dash.dependencies.State('Fifth-care', 'value'),
    ]
)
    
def user_DIY_graph(Search, First_care, Second_care, Third_care, Fourth_care, Fifth_care):
    df = newdf(rank, First_care, Second_care, Third_care, Fourth_care, Fifth_care)
    
    return {
        usmap_choose(df)
    }

5. Running


In [6]:
app.run_server()


 * Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)
127.0.0.1 - - [01/Jun/2018 16:42:19] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [01/Jun/2018 16:42:22] "GET /_dash-dependencies HTTP/1.1" 200 -
127.0.0.1 - - [01/Jun/2018 16:42:22] "GET /_dash-layout HTTP/1.1" 200 -
[2018-06-01 16:42:22,317] ERROR in app: Exception on /_dash-update-component [POST]
Traceback (most recent call last):
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1982, in wsgi_app
    response = self.full_dispatch_request()
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1614, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1517, in handle_user_exception
    reraise(exc_type, exc_value, tb)
  File "D:\Anoconda\lib\site-packages\flask\_compat.py", line 33, in reraise
    raise value
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1612, in full_dispatch_request
    rv = self.dispatch_request()
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1598, in dispatch_request
    return self.view_functions[rule.endpoint](**req.view_args)
  File "D:\Anoconda\lib\site-packages\dash\dash.py", line 541, in dispatch
    return self.callback_map[target_id]['callback'](*args)
  File "D:\Anoconda\lib\site-packages\dash\dash.py", line 498, in add_context
    output_value = func(*args, **kwargs)
  File "<ipython-input-5-01f3b290d2c8>", line 13, in user_DIY_graph
    df = newdf(rank, First_care, Second_care, Third_care, Fourth_care, Fifth_care)
  File "C:\Users\dell\Documents\2018_summer\uwseds-group-city-fynders\cityfynders\plotly_usmap.py", line 154, in newdf
    df['First'] = rank[First_care]
  File "D:\Anoconda\lib\site-packages\pandas\core\frame.py", line 1964, in __getitem__
    return self._getitem_column(key)
  File "D:\Anoconda\lib\site-packages\pandas\core\frame.py", line 1971, in _getitem_column
    return self._get_item_cache(key)
  File "D:\Anoconda\lib\site-packages\pandas\core\generic.py", line 1645, in _get_item_cache
    values = self._data.get(item)
  File "D:\Anoconda\lib\site-packages\pandas\core\internals.py", line 3599, in get
    raise ValueError("cannot label index with a null key")
ValueError: cannot label index with a null key
127.0.0.1 - - [01/Jun/2018 16:42:22] "POST /_dash-update-component HTTP/1.1" 500 -
127.0.0.1 - - [01/Jun/2018 16:42:22] "POST /_dash-update-component HTTP/1.1" 200 -
127.0.0.1 - - [01/Jun/2018 16:42:22] "POST /_dash-update-component HTTP/1.1" 200 -
127.0.0.1 - - [01/Jun/2018 16:42:22] "POST /_dash-update-component HTTP/1.1" 200 -
127.0.0.1 - - [01/Jun/2018 16:42:22] "POST /_dash-update-component HTTP/1.1" 200 -
127.0.0.1 - - [01/Jun/2018 16:42:22] "POST /_dash-update-component HTTP/1.1" 200 -
[2018-06-01 16:43:53,233] ERROR in app: Exception on /_dash-update-component [POST]
Traceback (most recent call last):
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1982, in wsgi_app
    response = self.full_dispatch_request()
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1614, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1517, in handle_user_exception
    reraise(exc_type, exc_value, tb)
  File "D:\Anoconda\lib\site-packages\flask\_compat.py", line 33, in reraise
    raise value
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1612, in full_dispatch_request
    rv = self.dispatch_request()
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1598, in dispatch_request
    return self.view_functions[rule.endpoint](**req.view_args)
  File "D:\Anoconda\lib\site-packages\dash\dash.py", line 541, in dispatch
    return self.callback_map[target_id]['callback'](*args)
  File "D:\Anoconda\lib\site-packages\dash\dash.py", line 498, in add_context
    output_value = func(*args, **kwargs)
  File "<ipython-input-5-01f3b290d2c8>", line 16, in user_DIY_graph
    usmap_choose(df)
TypeError: unhashable type: 'set'
127.0.0.1 - - [01/Jun/2018 16:43:53] "POST /_dash-update-component HTTP/1.1" 500 -
[2018-06-01 16:44:31,654] ERROR in app: Exception on /_dash-update-component [POST]
Traceback (most recent call last):
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1982, in wsgi_app
    response = self.full_dispatch_request()
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1614, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1517, in handle_user_exception
    reraise(exc_type, exc_value, tb)
  File "D:\Anoconda\lib\site-packages\flask\_compat.py", line 33, in reraise
    raise value
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1612, in full_dispatch_request
    rv = self.dispatch_request()
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1598, in dispatch_request
    return self.view_functions[rule.endpoint](**req.view_args)
  File "D:\Anoconda\lib\site-packages\dash\dash.py", line 541, in dispatch
    return self.callback_map[target_id]['callback'](*args)
  File "D:\Anoconda\lib\site-packages\dash\dash.py", line 509, in add_context
    cls=plotly.utils.PlotlyJSONEncoder),
  File "D:\Anoconda\lib\json\__init__.py", line 238, in dumps
    **kw).encode(obj)
  File "D:\Anoconda\lib\site-packages\plotly\utils.py", line 136, in encode
    encoded_o = super(PlotlyJSONEncoder, self).encode(o)
  File "D:\Anoconda\lib\json\encoder.py", line 199, in encode
    chunks = self.iterencode(o, _one_shot=True)
  File "D:\Anoconda\lib\json\encoder.py", line 257, in iterencode
    return _iterencode(o, 0)
  File "D:\Anoconda\lib\site-packages\plotly\utils.py", line 204, in default
    return _json.JSONEncoder.default(self, obj)
  File "D:\Anoconda\lib\json\encoder.py", line 180, in default
    o.__class__.__name__)
TypeError: Object of type 'set' is not JSON serializable
127.0.0.1 - - [01/Jun/2018 16:44:31] "POST /_dash-update-component HTTP/1.1" 500 -
[2018-06-01 16:45:06,486] ERROR in app: Exception on /_dash-update-component [POST]
Traceback (most recent call last):
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1982, in wsgi_app
    response = self.full_dispatch_request()
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1614, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1517, in handle_user_exception
    reraise(exc_type, exc_value, tb)
  File "D:\Anoconda\lib\site-packages\flask\_compat.py", line 33, in reraise
    raise value
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1612, in full_dispatch_request
    rv = self.dispatch_request()
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1598, in dispatch_request
    return self.view_functions[rule.endpoint](**req.view_args)
  File "D:\Anoconda\lib\site-packages\dash\dash.py", line 541, in dispatch
    return self.callback_map[target_id]['callback'](*args)
  File "D:\Anoconda\lib\site-packages\dash\dash.py", line 509, in add_context
    cls=plotly.utils.PlotlyJSONEncoder),
  File "D:\Anoconda\lib\json\__init__.py", line 238, in dumps
    **kw).encode(obj)
  File "D:\Anoconda\lib\site-packages\plotly\utils.py", line 136, in encode
    encoded_o = super(PlotlyJSONEncoder, self).encode(o)
  File "D:\Anoconda\lib\json\encoder.py", line 199, in encode
    chunks = self.iterencode(o, _one_shot=True)
  File "D:\Anoconda\lib\json\encoder.py", line 257, in iterencode
    return _iterencode(o, 0)
  File "D:\Anoconda\lib\site-packages\plotly\utils.py", line 204, in default
    return _json.JSONEncoder.default(self, obj)
  File "D:\Anoconda\lib\json\encoder.py", line 180, in default
    o.__class__.__name__)
TypeError: Object of type 'set' is not JSON serializable
127.0.0.1 - - [01/Jun/2018 16:45:06] "POST /_dash-update-component HTTP/1.1" 500 -
[2018-06-01 16:45:07,507] ERROR in app: Exception on /_dash-update-component [POST]
Traceback (most recent call last):
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1982, in wsgi_app
    response = self.full_dispatch_request()
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1614, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1517, in handle_user_exception
    reraise(exc_type, exc_value, tb)
  File "D:\Anoconda\lib\site-packages\flask\_compat.py", line 33, in reraise
    raise value
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1612, in full_dispatch_request
    rv = self.dispatch_request()
  File "D:\Anoconda\lib\site-packages\flask\app.py", line 1598, in dispatch_request
    return self.view_functions[rule.endpoint](**req.view_args)
  File "D:\Anoconda\lib\site-packages\dash\dash.py", line 541, in dispatch
    return self.callback_map[target_id]['callback'](*args)
  File "D:\Anoconda\lib\site-packages\dash\dash.py", line 509, in add_context
    cls=plotly.utils.PlotlyJSONEncoder),
  File "D:\Anoconda\lib\json\__init__.py", line 238, in dumps
    **kw).encode(obj)
  File "D:\Anoconda\lib\site-packages\plotly\utils.py", line 136, in encode
    encoded_o = super(PlotlyJSONEncoder, self).encode(o)
  File "D:\Anoconda\lib\json\encoder.py", line 199, in encode
    chunks = self.iterencode(o, _one_shot=True)
  File "D:\Anoconda\lib\json\encoder.py", line 257, in iterencode
    return _iterencode(o, 0)
  File "D:\Anoconda\lib\site-packages\plotly\utils.py", line 204, in default
    return _json.JSONEncoder.default(self, obj)
  File "D:\Anoconda\lib\json\encoder.py", line 180, in default
    o.__class__.__name__)
TypeError: Object of type 'set' is not JSON serializable
127.0.0.1 - - [01/Jun/2018 16:45:07] "POST /_dash-update-component HTTP/1.1" 500 -

In [ ]:


In [ ]: