all

.gitignore

@@ -0,0 +1,2 @@
+data processing/*
+*.csv

app.py

@@ -0,0 +1,57 @@
+import yaml
+import streamlit as st
+from yaml.loader import SafeLoader
+import streamlit_authenticator as stauth
+from streamlit_authenticator.utilities.exceptions import (CredentialsError,ForgotError,LoginError,RegisterError,ResetError,UpdateError) 
+from streamlit_extras.switch_page_button import switch_page
+import pickle
+
+#  https://docs.kanaries.net/topics/Streamlit/streamlit-authentication
+# Loading config file
+
+
+if 'auth' not in st.session_state:
+    st.session_state['auth'] = ''
+if 'logged_in' not in st.session_state:
+    st.session_state['logged_in'] = ''
+
+st.session_state["authentication_status"] = None
+st.session_state['logged_in'] = False
+
+filehandler = open(b"login_state.pkl","wb")
+pickle.dump(st.session_state['logged_in'],filehandler)
+
+with open('config.yaml', 'r', encoding='utf-8') as file:
+    config = yaml.load(file, Loader=SafeLoader)
+
+# Creating the authenticator object
+authenticator = stauth.Authenticate(
+    config['credentials'],
+    config['cookie']['name'],
+    config['cookie']['key'],
+    config['cookie']['expiry_days'],
+    config['pre-authorized']
+)
+st.session_state['auth'] = authenticator
+# Creating a login widget
+try:
+    a = authenticator.login()
+    print(a)
+except LoginError as e:
+    st.error(e)
+
+if st.session_state["authentication_status"]:
+    authenticator.logout()
+    st.session_state["logged_in"] = True
+    filehandler = open(b"login_state.pkl","wb")
+    pickle.dump(st.session_state['logged_in'],filehandler)
+    switch_page("page_0")
+elif st.session_state["authentication_status"] is False:
+    st.error('Username/password is incorrect')
+elif st.session_state["authentication_status"] is None:
+    st.warning('Please enter your username and password')
+
+st.subheader("CONFIDENTIALITY NOTICE:  This Dashboard, its analysis and any accompanying data / documents contain information belonging to the San Bernardino Public Defender's Office which may be confidential and legally bounded by The work product doctrine. This information is only for the use of the individual or entity to which it was intended.")
+
+
+

config.yaml

@@ -0,0 +1,22 @@
+cookie:
+  expiry_days: 30
+  key: some_signature_key
+  name: some_cookie_name
+credentials:
+  usernames:
+    jsmith:
+      email: [email protected]
+      failed_login_attempts: 1
+      logged_in: false
+      name: John Smith
+      password: $2b$12$s2mQzQ48FgmiSAMOoCzdouAkPQHsedGRez3YzENiXg1GbfSVgh9.S
+    rbriggs:
+      email: [email protected]
+      failed_login_attempts: 0
+      logged_in: false
+      name: Rebecca Briggs
+      password: $2b$12$2dsnPNiOaHWTitR2cml/u.Uc8SS0Akwte8YUbGnpQvaPGuyVgEcce
+    
+pre-authorized:
+  emails:
+  - [email protected]

list_of_charges.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c405a2ac0a2a45f1422252d7ce4045863c265107bad8e22faee67bc3d1efe888
+size 17682

list_of_charges_detailed.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c9de3714c2ce0a0bc7b7b65daf673472223fb98bbe78e9a4f9c5d8f8226d6d20
+size 103520

login_state.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:112bda3b495d867b6a98c899fac7c25eb60ca4b6e6fe5ec7ab9299f93e8274bc
+size 4

pages/page_0.py

@@ -0,0 +1,142 @@
+import streamlit as st
+import numpy as np
+import plotly.figure_factory as ff
+import plotly.express as px
+import pandas as pd
+import plotly.graph_objects as go
+import streamlit_authenticator as stauth
+from st_aggrid import GridOptionsBuilder, AgGrid, GridUpdateMode, DataReturnMode
+from streamlit_extras.stylable_container import stylable_container 
+from streamlit_extras.metric_cards import style_metric_cards
+import warnings
+from streamlit_extras.switch_page_button import switch_page
+import pickle
+import time
+import plotly.io as pio
+
+pio.templates.default = 'plotly' 
+warnings.filterwarnings('ignore')
+
+st.set_page_config(layout="wide")
+color = {'Unknown/Other':'#3a393a', 'Black or African American': '#2993A3', 'White':'#666766', 'Native American':'#f4b780', 'Hispanic':'#a0cd7c', 'Pacific Islander':'#a680ba','Asian':'#f37e85'}
+
+file = open("login_state.pkl",'rb')
+st.session_state['logged_in'] = pickle.load(file)
+file.close()
+
+#----------------------------NavBar-------------------------------#
+hide_menu_style = """
+        <style>
+        #MainMenu {visibility: hidden;}
+        header {visibility: hidden;}
+        </style>
+        """
+st.markdown(hide_menu_style, unsafe_allow_html=True)
+
+if st.session_state.get("logged_in") == False or st.session_state.get("logged_in") == None:
+    st.switch_page("app.py")
+
+st.markdown('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">', unsafe_allow_html=True)
+st.markdown("""
+            <head>
+            <script defer src="https://pyscript.net/latest/pyscript.js"></script>
+            </head>
+<nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: #3498DB;">
+  <a class="navbar-brand" href="https://www.ipr.northwestern.edu/who-we-are/faculty-experts/redbird.html" target="_blank">RJA Dashboard</a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="collapse navbar-collapse" id="navbarNav" style="width:100%;">
+    <ul class="navbar-nav">
+      <li class="nav-item active">
+        <a class="nav-link disabled" href="https://sanbernardinorja.streamlit.app/page_0" target="_self">Arrest Summary<span class="sr-only">(current)</span></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="https://sanbernardinorja.streamlit.app/page_1" target="_self">Charge By Race</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="https://sanbernardinorja.streamlit.app/page_2" target="_self">Download Data</a>
+      </li>
+      </ul>
+      <ul class="navbar-nav ml-auto">
+        <li class="nav-item mr-auto" style="padding-left:5px;padding-right:5px;outline-color:#f0f2f5;border: 2px solid white;border-radius:10px;"> 
+            <a class="nav-link" href="https://sanbernardinorja.streamlit.app/" target="_self" >Logout</a>
+     </li>
+    </ul>
+  </div>
+
+</nav>
+
+""", unsafe_allow_html=True)
+
+#------------------------------- Metric Cards ------------------------#
+
+pop = pd.read_csv("Population.csv")
+cols = st.columns(2)
+cols[0].metric(label="Felony Convicitons for the Population (2015-2023)", value=32979, delta='inc')
+v = int(pop.loc[0, pop.columns.str.contains("Black")].values[0]) / int(pop.loc[0, pop.columns.str.contains("White")].values[0])
+cols[1].metric(label="Black : White Population ratio", value=str(round(v*100, 2))+"/100", delta = "As per 2020")
+style_metric_cards()
+
+#------------------------------- Page 0 ------------------------------#
+Page0 = st.container(border=True)
+Page0 = stylable_container(key="Page0", css_styles=[""" {box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 25px;}"""])#, """{background-color:white;opacity:0.8;}"""])#, """  {border: 2px solid rgba(49, 51, 63, 0.2); border-radius: 10px;}"""])
+
+cols = Page0.columns([0.5,5.5,0.2,3.3,0.5])
+cols[1].header("Most Common Charges Booked in the County", anchor='section-1', help="A Graph to understrand the most commnly charged crimes in the county by racial distribution. The graph gives a yearly estimates of the crimes. You can choose to see the data by Race/Race and see upto top 300.")
+
+cols = Page0.columns([0.5,3, 3,3,0.5])
+Race = cols[1].selectbox('Select Race', tuple(color.keys()), index=None)
+Dec = cols[2].selectbox('Change Data', tuple(['Court Data', 'Curently Incarcerated']), index=0)
+
+st.markdown("""
+    <style>
+    .stSlider [data-baseweb=slider]{
+        width: 100%;
+    }
+    </style>
+    """,unsafe_allow_html=True)
+timeline = cols[3].slider('Select Timeline for Cases', 1990, 2022, (2015,2021))
+
+cols = Page0.columns([6.5,3.5])
+
+if Race != None:
+    df1 = pd.read_csv("Court_appA.csv") if Dec == 'Court Data' else pd.read_csv("Incarceration_appA.csv")
+    df1 = df1[df1['Race'] == Race]
+    df1 = df1[(df1['year'] >= timeline[0]) & (df1['year'] <= timeline[1])]
+    df1 = df1[['Charges', 'Race', 'count']].groupby('Charges').agg({'count':'sum'}).reset_index()
+    df1['count'] = (df1['count'] / (timeline[1] - timeline[0])) if timeline[1] != timeline[0] else df1['count']
+    df1 = df1.sort_values('count')
+    fig = px.bar(pd.DataFrame(df1[-40:]), y='Charges', x='count', orientation='h')
+    fig.update_traces(marker_color=color[Race])
+else:
+    df1 = pd.read_csv("Court_appB.csv") if Dec == 'Court Data' else pd.read_csv("Incarceration_appB.csv")
+    df1 = df1[(df1['year'] >= timeline[0]) & (df1['year'] <= timeline[1])]
+    df1 = df1[['Charges', 'Race', 'count']].groupby(['Charges','Race']).agg({'count':'sum'}).reset_index()
+    df1['count'] = (df1['count'] / (timeline[1] - timeline[0])) if timeline[1] != timeline[0] else df1['count']
+    df1 = df1.sort_values(['Charges', 'count'])
+    fig = px.bar(df1, y='Charges', x='count', orientation='h', color_discrete_map=color, color='Race')
+    fig.update_layout(barmode='stack', yaxis={'categoryorder':'total ascending'})
+
+if Dec == 'Court Data':
+  fig.update_layout(width=900, height=900, xaxis = {'side':'top'},title_y=0.99, xaxis_title="Number of Cases Per Year", yaxis_title="Charges")
+else:
+   fig.update_layout(width=900, height=900, xaxis = {'side':'top'},title_y=0.99, xaxis_title="Total Cases", yaxis_title="Charges")
+
+fig.update_layout(legend=dict(yanchor="top", y=0.7, xanchor="left", x=0.6)) 
+
+cols[0].plotly_chart(fig, theme=None)
+
+# df = pd.read_excel("California Penal Code .xlsx")
+# # dfx = pd.read_csv("Court_appB.csv") 
+# # df1 = df1[['Charges', 'count']].groupby(['Charges']).agg({'count':'sum'}).reset_index()
+# # df1 = df1.sort_values(['Charges', 'count'])
+
+# cols[1].markdown('######')
+# cols[1].markdown('####')
+# cols[1].dataframe(df, height=760)
+
+# if st.session_state["authentication_status"]:
+#   st.session_state.auth.logout()
+# else:
+#    switch_page('app')

pages/page_1.py

@@ -0,0 +1,187 @@
+import streamlit as st
+import numpy as np
+import plotly.figure_factory as ff
+import plotly.express as px
+import pandas as pd
+import plotly.graph_objects as go
+import os
+import argparse
+from st_aggrid import GridOptionsBuilder, AgGrid, GridUpdateMode, DataReturnMode
+from PIL import Image
+from streamlit_extras.stylable_container import stylable_container 
+from streamlit_extras.metric_cards import style_metric_cards
+import pickle
+
+# Implement AND condition when downloading data
+st.set_page_config(layout="wide")
+color = {'Black or African American': '#2993A3', 'White':'#666766', 'Native American':'#f4b780', 'Hispanic':'#a0cd7c', 'Pacific Islander':'#a680ba', 'Unknown/Other':'#3a393a','Asian':'#f37e85'}
+
+file = open("login_state.pkl",'rb')
+st.session_state['logged_in'] = pickle.load(file)
+file.close()
+#print(st.session_state.get("logged_in"))
+
+
+#----------------------------NavBar-------------------------#
+hide_menu_style = """
+        <style>
+        #MainMenu {visibility: hidden;}
+        header {visibility: hidden;}
+        </style>
+        """
+st.markdown(hide_menu_style, unsafe_allow_html=True)
+# print(st.session_state.get("logged_in"))
+
+if st.session_state.get("logged_in") == False or st.session_state.get("logged_in") == None:
+    st.switch_page("app.py")
+
+
+
+st.markdown('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">', unsafe_allow_html=True)
+
+st.markdown("""
+<nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: #3498DB;background-image:url('/Users/shaashwatagrawal/Documents/SF County/dashboard/Background.jpeg');">
+  <a class="navbar-brand" href="https://www.ipr.northwestern.edu/who-we-are/faculty-experts/redbird.html" target="_blank">RJA Dashboard</a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="collapse navbar-collapse" id="navbarNav">
+    <ul class="navbar-nav">
+      <li class="nav-item">
+        <a class="nav-link disabled" href="https://sanbernardinorja.streamlit.app/page_0" target="_self">Arrest Summary</a>
+      </li>
+      <li class="nav-item active">
+        <a class="nav-link" href="https://sanbernardinorja.streamlit.app/page_1" target="_self">Charge By Race<span class="sr-only">(current)</span></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="https://sanbernardinorja.streamlit.app/page_2" target="_self">Download Data</a>
+      </li>
+    </ul>
+                  <ul class="navbar-nav ml-auto">
+        <li class="nav-item mr-auto" style="padding-left:5px;padding-right:5px;outline-color:#f0f2f5;border: 2px solid white;border-radius:10px;"> 
+            <a class="nav-link" href="https://sanbernardinorja.streamlit.app/" target="_self" >Logout</a>
+     </li>
+    </ul>
+  </div>
+</nav>
+""", unsafe_allow_html=True)
+
+
+#---------------------------- Page 2 ----------------------------#
+cols = st.columns(2)
+
+Page2 = stylable_container(key="Page2", css_styles=""" {box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 15px;}""")
+cols = Page2.columns([4,3,3])
+cols[1].header("Charges By Race", anchor = 'section-2', help = 'Understanding Disparity at different stages of a criminal proceeding (i.e. Arrest, Charging and Sentencing).')
+# parser = argparse.ArgumentParser()
+# parser.add_argument('--charge', type=str, default='187A')
+# args = parser.parse_args()
+
+with open("list_of_charges.pkl", "rb") as fp:   # Unpickling
+  charges = pickle.load(fp)
+
+col = Page2.columns([0.5, 9, 0.5])
+PC = col[1].multiselect('Select Type of Charge', tuple(charges), default='459')#index=list(charges).index(args.charge))
+
+# Reading and Processing Data
+pop = pd.read_csv("Population.csv")
+
+df = pd.read_csv("Arrest_page1.csv")
+#df = df[df['Charges'].str.contains('|'.join(PC))]
+
+dfr = pd.read_csv("Court_page1.csv")
+#print(PC)
+#dfr = dfr[dfr['Charges'].str.contains('|'.join(PC))]
+#print(dfr)
+
+dfd = pd.read_csv("Sentence_page1.csv")
+#dfd = dfd[dfd['Charges'].str.contains('|'.join(PC))]
+
+cols = Page2.columns([0.5,2.25,2.25,0.5,2.5,1.5,0.5])
+#cols[1].subheader("Offence by Race")
+
+st.markdown("""
+    <style>
+    .stSlider [data-baseweb=slider]{
+        width: 100%;
+    }
+    </style>
+    """,unsafe_allow_html=True)
+timeline = cols[2].slider('Select Timeline for Cases', 1990, 2024, (2015,2023))
+perCap = cols[1].selectbox("Display Graph Per Capita", ("No", "Yes"), index=1)
+cols[4].subheader("Charge Percentage Ratio")
+
+c1, c2, c3, c4, c5 = Page2.columns([4.5, 0.5, 0.5, 4, 0.5])
+with c1:
+    df = pd.concat([dfd, dfr, df], ignore_index=True, axis=0)
+    df = df[df['Charges'].str.fullmatch('|'.join(PC), na=False)]
+    df = df[(df['year'] >= timeline[0]) & (df['year'] <= timeline[1])]
+    df = df[df['Race'] != 'Unknown/Other']
+    
+    df = df[['Charge Type', 'Race', 'Charges', 'count', 'normalized_vals']].groupby(['Charge Type','Race']).agg({'count':'sum', 'normalized_vals':'sum'}).reset_index()
+    custom_dict = {'Booking Charge': 0, 'Filed Charge': 1, 'Conviction Charge': 2} 
+    
+    df = df.sort_values(by=['Charge Type'], key=lambda x: x.map(custom_dict), ascending=False)
+    xaxs = 'count' if perCap == "No" else "normalized_vals"
+    fig = px.bar(df, y='Charge Type', x=xaxs,color_discrete_map=color, color='Race', orientation='h')
+    fig.update_layout(width=700, height=600,)
+    fig.update_layout(xaxis_title="Number of Cases", yaxis_title="")
+    fig.update_layout(legend=dict(yanchor="bottom", y=1.0, xanchor="left", x=-0.17, orientation='h', entrywidth=150)) 
+    fig.update_layout(font=dict(family="Myriad Pro",size=14))
+    fig.update_yaxes(tickangle=270, automargin= True)
+    st.plotly_chart(fig, theme=None)
+
+with c4:
+    sel_col = 'count' if perCap == "No" else "normalized_vals"
+    cc1, cc2 = st.columns(2)
+    with cc1:
+        PCRace = st.selectbox('Select Race to Compare with', tuple(set(list(df['Race'].unique()) + list(dfr['Race'].unique()))))
+    with cc2:
+        st.header(" / White")
+    r1 = df[(df['Race'] == PCRace) & (df['Charge Type'] == 'Booking Charge')][sel_col].sum()*(10000000)
+    r2 = df[(df['Race'] == 'White') & (df['Charge Type'] == 'Booking Charge')][sel_col].sum()*(10000000)
+
+    if r2 != 0:
+        val = '%0.2f'%(r1/r2)+'/1'
+    else:
+        val = '%0.2f'%(r1)+'/'+str(r2)
+    new_title = '<p style="font-family:Myriad Pro; color:Black; font-size: 20px;display: inline;vertical-align: top;">'+PCRace+' rate of arrests by the white rate of arrests:  '+val+'</p>'
+    #st.markdown(new_title, unsafe_allow_html=True)
+    #st.markdown('####')
+    #st.markdown('####')
+    st.metric(label= PCRace+' rate of arrests by the white rate of arrests:' , value=val, delta=None)
+    style_metric_cards()
+
+
+    r1 = df[(df['Race'] == PCRace) & (df['Charge Type'] == 'Filed Charge')][sel_col].sum()*(10000000)
+    r2 = df[(df['Race'] == 'White') & (df['Charge Type'] == 'Filed Charge')][sel_col].sum()*(10000000) 
+
+    if r2 != 0:
+        val = '%0.2f'%(r1/r2)+'/1'
+    else:
+        val = '%0.2f'%(r1)+'/'+str(r2)
+    new_title = '<p style="font-family:Myriad Pro; color:Black; font-size: 20px;display: inline;vertical-align: top;">'+PCRace+' rate of charging by the white rate of charging is:  '+val+'</p>'
+    # st.markdown(new_title, unsafe_allow_html=True)
+    # st.markdown('####')
+    # st.markdown('####')
+    st.metric(label=PCRace+' rate of charging by the white rate of charging is:  ', value=val, delta=None)
+    style_metric_cards()
+
+    r1 = (df[(df['Race'] == PCRace) & (df['Charge Type'] == 'Conviction Charge')][sel_col].sum()*(10000000))
+    r2 = (df[(df['Race'] == 'White') & (df['Charge Type'] == 'Conviction Charge')][sel_col].sum()*(10000000))
+
+    #st.text(PCRace3+" rate of being sentenced by the white rate of being sentenced")
+    if r2 != 0:
+        val = '%0.2f'%(r1/r2)+'/1'
+    else:
+        val = '%0.2f'%(r1)+'/'+str(r2)
+    new_title = '<p style="font-family:Myriad Pro; color:Black; font-size: 20px;display: inline;vertical-align: top;">'+PCRace+' rate of being sentenced by the white rate of being sentenced is:  '+val+'</p>'
+    # st.markdown(new_title, unsafe_allow_html=True)
+    st.metric(label=PCRace+' rate of being sentenced by the white rate of being sentenced is:  ', value=val, delta=None)
+    style_metric_cards()
+
+
+
+
+
+

pages/page_2.py

@@ -0,0 +1,121 @@
+import streamlit as st
+import numpy as np
+import plotly.figure_factory as ff
+import plotly.express as px
+import pandas as pd
+import plotly.graph_objects as go
+from streamlit_extras.stylable_container import stylable_container 
+import pickle
+import ast
+
+# Implement AND condition when downloading data
+
+st.set_page_config(layout="wide")
+color = {'Black or African American': '#ff7eb6', 'White':'#be95ff', 'Native American':'#0f62fe', 'Indian':'#82cfff', 'Japanese':'lightyellow', 'Korean':'gray','Chinese':'yellow', 'Hispanic':'#dface6', 'Pacific Islander':'#3ddbd9', 'Unkown/Other':'#c1c7cd','Filipino':'Green', 'Middle Eastern':'#000000','Vietnamese':'coral','Laotian':'cornsilk','Cambodian':'darkcyan','Other Asian':'darkgoldenrod', 'Asian':'#82cfff',}
+
+file = open("login_state.pkl",'rb')
+st.session_state['logged_in'] = pickle.load(file)
+file.close()
+
+#----------------------------NavBar-------------------------#
+hide_menu_style = """
+        <style>
+        #MainMenu {visibility: hidden;}
+        header {visibility: hidden;}
+        </style>
+        """
+st.markdown(hide_menu_style, unsafe_allow_html=True)
+
+if st.session_state.get("logged_in") == False or st.session_state.get("logged_in") == None:
+    st.switch_page("app.py")
+
+
+st.markdown('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">', unsafe_allow_html=True)
+
+st.markdown("""
+            <head>
+            <script defer src="https://pyscript.net/latest/pyscript.js"></script>
+            </head>
+<nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: #3498DB;">
+  <a class="navbar-brand" href="https://www.ipr.northwestern.edu/who-we-are/faculty-experts/redbird.html" target="_blank">RJA Dashboard</a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="collapse navbar-collapse" id="navbarNav" style="width:100%;">
+    <ul class="navbar-nav">
+      <li class="nav-item active">
+        <a class="nav-link disabled" href="https://sanbernardinorja.streamlit.app/page_0" target="_self">Arrest Summary<span class="sr-only">(current)</span></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="https://sanbernardinorja.streamlit.app/page_1" target="_self">Charge By Race</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="https://sanbernardinorja.streamlit.app/page_2" target="_self">Download Data</a>
+      </li>
+      </ul>
+      <ul class="navbar-nav ml-auto">
+        <li class="nav-item mr-auto" style="padding-left:5px;padding-right:5px;outline-color:#f0f2f5;border: 2px solid white;border-radius:10px;"> 
+            <a class="nav-link" href="https://sanbernardinorja.streamlit.app/ target="_self" >Logout</a>
+     </li>
+    </ul>
+  </div>
+
+</nav>
+
+""", unsafe_allow_html=True)
+# with open("list_of_charges.pkl", "rb") as fp:   # Unpickling
+#   charges = pickle.load(fp)
+
+# Page 3
+Page3 = stylable_container(key="Page3", css_styles=""" {box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 15px;} """)
+Page3.header("Download Data", anchor = 'section-3', help  = 'Download data relevant to your case. Use the filters to Determine what data do you need.')
+selected_point = []
+#loc = "DA_referrals_2022(1).csv"
+
+Charge = Page3.selectbox('Select Type of Charge', ('Booking Charge', 'Filed Charge', 'CDCR'))
+
+loc = "Referral_page2.csv" if Charge == 'Booking Charge' else "Court_page2.csv" if Charge == 'Filed Charge' else "Sentence_page2.csv"
+df = pd.read_csv(loc)
+df = df.drop(columns='Unnamed: 0')
+uid = 'UID' if Charge == 'Booking Charge' else 'Case Number'
+filename = "list_of_charges.pkl" if Charge == 'Booking Charge' else "list_of_charges_detailed.pkl"
+with open(filename, "rb") as fp:   # Unpickling
+  charges = pickle.load(fp)
+
+
+#split_first = False if loc == "Referral_page2.csv" else True
+
+cols = Page3.columns(4)
+Filtera = cols[0].multiselect('Select Charges', tuple(charges), help='Select Charges relevant to your case and client')
+Filterb = cols[2].multiselect('Select Ethnicity', tuple(color.keys()), help='Select relevant Ethnicity')
+Filterc = cols[1].selectbox('Select Function - Charges', ("AND", "OR"), help="AND - All Clients charged with all chosen charges \n\n OR - All Clients charged with atleast one of the chosen charges")
+cols_list = df.columns.tolist()
+cols_list.remove('Charges')
+cols_list.remove('Race') 
+cols_list.remove(uid)
+Filterd = cols[3].multiselect('Select Additional Columns to View', tuple(cols_list), help="1. Incident Number - Unique Incident ID assigned to SF Cases \n\n 2. Gender - Gender of the perpetrator \n\n 3. Booked.Case.Type / Filed.Case.Type - Felony / Misdemeanor \n\n 4. Age.at.Arrest - Age at which the person was arrested \n\n 5. Status.CTNum / Status.CTNum.Agg - Case Status After arrest or filing i.e. new charges filed or discharged \n\n 6. Description - Arrest / Charges Description \n\n 7. Year - Year of Arrest for Booking charge / Year of Charging for Filed Charge or Sentenced For \n\n 8. Case.Dispo - Case Disposition Number \n\n 9. Dispo.Description - Final court decision")
+
+if len(Filtera) > 0:
+  filst = "|".join(Filtera)
+  df = df[df['Charges'].str.contains(filst, regex=True, na=False)]
+
+if len(Filterb) > 0:
+  filst = "|".join(Filterb)
+  df = df[df['Races'].str.contains(filst, regex=True, na=False)]
+
+if Filterc == 'AND' and len(Filtera) > 0:
+    cnos = [df[df['Charges'].str.contains(i)][uid].tolist() for i in Filtera]
+    cm_cnos = list(set.intersection(*map(set, cnos)))
+    df = df[df[uid].isin(cm_cnos)]
+    df = df.drop_duplicates()
+
+df[uid] = df[uid].map(str)
+
+for i in df.columns[1:]:
+   df[i] = df[i].str.strip('[]').str.split(',')
+
+disp_cols = [uid, 'Charges', 'Race'] + Filterd
+
+   
+Page3.dataframe(df[disp_cols],width=1300)
+