1. Lernen
    2. /
  2. Kurse
    3. /
  3. Building Dashboards with Dash and Plotly
  • 1

    From Plotly to Dash

    Kostenlos

    Take Plotly to the next level with Dash. After briefly revising Plotly, you'll dive straight into building your first Dash app. You'll then get your first taste of HTML and how Dash harnesses this vital web development language to structure larger Dash apps. Finally, you'll put all this together in your first multi-graph dashboard for a global e-commerce organization.

  • 2

    Styling Dash Apps

    Take control of the elements in your Dash apps with HTML and CSS. Learn what each of these is and how they are at the core of modern web development, then incorporate their powerful abilities in your Dash apps to change the size, color, and placement of your objects.

  • 3

    Interactivity with Callbacks and Components

    Turn your Dash apps into user-driven experiences by mastering interactive components. Learn how to include dropdowns, date pickers, and event free text fields to modify elements on your Dash apps and build truly self-service dashboards your users can explore.

  • 4

    Advanced Dash Apps

    Unleash the full power of Dash app interactivity by triggering changes to one graph when a user clicks on or hovers over, another graph. Additionally, you'll learn the basics of Dash's Data Table module for creating tables that can be easily filtered, sorted, and paginated; as well as trigger changes in other graphs as well.

Initializing

Ubung

A dropdown for sales by country

As you were working away at your desk, the global sales manager for the global e-commerce company visited with a new data viz challenge. She noted that the recent sales graphs you produced were interesting, but she wanted to be able to filter and focus on only one country at a time and see the category aggregation data update.

You gladly accept the challenge, comforted that your expertise in Dash callbacks will be just the thing to breathe some interactive life into your Dash app.

The manager noted that it is important to use the corporately approved, abbreviated country names in the dropdown:

UK = United Kingdom, GM = Germany, FR = France, AUS = Australia, HK = Hong Kong.

Anweisungen

100 XP
  • Add a dropdown component with an identifier of country_dd below line 22 so it can be linked to the callback.
  • Set the dropdown options to the Country names (in this order: UK = United Kingdom, GM = Germany, FR = France, AUS = Australia, HK = Hong Kong) such that the abbreviation is visible to the end-user, but the full name is passed to the callback below line 24.
  • Add a component that will render a Plotly figure with an identifier of major_cat below line 35 so it can be linked to the callback.
  • Set the input and output of the callback to link the dropdown to the graph component below lines 47 and 49.