final assignment data visualization with python

Instantly share code, notes, and snippets.

nicwhitehead / gist:4e359848dbbc9848b58eee020ea2ae75

• Star 0 You must be signed in to star a gist
• Fork 0 You must be signed in to fork a gist
• Embed Embed this gist in your website.
• Share Copy sharable link for this gist.
• Clone via HTTPS Clone using the web URL.
• Learn more about clone URLs

AgbaSparks commented Jun 22, 2023

The code runs but it doesn't display a graph... please what can I do?

Sorry, something went wrong.

Final Exam: Data Visualization with Python

• 1 video | 32s
• Includes Assessment
• Earns a Badge

WHAT YOU WILL LEARN

EARN A DIGITAL BADGE WHEN YOU COMPLETE THIS COURSE

Skillsoft is providing you the opportunity to earn a digital badge upon successful completion on some of our courses, which can be shared on any social network or business platform.

YOU MIGHT ALSO LIKE

PEOPLE WHO VIEWED THIS ALSO VIEWED THESE

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

Data visualization with Python Dash

Data visualization interfacing, also known as dashboarding , is an integral part of data analysts’ skillset. Dashboards and data apps are used everywhere now, from reporting your analysis through a series of visuals to showcasing your machine learning apps.

When there is data involved, so is Python. Specifically, we are talking about its Dash library, which is built on top of one of the hottest graphing libraries, Plotly .

Dash makes it a breeze to create and share your data analysis through interactive dashboards using only Python code. There is no need to learn HTML, CSS, or complex JavaScript frameworks like React.js .

In this tutorial, you’ll get a glimpse of what Dash can do and how to integrate it into your workflow.

Installing Dash and Plotly

You can install dash with pip . You should also install pandas library to work with datasets:

The above command also installs plotly . Plotly is known for its interactive charts, and both Plotly and Dash are created by Plotly Software Foundation, so the libraries work pretty well together.

Requirements to use Dash

A powerful framework like Dash has a few requirements. First, you must know Plotly Python as Dash can only display Plotly’s interactive charts.

Next, you need a basic understanding of HTML and CSS. Dash is like React but in Python. It is a template framework where you can build a data website without JavaScript.

A dashboard contains multiple visuals, and it is up to the user how all these visuals are displayed on a single page. Plotly handles the visuals, but the layout aspect is all up to Dash and its HTML components.

Building a Dash app

Let’s create our Dash app. After the installation, we import the following libraries:

dash is the global library containing all the core features. The dash_core_components and dash_html_components are libraries that are installed with dash by default. They include Dash-specific features and Python representation of HTML components (tags). More on them later.

Any Dash app starts with the following command:

The above code creates all the boilerplate code for a blank website. We don’t want a blank page, so let’s populate it.

First, we load a built-in dataset from Plotly and create a simple scatterplot:

Then, we add this figure to our app’s layout attribute inside a div tag with a few texts:

Here, we create the HTML tags using the dash_html_components ( html ) library and the figure using the core components ( dcc ) library .

The H1 title tag is followed by a div that contains a simple text, then the graph itself using the Graph function of dcc . All of these are inside a single DIV tag’s children attribute.

In the end, we also add the command that runs our app in debug mode, meaning the changes take effect as the script changes. Here is the complete code so far:

Put it inside a Python script and run it. You will get a message in the terminal telling you to go to this link: http://127.0.0.1:8050/

So, let’s go:

In the next sections, we will dig into the details of what we did here.

Over 200k developers use LogRocket to create better digital experiences

Creating the app.layout

Let’s start with the layout attribute. It is the single attribute that contains all your HTML components and figures. You should pass all your visuals and HTML tags to it in a final DIV tag.

Depending on the size of your project, this attribute can get pretty large, so I recommend creating all your HTML tags and figures in separate variables, then pass them to the layout .

For example, here is what the above app would look like:

This is much neater and more compact, and this is one of the things that you won’t learn from the Dash docs. It is full of nested code instead of doing the above.

HTML and CSS components in Dash

