Exercise: The Dash Architecture

Exercise 1

Create a Dash app with a dataset of your choice with an HTML header 1 component with the text “My App.” Add a Plotly visual of your choice and place a paragraph below the image saying “Thanks for viewing my app.”

Solution

This code creates a simple web application using Dash, Plotly, and JupyterDash to display a scatter plot based on a dataset of top YouTubers. Here’s a breakdown of the main sections:

1. Load dataset and generate scatter plot:

   • Load a CSV file called top_youtubers.csv on line 2 using pandas and store it in a DataFrame called df.
   • Create a scatter plot using Plotly Express with video_views_1000s on line 3 on the x-axis, subscribers_1000s on the y-axis, and black markers.
   • Update the scatter plot’s layout on line 4, setting the title and centering it.
   • Update the marker size to 5 on line 5.

2. Dash app:

   • Initialize a JupyterDash app named app, on line 8.
   • Define the layout of the app using html.Div on line 11, which (as a reminder) is a Dash HTML component representing a div in HTML. Inside the html.Div component, three child elements are added:
     • html.H1: This creates an H1 header on line 12 with the text My App. The id attribute is set to my-header, which can be used for targeting this element with CSS or JavaScript.
     • dcc.Graph: This is a Dash

...