Heroku test

Procfile

@@ -0,0 +1 @@
+web: gunicorn app:server

app.py

@@ -3,9 +3,20 @@
 import dash_html_components as html
 import plotly.graph_objects as go
 import pandas as pd
-import os
+import numpy as np
 from dash.dependencies import ClientsideFunction, Input, Output
 
+import urllib.request, json
+
+with urllib.request.urlopen('https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json') as url:
+    data_geo = json.loads(url.read().decode())
+
+for feature in data_geo['features']:
+    feature['id'] = feature['properties']['name']
+path_datasets = 'https://raw.githubusercontent.com/nalpalhao/DV_Practival/master/datasets/'
+df_emissions = pd.read_csv(path_datasets + 'emissions.csv')
+df_emission_0 = df_emissions.loc[df_emissions['year'] == 2000][['country_name', 'CO2_emissions']]
+
 case_df = pd.read_csv(('../../Project1/data/Case.csv'))
 
 nationality_options = ["Afghan", "Albanian", "Algerian", "American", "Andorran", "Angolan", "Antiguans", "Argentinean",
@@ -37,7 +48,7 @@
             multi=True
         )
     ],
-        #className='stack-top'
+        # className='stack-top'
     ),
 ],
     id="filters-container",
@@ -71,7 +82,12 @@
     id="info_bar"
 )
 
-
+selected_country_layout = html.Div([
+    html.H4("Insert selected country"),
+],
+    id="selected_country",
+    style={"display": "none"}
+)
 print(dcc.__version__)  # 0.6.0 or above is required
 
 app = dash.Dash(__name__, external_stylesheets='')
@@ -94,41 +110,102 @@
     ),
     filters_layout,
     info_bar_layout,
+    selected_country_layout,
 ],
     id='page-content',
     style={'position': 'relative'},
 )
 
+#################
+#   Figures     #
+#################
+selections = set()
+country_names = {feature['properties']['name']: feature for feature in data_geo['features']}
+
+
+def get_highlights(selections, geojson=data_geo, country_names=country_names):
+    geojson_highlights = dict()
+    for k in geojson.keys():
+        if k != 'features':
+            geojson_highlights[k] = geojson[k]
+        else:
+            geojson_highlights[k] = [country_names[selection] for selection in selections]
+    return geojson_highlights
+
+
+selected_country = ""
+
+
+@app.callback(Output('selected_country', "style"),
+              Output('selected_country', "children"),
+              [Input('map', 'clickData')])
+def update_selected_country(clickData):
+    global selected_country
+    location = ""
+    if clickData is not None:
+        location = clickData['points'][0]['location']
+        if location != selected_country:
+            selected_country = location
+            style = {'display': 'block'}
+        else:
+            selected_country = ""
+            location = ""
+            style = {'display': 'none'}
+    else:
+        selected_country = ""
+        location = ""
+        style = {'display': 'none'}
+
+    country_info = html.Div([
+        html.H3(location),
+        html.Canvas(width=300, height=300)
+    ])
+    return style, country_info
+
 
 @app.callback(Output('map', 'figure'),
               [Input('filters_drop', 'value')],
+              #              [Input('map', 'clickData')],
               Input('width', 'n_clicks'),
               Input('height', 'n_clicks'))
-def update_map(filter_list, width, height):
-    fig = go.Figure()
-    fig.add_trace(
-        go.Scattermapbox(
-            lat=case_df.latitude,
-            lon=case_df.longitude,
-            text=case_df.infection_case,
+def update_map(filter_list, width, height):#clickData
+    """if clickData is not None:
+        location = clickData['points'][0]['location']
 
-            mode='markers',
+        if location not in selections:
+            selections.add(location)
+        else:
+            selections.remove(location)
 
-            marker=dict(
-                size=case_df.confirmed * 2,
-                color="rgb(243,203,70)",
-
-                sizemode='area',
-                showscale=False,
-
-            ),
-            showlegend=False
-        )
+        print(selections)
+    """
+    fig = go.Figure()
+    fig.add_trace(
+        go.Choroplethmapbox(geojson=data_geo,
+                            locations=df_emission_0['country_name'],
+                            z=df_emission_0['CO2_emissions'],
+                            zmin=0,
+                            colorscale=[[0, "rgb(255,255,255)"], [1, "rgb(145, 100, 162)"]]
+                            )
     )
-
+    """
+    if len(selections) > 0:
+        highlights = get_highlights(selections, data_geo)
+        fig.add_trace(
+            go.Choroplethmapbox(geojson=highlights,
+                                colorscale=[[0, "rgba(0,0,0,255)"], [1, "rgba(0, 0, 0, 255)"]],
+                                locations=df_emission_0['country_name'])
+        )
+        print(highlights)
+    """
     mapbox_token = "pk.eyJ1IjoiZmFya2l0ZXMiLCJhIjoiY2ttaHYwZnQzMGI0cDJvazVubzEzc2lncyJ9.fczsOA4Hfgdf8_bAAZkdYQ"
     all_plots_layout = dict(
         mapbox=dict(style="light",
+                    layers=[dict(source=feature,
+                                 below='traces',
+                                 type='fill',
+                                 fill=dict(outlinecolor='gray')
+                                 ) for feature in data_geo['features']],
                     accesstoken=mapbox_token,
                     ),
         autosize=False,
@@ -140,6 +217,16 @@ def update_map(filter_list, width, height):
 
     )
     fig.layout = all_plots_layout
+    """
+    if len(selections) > 0:
+        highlights = get_highlights(selections, data_geo)
+        fig.update_mapboxes(dict(
+                                layers=[dict(source=highlight,
+                                              below='traces',
+                                              type='fill',
+                                              fill=dict(outlinecolor='red')
+                               ) for highlight in highlights]))
+    """
     return fig
 
 
@@ -164,6 +251,5 @@ def update_map(filter_list, width, height):
     [Input('url', 'href')],
 )
 
-
 if __name__ == '__main__':
     app.run_server(debug=True)

assets/style.css

@@ -158,7 +158,9 @@ button { /* Style of the buttons*/
   top:1%;
   left:1%;
 }
-
+#filters-container:hover{
+    opacity:1;
+}
 #filters-container h2{
     margin: 5px;
 }
@@ -241,4 +243,27 @@ button { /* Style of the buttons*/
     margin: 20;
     position: absolute;
     bottom: 3%;
+}
+
+#info_bar:hover {
+    opacity: 1;
+}
+
+#selected_country{
+    background-color: #333333;
+    padding: 10px;
+    color: #FFFFFF;
+    opacity: 0.6;
+    border-radius: 5px;
+    height: wrap-content;
+    width: wrap-content;
+    position: absolute;
+    top: 2%;
+    left: 70%;
+}
+#selected_country h3{
+    margin: 10px;
+}
+#selected_country:hover{
+    opacity:1;
 }