Southern New Hampshire University Interactive Data Table Python Code Practice

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

3. 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. 
4. 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.