Let’s discuss how HTML and CSS work in Dash. The dash_html_components sub-library contains the most common HTML tags such as divs, buttons, text boxes, captions, title tags (H1-6), etc.

These are implemented in Python code under relevant names as a representation of their HTML counterparts. So, a code like below:

Will be interpreted by your browser like this:

All HTML tags under this sub-library contain these general arguments:

• id : the same as the the id attribute of HTML tags
• className : the same as the class attribute HEYYYof HTML tags
• style : the same as the style attribute of HTML tags but only accepts a dictionary of CSS styles
• children : the first argument of most HTML components

Here is an example div, with a few customizations:

The children argument is unique — it can accept numbers and strings, but, most of the time, you pass other HTML components inside a list if it is a container tag like a div.

A note on CSS styles: most CSS style attributes use hyphens to break words. When you pass them to Dash’s style argument, they should follow camelCase like backgroundColor instead of background-color .

I highly recommend you learn about these HTML tags, as these are the only things that keep together the layout of your app. Here is a complete list of HTML tags Dash supports.

Dash core components

Another essential part of Dash is its core components. The dash_core_components library contains a few other HTML tags but is already built-in with a few CSS and JavaScript flairs.

Some examples include dropdowns, sliders, download and upload functionalities, and a component to display Plotly Graphs.

Here are a few examples of these components, starting with a dropdown:

A multi-dropdown:

A slider with labeled breakpoints:

There’s a universal value attribute that represents the default value when a component is rendered for the first time.

You can see the complete list of core components here .

Creating the final data visualization interface with Python Dash

As a final example, take a look at the below app:

We import the Diamonds dataset from Seaborn and create three charts :  a scatterplot, a histogram, and a violin plot. We want to display the scatterplot and violin plot next to each other and put the violin plot right below in the center.

For this, we create two divs to contain the scatter plot and violin plot, left_figure and right_figure . Then, these two divs are put into another div – upper_div for simplicity.

We set a CSS style of flex-box to this div, which puts the figures side-by-side.

Then, we create the central div that contains the violin plot, and we center it using flex-box and its justify-content attribute.

Finally, we put everything into the layout inside a final DIV and run the script. Here is the final output:

Here is a summary of the steps to create a basic Dash app:

• Create the app with dash.Dash and give it any name
• Sketch the layout of your plots in the dashboard before writing the actual code
• Create the plots that go into your dashboard
• Create the boilerplate layout using HTML Dash components
• Add your figures to their relevant containers
• Finally, add all HTML components to the layout attribute

Even though we have covered many basics like HTML, core components, and app layout, we have barely scratched the surface of what Dash can do.

I showed you many examples of interactive HTML components, but not how to integrate them into your app. How can you update your graphs based on user input like sliders, text inputs, or something similar?

That’s where callbacks come in. It’s  a powerful and central feature of Dash. To use callbacks, you define functions in Dash that fire off when a component is changed by the user, and the function modifies another component based on this event.

Dash devotes a large section in the docs just to explain callbacks, as they are hard to wrap your head around at first. I suggest you go there as the next step.

Check out the example gallery where you can see and enjoy some very cool projects built with Dash. The best part is that many of them are open-source, meaning you can learn much from their source codes and get inspired. Thanks for reading!

Get set up with LogRocket's modern error tracking in minutes:

• Visit https://logrocket.com/signup/ to get an app ID

Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not server-side

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)

Stop guessing about your digital experience with LogRocket

Recent posts:.

11 Planetscale alternatives with free tiers

Planetscale is getting rid of their free plan. Let’s explore 11 alternatives with free plans for backend and database operations.

Redux Toolkit adoption guide: Overview, examples, and alternatives

Redux Toolkit is the officially recommended way to build Redux apps. Let’s explore why it’s a great tool to leverage in your next project.

CSS Hooks and the state of CSS-in-JS

Explore the evolution of CSS-in-JS and CSS Hooks, a React-based solution that simplifies dynamic styling and component encapsulation.

How Waku compares to Next.js

Waku is a new lightweight React framework built on top of React Server Components (RSCs). Let’s compare Waku with Next.js in this article.

Leave a Reply Cancel reply