Dash Workshop: Part 2

Eric Manley, Drake University

What are we covering

In Part 1, we covered

• Getting everything installed
• Building web apps with user interface components like input boxes, radio buttons, and dropdown menus
• Callbacks, with several variations
• Loading data into our apps from a file

In this part, we'll

• Show how to use Dash with Plotly data visualizations

Reference: https://dash.plotly.com/

What is Plotly?

• graphing library
• open source
• interactive graphs
• often works with your data in just one line of code

Screen shot from https://plotly.com/python/

Installing Plotly

In Codespaces, it seems we probably don't need to install anything, but if you're working in another environment...

python3 -m pip install pandas
python3 -m pip install plotly

A Plotly example using our csv movie data

import plotly.express as px
import csv

# reads data from a file into a 2d list
def data_prep(filename):
    with open(filename) as movie_file:
        data_reader = csv.reader(movie_file)
        data = []
        for row in data_reader:
            data.append(row)
        return data


# convert strings to ints along one column in the 2D list
def convert_column_to_int(data_2d_list,col_num):
    for row in data_2d_list:
        row[col_num] = int(row[col_num])


data = data_prep("HighestHolywoodGrossingMovies.csv")
header = data[0]
data = data[1:]
convert_column_to_int(data,7) #world sales is read in as a string by default

# 1 - the column index for movie titles
# 7 - the column index for world sales numbers
fig = px.bar(data,x=1,y=7,labels={"1":"Title","7":"World Sales ($)"},title="Movie Sales")
fig.show()