Hover and Unhover functionality

README.md

@@ -1,2 +1,22 @@
-# where_to_live
+# Where to live!
+Final project for Data Visualization Subject in the [Master Degree Program in Data Science and Advanced Analytics](https://www.novaims.unl.pt/mdsaa) in [Nova IMS (Universidade Nova de Lisboa)](https://www.novaims.unl.pt/default).
+This project was develop by [Daniel Philippi](https://github.com/danielphilippi), [Doris Macean](https://github.com/doridor), [Diogo Acabado](https://github.com/diogoacabado), and [myself](https://github.com/Farkites).
+
+
 Dashboard to compare different locations and the compatibility with personal preferences.
+
+It can be accessed in [here](https://where-to-live-app.herokuapp.com/)
+
+## Technologies
+* jupyter
+* matplotlib==3.3.4
+* seaborn==0.11.1
+* pandas==1.1.3
+* numpy==1.19.1
+* dash >=0.6.0
+* xlrd >= 1.0.0
+* openpyxl
+* plotly==4.9
+* kaleido==0.1.0
+* networkx==2.5
+* gunicorn==20.0.4

app.py

@@ -4,6 +4,7 @@
 import plotly.graph_objects as go
 import pandas as pd
 import numpy as np
+import visdcc
 from dash.dependencies import ClientsideFunction, Input, Output
 
 import urllib.request, json
@@ -17,8 +18,6 @@
 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",
                        "Tunisian", "Turkish", "Tuvaluan", "Ugandan", "Ukrainian", "Uruguayan", "Uzbekistani",
                        "Venezuelan", "Vietnamese", "Welsh", "Yemenite", "Zambian", "Zimbabwean"]
@@ -88,6 +87,14 @@
     id="selected_country",
     style={"display": "none"}
 )
+
+hovered_country_layout = html.Div([
+    html.H4("Insert selected country"),
+],
+    id="hovered_country",
+    style={"display": "none"},
+)
+
 print(dcc.__version__)  # 0.6.0 or above is required
 
 app = dash.Dash(__name__, external_stylesheets='')
@@ -96,11 +103,12 @@
 
 app.layout = html.Div([
     dcc.Location(id='url', refresh=False),
+
     html.Div([
         html.Div(id="width", style={'display': 'none'}),  # Just to retrieve the width of the window
         html.Div(id="height", style={'display': 'none'}),  # Just to retrieve the height of the window
         html.Div([
-            dcc.Graph(id='map')
+            dcc.Graph(id='map', clear_on_unhover=True, config={'doubleClick': 'reset'})
         ],
             style={'width': '100%', 'height': '100%'},
             className='background-map-container'
@@ -111,6 +119,7 @@
     filters_layout,
     info_bar_layout,
     selected_country_layout,
+    hovered_country_layout,
 ],
     id='page-content',
     style={'position': 'relative'},
@@ -163,6 +172,37 @@ def update_selected_country(clickData):
     return style, country_info
 
 
+hovered_country = ""
+
+
+@app.callback(Output('hovered_country', "style"),
+              Output('hovered_country', "children"),
+              [Input('map', 'hoverData')])
+def update_hovered_country(hoverData):
+    global hovered_country
+    location = ""
+    if hoverData is not None:
+        location = hoverData['points'][0]['location']
+        if location != hovered_country:
+            hovered_country = location
+            style = {'display': 'block'}
+        else:
+            hovered_country = ""
+            location = ""
+            style = {'display': 'none'}
+    else:
+        hovered_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')],
@@ -185,7 +225,8 @@ def update_map(filter_list, width, height):#clickData
                             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)"]]
+                            colorscale=[[0, "rgb(255,255,255)"], [1, "rgb(145, 100, 162)"]],
+                            hovertemplate="<extra></extra>"
                             )
     )
     """
@@ -251,6 +292,15 @@ def update_map(filter_list, width, height):#clickData
     [Input('url', 'href')],
 )
 
+app.clientside_callback(
+    ClientsideFunction(
+        namespace='clientside',
+        function_name='move_hover'
+    ),
+    Output('hovered_country', 'title'),
+    [Input('map', 'hoverData')],
+)
+
 server = app.server
 
 if __name__ == '__main__':

assets/style.css

@@ -266,4 +266,22 @@ button { /* Style of the buttons*/
 }
 #selected_country:hover{
     opacity:1;
-}
+}
+
+#hovered_country{
+    background-color: #333333;
+    padding: 10px;
+    color: #FFFFFF;
+    opacity: 0.8;
+    border-radius: 5px;
+    height: wrap-content;
+    width: wrap-content;
+    position: absolute;
+    z:1000;
+    top: 50%;
+    left: 70%;
+}
+
+#hovered_country h3{
+    margin: 10px;
+}

assets/utils.js

@@ -6,6 +6,33 @@ window.dash_clientside = Object.assign({}, window.dash_clientside, {
 
         get_window_height: function() {
             return window.innerHeight;
+        },
+
+        move_hover: function() {
+            document.onmousemove = handleMouseMove;
+            function handleMouseMove(event) {
+                var eventDoc, doc, body;
+
+                event = event || window.event; // IE-ism
+
+                if (event.pageX == null && event.clientX != null) {
+                    eventDoc = (event.target && event.target.ownerDocument) || document;
+                    doc = eventDoc.documentElement;
+                    body = eventDoc.body;
+
+                    event.pageX = event.clientX +
+                      (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
+                      (doc && doc.clientLeft || body && body.clientLeft || 0);
+                    event.pageY = event.clientY +
+                      (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
+                      (doc && doc.clientTop  || body && body.clientTop  || 0 );
+                }
+                //Use event.PageX ...
+                document.getElementById('hovered_country').style.top = event.pageY+5+"px";
+                document.getElementById('hovered_country').style.left = event.pageX+5+"px";
+
+            }
+            return "dummy";
         }
     }
-});
+});