Feature/map reorg

README.md

@@ -20,10 +20,14 @@ python dashboard.py
 Then navigate to [http://127.0.0.1:8050/](http://127.0.0.1:8050/) in your browser to see the graphs.
 
 
-**Note:** For component pieces, see `test_components` folder; they are run similarly.
-
 ### Preview
-![image](dashboard_preview.png)
+
+#### Histogram View
+![image](dashboard_preview_hist.png)
+
+#### Map View
+![image](dashboard_preview_map.png)
+
 
 ### Running Tests
 

components/divs.py

@@ -0,0 +1,110 @@
+from dash import html, dcc
+
+def get_hist_div(cat_list, sort_list, H4_style, div_style):
+    '''
+    Function to generate the histogram options section of the dashboard, including button to select 'Map View'. 
+    Provides choice of variables for distribution and to color by, with options for order to sort x-axis.
+
+    Parameters:
+    -----------
+    cat_list - List of categorical variables to be used for distribution and color-by options.
+    sort_list - List of options for sorting x-axis of histogram.
+    H4_style - Style setting for html Header 4.
+    div_style - Style setting for div containers. 
+
+    Returns:
+    --------
+    hist_div - HTML Div containing all user options for histogram (variable for distribution, coloring, and order to sort x-axis), plus and 'Map View' button.
+
+    '''
+    hist_div = [
+        html.Div([
+            html.H4("Show me the distribution of ...", style = H4_style),
+            # Add dropdown options
+            # x-axis (feature) distribution options: 'Subspecies', 'Additional Taxa Information', 'Locality'
+            dcc.RadioItems(cat_list[:2] + cat_list[5:], 
+                        'Subspecies',
+                        id = 'x-variable')
+            ], style = div_style
+            ),
+
+        html.Div([
+            html.H4("Colored by ...", style = H4_style),
+        #select color-by option: 'View', 'Sex', 'Hybrid Status'
+            dcc.RadioItems(cat_list[2:-2],
+                            'View',
+                            id = 'color-by')
+            ], style = div_style
+        ),
+
+        html.Div([
+        html.H4("Sort distribution ", style = {'color': 'MidnightBlue', 'margin-top' : 10, 'margin-bottom' : 10}),
+        dcc.RadioItems(sort_list,
+                        'alpha',
+                        id = 'sort-by',
+                        inline = True)
+                ], style = div_style
+        ),
+        html.Div([
+        # Button to switch to Map View
+        html.Button("Show Map View",
+                    id = 'dist-view-btn',
+                    n_clicks = 0)
+                ], style = div_style
+        )
+        ]
+    return hist_div
+
+def get_map_div(cat_list, H4_style, div_style):
+    '''
+    Function to generate the mapping options section of the dashboard. 
+    Provides choice of variables to color by and button to switch back to histogram ('Show Histogram').
+
+    Parameters:
+    -----------
+    cat_list - List of categorical variables to be used for color-by options.
+    H4_style - Style setting for html Header 4.
+    div_style - Style setting for div containers.
+
+    Returns:
+    --------
+    map_div - HTML Div containing all user options for map (variables for coloring) and 'Show Histogram' button.
+
+    '''
+    map_div = [
+        html.Div([
+            html.H4('''
+                    This map shows the distribution of samples by locality, 
+                    where the size of the dots is determined by the total number of samples at that location.
+                    ''', 
+                    id = 'x-variable', #label to avoid nonexistent callback variable
+                    style = {'color': 'MidnightBlue', 'margin-left': 20, 'margin-right': 20}
+                )
+            ], style = {'width': '48%', 'display': 'inline-block', 'vertical-align': 'bottom'}
+            ),
+
+        html.Div([
+            html.H4("Colored by ...", style = H4_style),
+            #select color-by option: 'Species', 'Subspecies', 'View', 'Sex', 'Hybrid Status', 'Additional Taxa Information', 'Locality'
+            dcc.RadioItems(cat_list,
+                            'View',
+                            id = 'color-by',
+                            style = {'padding-right': '20%', 'display': 'inline-flex', 'flex-wrap': 'wrap', 'flex-direction': 'row', 'justify-content': 'space-between'})
+            ], style = {'width': '48%', 'display': 'inline-block', 'margin-bottom': 20}
+        ),
+
+       html.Div([
+               ], 
+               id = 'sort-by', #label sort-by box to avoid non-existent label and generate box so button doesn't move between views
+               style = div_style
+        ), 
+        html.Div([
+        # Distribution View Type Button
+        html.Button("Show Histogram",
+                    id = 'dist-view-btn',
+                    n_clicks = 0)
+                ], style = div_style
+        )
+    ]
+
+    return map_div

components/graphs.py

@@ -1,26 +1,57 @@
 import plotly.express as px
 
+def make_hist_plot(df, x_var, color_by, sort_by):
+    '''
+    Generates interactive histogram of selected variable, with option of properties to color by and order in which to sort.
+
+    Parameters:
+    -----------
+    df - DataFrame of specimens.
+    x_var - Variable to plot distribution.
+    color_by - Property to color the plot by.
+    sort_by - Ordering of bar charts (Alphabetical, Ascending, or Descending).
 
-def make_map(df):
+    Returns: 
+    --------
+    fig - Histogram of the distribution of the requested variable.
     '''
-    Generates interactive graph of Species and Subspecies by location.
+    if sort_by == 'alpha':
+        fig = px.histogram(df.sort_values(x_var),
+                        x = x_var,
+                        color = color_by,
+                        color_discrete_sequence = px.colors.qualitative.Bold)
+    else:
+        fig = px.histogram(df,
+                        x = x_var,
+                        color = color_by,
+                        color_discrete_sequence = px.colors.qualitative.Bold).update_xaxes(categoryorder = sort_by)
+
+    fig.update_layout(title = {'text': f'Distribution of {x_var} Colored by {color_by}'})
+
+    return fig
+
+def make_map(df, color_by):
+    '''
+    Generates interactive map of species and subspecies by location.
 
     Parameters:
     -----------
-    df - dataframe of specimens
+    df - DataFrame of specimens.
+    color_by - Selected categorical variable by which to color.
 
     Returns: 
     --------
-    fig - Map of their locations
+    fig - Map of their locations.
     '''
     fig = px.scatter_geo(df,
                         lat = df.lat,
                         lon = df.lon,
                         projection = "natural earth",
-                        hover_data = ["Species", "Subspecies"],
-                        size = df.samples_at_locality,
-                        color = "Subspecies",
-                        color_discrete_sequence = px.colors.qualitative.Bold)
+                        custom_data = ["Samples_at_locality", "Species_at_locality", "Subspecies_at_locality"],
+                        size = df.Samples_at_locality,
+                        color = color_by,
+                        color_discrete_sequence = px.colors.qualitative.Bold,
+                        title = "Distribution of Samples")
 
     fig.update_geos(fitbounds = "locations",
                     showcountries = True, countrycolor = "Grey",
@@ -29,4 +60,40 @@ def make_map(df):
                     showland = True, landcolor = "wheat",
                     showocean = True, oceancolor = "LightBlue")
 
