TDM 20200: Project 7 — 2024

Motivation: Dash is a web application framework. It can create web based visualizations. It provides a simple way to create interactive user interfaces and dashboards for data visualization. Dash uses Plotly for its plotting capabilities.

Context: Create good data visualizations using plotly and Dash

Scope: Python, visualizations, plotly, Dash, DashBoards, Visual Studio Code

Learning Objectives

  • Create a development environment to building a dashboard on Anvil

  • Develop skills and techniques to create a dashboard using plotly, dash, Visual Studio Code

Dataset(s)

The following questions will use the following dataset:

/anvil/projects/tdm/data/zillow/Metro_time_series.csv

Readings and Resources

Dr Ward created 5 videos to help with this project.

the-examples-book.com/programming-languages/python/making-VS-Code-work-in-Anvil-and-Using-Dash-apps

Questions

Question 1 (2 points)

  1. Following the instructions on Visual Studio Code Starter Guide, launch VS Code on Anvil

  2. Following the instructions on Visual Studio Code Starter Guide, including the Initial Configuration of VS Code, and install the Python extension for Visual Studio

  3. Following the instructions on Visual Studio Code Starter Guide, select the Python interpreter path to /anvil/projects/tdm/apps/lmodbin/python-seminar/python3

  4. Open a new terminal in Visual Studio Code. Show the current path for the Python interpreter.

For Question 1a, follow the sections of "How can I launch VS Code on Anvil?" Choose the following options:

  • Allocation: "cis220051"

  • CPU Cores: 1

  • Starting Directory: "Home Directory"

If you get "Do you trust the authors of the files in this folder" window pop up, click "Yes, I trust the authors"

Refer to the "Initial Configuration of VS Code" section to install the Python extension

Refer to Code Editing in Visual Studio Code to see how to edit and run code

Use the following command to find the path for the Python interpreter.

which python3
output

/anvil/projects/tdm/apps/lmodbin/python-seminar/python3

Question 2 (2 points)

  1. Create a python file in Visual Studio Code, name it "who_am_I.py", simply to create and display a paragraph of your self-introduction that you may use it at a job interview

  2. Run the file through terminal

The following command may be used to run a python file:

python3 who_am_I.py

Question 3 (2 points)

After you setup Visual Studio Code, we can use it to create our Dash app. Use the provided code to find an available port and a suitable prefix for our Dash app.

import os
from dash import Dash, html, dcc

vscprefix = os.getenv("VSCODE_PROXY_URI")
vscprefix = vscprefix.replace("https://ondemand.anvil.rcac.purdue.edu", "")
vscprefix = vscprefix.replace("{{port}}/", "")

# Try many ports in this range until we find one that is free
for port in range(8050, 8500):
    print(f"Trying port {port}...")
    prefix=vscprefix+str(port)+'/'

    app = Dash("mytest", requests_pathname_prefix=prefix)

    app.layout = html.Div([
        html.Div(children='Hello World')
    ])

    try:
        app.run(port=port, debug=False)
        #If we get here, the app ran so we can exit
        break
    except:
        continue # If we get here, the port was busy, let's try the next port

  1. Run the code above and make sure that you can see your Dash app appear in a window on your Firefox browser.

Question 4 (2 points)

  1. Close the Dash app window that you opened in Question 3. Copy the file from Question 3 into a new file for Question 4. Now add a few more lines of text output to the Dash app, which display your self-introduction online (anvil local hosted webpage).

Question 5 (2 points)

  1. Close the Dash app window that you opened in Question 4. Copy the file from Question 4 into a new file for Question 5. Now please create a dash app to do Project 6 question 2d: "make a bar chart to visualize the top 5 regions with the oldest inventory of homes (on average, in those regions)".

Project 07 Assignment Checklist

  • 4 Python files: one file for each of Question 2, Question 3, Question 4, Question 5

  • Submit files through Gradescope

Please make sure to double check that your submission is complete, and contains all of your code and output before submitting. If you are on a spotty internet connection, it is recommended to download your submission after submitting it to make sure what you think you submitted, was what you actually submitted.

In addition, please review our submission guidelines before submitting your project.