CS 340 Southern New Hampshire University Week 2 Python Code Milestone

Overview

For this milestone, you will begin developing the Python code for a couple of your dashboard widgets in an IPYNB file in Jupyter Notebook. Specifically, you will begin coding the interactive data table and the geolocation chart. You will need to make sure that both of these components receive data from the MongoDB database. You will use the CRUD Python module from Project One to help you retrieve this data and pass it to the dashboard widgets. Recall that the MVC design pattern is a separation of application logic into a stack of software components, such as MongoDB for model storage, the web server for implementing application controller logic, and the web browser for production of the view.

You will continue building on this work to complete Project Two, which will be due in Module Seven.

Prompt

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.

1. 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.

1. 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.

1. 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:

     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])                ])            ])        ])    ]

   • 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:

     html.Div(            id='map-id',            className='col s12 m6',            )

   • 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 routine:

     @app.callback(    Output('map-id', "children"),    [Input('datatable-id', "derived_viewport_data")])

   Note: The Leaflet geolocation chart will show the first row of the data table by default. As long as your chart shows the location of the dog in the first row, that is sufficient for checking that your geolocation chart is set up correctly.

1. Finally, run the IPYNB file and take a screenshot of your dashboard as proof of this execution. Your screenshot should include 1) the interactive data table populated with the Austin Animal Center Outcomes data from MongoDB and 2) your geolocation chart showing the location of the first dog in the table. Additionally, your unique identifier (created in the Module Five assignment) should also be visible in the screenshot.

Guidelines for Submission

To complete this project, you must submit a zipped folder containing both the IPYNB file with the code for your dashboard and the PY file containing your CRUD Python Module. All code files should follow industry standard best practices, including well-commented code. You must also submit the screenshot of your dashboard as proof of your executions.