+    fig.update_traces(hovertemplate = 
+                        "Latitude: %{lat}<br>"+
+                        "Longitude: %{lon}<br>" +
+                        "Samples at lat/lon: %{customdata[0]}<br>" +
+                        "Species at lat/lon: %{customdata[1]}<br>" +
+                        "Subspecies at lat/lon: %{customdata[2]}<br>"
+    )
+
     return fig
+
+def make_pie_plot(df, var):
+    '''
+    Generates interactive pie chart of dataset specimens with option of properties to color by.
+
+    Parameters:
+    -----------
+    df - DataFrame of specimens.
+    var - Selected categorical variable by which to color.
+
+    Returns: 
+    --------
+    fig - Pie chart of the percentage breakdown of the `var` samples in the dataset.
+    '''
+    if(var == 'Subspecies'):
+        pie_fig = px.pie(df,
+                 names = var,
+                 color_discrete_sequence = px.colors.qualitative.Bold,
+                 hover_data = ['Species'])
+    else:
+        pie_fig = px.pie(df,
+                 names = var,
+                 color_discrete_sequence = px.colors.qualitative.Bold)
+        pie_fig.update_traces(textposition = 'inside', textinfo = 'percent+label')
+
+    pie_fig.update_layout(title = {'text': f'Percentage Breakdown of {var}'})
+
+    return pie_fig