CS 340 Dashboard Data Visualization

I am trying to create a dashboard to connect into MongoDB as followed in the given instructions below:
You have been asked to create a data table on the dashboard which shows an unfiltered view of the Austin Animal Center Outcomes data set. You have also been asked to add a geolocation chart to the dashboard, which will help the client visualize the data. For more details about the dash components for data tables and the geolocation chart, refer to the Module Six resources.
Open the ModuleSixMilestone.ipynb file, which contains the starter code for the Grazioso Salvare dashboard. Upload this file into Apporto and open it using the Jupyter Notebook application. Be sure to review all of the starter code that you have been given. Pay special attention to the import commands and the comments describing what each section of code does.Update the code to create an interactive data table on the dashboard which shows an unfiltered view of the Austin Animal Center Outcomes data set. To populate the data onto your table, you will utilize your previous CRUD Python module, from Project One, to run a “retrieve all” query and bring in the data from MongoDB. This data retrieval will serve to access the “model” portion of your MVC pattern: the MongoDB database. Be sure to hardcode in the username and password for the “aacuser” account.
Note: It may take a few minutes for the data table to fully render and display, depending on the speed of your internet connection.
Tip: Be sure to consider your client when creating the interactive data table. Consider optional features that will make the table easier to use, such as limiting the number of rows displayed, enabling pagination (advanced), enabling sorting, and so on. Review the Module Six resources on data tables to help you select and set up these features.Add a geolocation chart that displays data from the interactive data table to your existing dashboard.You are being given the function that sets up accessing the data for the geolocation chart and calls the Leaflet function: update_map:You will need to structure this function into your dashboard code by putting the correct statements in the layout. These statements are important so that your layout has a place for the geolocation chart. Here is an example statement:You will also need to add in the correct callback routines for the geolocation chart. These will look similar to the callback routines used for user authentication and your data table. Here is an example callback r..;@app.callback( Output(‘map-id’, “children”), [Input(‘datatable-id’, “derived_viewport_data”)])html.Div( id=’map-id’, className=’col s12 m6′, )def update_map(viewData): dff = pd.DataFrame.from_dict(viewData) # Austin TX is at [30.75,-97.48] return [ dl.Map(style={‘width’: ‘1000px’, ‘height’: ‘500px’}, center=[30.75,-97.48], zoom=10, children=[ dl.TileLayer(id=”base-layer-id”), # Marker with tool tip and popup dl.Marker(position=[30.75,-97.48], children=[ dl.Tooltip(dff.iloc[0,4]), dl.Popup([ html.H1(“Animal Name”), html.P(dff.iloc[1,9]) ]) ]) ]) ]
Therefore, I only have done what is below for my python module (PY) and Testing (IPYNB) files, but I have not been able to come into a solution. I have error messageses when mongo is used to import AnimalShelter From it. I have tried to use the import ‘dash_bootstrap_components as dbc’ but says that, ” module doesnt not exist’. Please Help because I am lost trying to run IPYNB test file and it doesn’t work. Thank You in Advance!
Module: AnimalShelter.py File Below:
from pymongo import MongoClient
from bson.objectid import ObjectId
from pymongo.message import update
class AnimalShelter(object):
“”” CRUD operations for Animal collection in MongoDB “””
def __init__(self, username=None, password=None):
# Initializing the MongoClient. This helps to
# access the MongoDB databases and collections.
self.client = MongoClient(‘mongodb://localhost:37341’)
self.database = self.client[‘AAC’]
# Complete this create method to implement the C in CRUD.
def create(self, data):
if data is not None:
print(“———————– Inserting New Animal ——————“)
self.database.animals.insert_one(data) # data should be dictionary
print(“————– Done ——————————————-“)
raise Exception(“Failed to add Data”)
# Complete this read method to implement the R in CRUD.
def read(self, criteria):
if criteria is not None:
data = self.database.animals.find(criteria) # data should be dictionary
for document in data:
return data
raise Exception(“nothing to read, hint is empty”)
# Complete this update method to implement the U in CRUD.
def update(self, criteria, new_data):
if criteria is not None and new_data is not None: result = self.database.animals.find({“dog”:”tom”}) for results in result: print(results) updated =self.database.animals.update_many(criteria,{‘$set’:new_data}) print(“Value that got updated “,updated.matched_count)
raise Exception(“please Enter both key and data to modify the collection”)
# Complete this delete method to implement to D in CRUD.
def delete(self, animal):
if animal is not None:
data = self.read(animal) # find animal first
if data is None:
print(“Animal does not exists”)
return result=self.database.animals.delete_one(animal) # data should be dictionary print(result.deleted_count)
raise Exception(“nothing to delete, animal data is empty”) #Test datadata_1 = {“age_upon_outcome”: “5 months”,
“animal_id”: “A333333”,
“animal_type”: “Dog”,
“breed”: “English Bulldog”,
“color”: “Brown and Black”,
“date_of_birth”: “07/21/20”,
“datetime”: “2020-07-21 10:49:00”,
“monthyear”: “2020-07-21T10:49:00”,
“name”: “Arenaj”,
“outcome_subtype”: “Foster”,
“outcome_type”: “Adoption”,
“sex_upon_outcome”: “Unneutered Male”,
“location_lat”: 33.60384687,
“location_long”: -97.35033333,
“age_upon_outcome_in_weeks”: 28.9642246428357}
data_2 = {“age_upon_outcome”: “6 months”,
“animal_id”: “A333334”,
“animal_type”: “Dog”,
“breed”: “Sheba”,
“color”: “Black”,
“date_of_birth”: “01/18/20”,
“datetime”: “2020-01-18 10:49:00”,
“monthyear”: “2020-01-18T10:49:00”,
“name”: “Seasons”,
“outcome_subtype”: “Foster”,
“outcome_type”: “Adoption”,
“sex_upon_outcome”: “Neutered Male”,
“location_lat”: 343.60987687,
“location_long”: -97.35034533,
“age_upon_outcome_in_weeks”: 28.1234246428357}
data_3 = {“age_upon_outcome”: “8 months”,
“animal_id”: “A333335”,
“animal_type”: “Dog”,
“breed”: ” Siberian Husky”,
“color”: “Deep Grey”,
“date_of_birth”: “01/03/20”,
“datetime”: “2020-01-03 10:49:00”,
“monthyear”: “2020-01-03T10:49:00”,
“name”: “Bless”,
“outcome_subtype”: “Foster”,
“outcome_type”: “Adoption”,
“sex_upon_outcome”: “Neutered Male”,
“location_lat”: 33.60382947,
“location_long”: -97.35054321,
“age_upon_outcome_in_weeks”: 72.9642246428357}
search = {“animal_id” : “A333333″}assignment = AnimalShelterassignment.__init__(assignment,”aacuser”, “010309”)
success = assignment.create(assignment, data_1)
Testing: AnimalShelter.PYNB File Below:
import base64import logging
import dashimport dash_core_components as dccimport dash_html_components as htmlimport dash_leaflet as dlimport plotly.express as pximport dash_tableimport pandas as pdfrom dash.dependencies import Input, Outputfrom dash.exceptions import PreventUpdatefrom flask import Flask
from mongo import AnimalShelter
# Create the dash applicationserver = Flask(__name__)logger = logging.getLogger(__name__)
app = dash.Dash( __name__, url_base_pathname=”/animal-shelter/”, server=server, suppress_callback_exceptions=True, prevent_initial_callbacks=True,)
# username and password and CRUD Python module nameusername = “AAC”password = “aacuser”aac = AnimalShelter(username, password)logger.info(f”Connected to {aac.database.name} Database”)
# Add in Grazioso Salvare’s logoimage_filename = “data/GraziosoSalvareLogo.png” # replace with your own imageencoded_image_logo = base64.b64encode(open(image_filename, “rb”).read())
image_filename = “data/australian_shepherd.jpg” # replace with your own imageencoded_image_dog = base64.b64encode(open(image_filename, “rb”).read())
query = aac.read_all()df = pd.DataFrame.from_records(query)
# Declare the application interfacesapp.layout = html.Div( [ html.Hr(), html.Center(html.B(html.H1(‘Joel SNHU CS-340 MongoDB Client-Server Authentication’))), html.Div(id=”query_out”), html.Div(id=”hidden_div”, style={“display”: “none”}),
# Use row and col to control vertical alignment of logo / brand html.Div( [ dbc.Col( [ html.A( [ html.Img( src=”data:image/png;base64,{}”.format( encoded_image_logo.decode() ), style={“height”: “2” “00px”}, ) ], href=”https://www.snhu.edu”, ), html.Img( src=”data:image/png;base64,{}”.format(encoded_image_dog.decode()), style={“height”: “2” “00px”}, className=”align-right”, ), html.H4( children=”Created by Arys Pena”, style={“textAlign”: “right”, “color”: “white”}, ), html.B( html.Center( [ html.H1( “Grazioso Salvare Animal Shelter Web Application Dashboard” ), html.H3(“Web Application Dashboard”), ] ), style={“color”: “white”}, ), ], className=”col-6″, ), ], style={“height”: “auto”, “width”: “auto”, “backgroundColor”: “#0067b9”,}, ), html.Hr(), html.Div( [ html.B(“Step 1: “), “Select a rescue type from the options below:”, html.Br(), dcc.RadioItems( id=”radio_items_id”, options=[ {“label”: “Water Rescue”, “value”: “WR”}, {“label”: “Mountain Rescue”, “value”: “MR”}, {“label”: “Disaster Rescue”, “value”: “DR”}, {“label”: “Reset”, “value”: “R”}, ], # value=”R”, labelStyle={“display”: “inline-block”}, ), html.Br(), html.B(“Step 2: “), “Click on the circle on the left of the row within the table to filter the plots below. Clicking on a row highlights the dog’s name in the bar chart.”, html.Br(), ] ), html.Div( [ dash_table.DataTable( id=”datatable_id”, columns=[ {“name”: i, “id”: i, “deletable”: False, “selectable”: True} for i in df.columns ], editable=False, filter_action=”native”, row_selectable=”single”, selected_columns=[], ), html.Br(), html.B(“Step 3: “), “Click ‘Reset’ to display all results (limited to 40 for performance).”, ] ), html.Br(), html.Hr(), html.Div( dbc.Row( [ dbc.Col(html.Div(id=”datatable_id_container”), width=6), dbc.Col(html.Div(id=”map_id”), width=6), ], ), ), ])
############################################## Interaction Between Components / Controller############################################## This callback will highlight a row on the data table when the user selects i..;@app.callback( Output(“datatable_id”, “style_data_conditional”), [Input(“datatable_id”, “selected_columns”)])def update_styles(selected_columns): return [{“if”: {“column_id”: i}, “background_color”: “#D2F3FF”} for i in s..;@app.callback( Output(“datatable_id_container”, “children”), [ Input(“datatable_id”, “derived_virtual_data”), Input(“datatable_id”, “derived_virtual_selected_rows”), ],)def update_graphs(derived_virtual_data, derived_virtual_selected_rows): if derived_virtual_selected_rows is None: derived_virtual_selected_rows = []
dff = df if derived_virtual_data is None else pd.DataFrame(derived_virtual_data)
colors = [ “#7FDBFF” if i in derived_virtual_selected_rows else “#0074D9” for i in range(len(dff)) ]
return [ dcc.Graph( id=column, figure={ “data”: [{“x”: dff[“name”], “type”: “bar”, “marker”: {“color”: colors},}], “layout”: { “xaxis”: {“automargin”: True}, “yaxis”: {“automargin”: True, “title”: {“text”: column}}, “height”: 250, “margin”: {“t”: 10, “l”: 10, “r”: 10}, }, }, ) # check if column exists for column in [“age_upon_outcome_in_weeks”] if column in dff