[Basic] Unify everything from tabulation to dashboard creation! Data visualization application development with Python and Dash ~ Overview of Dash, environment construction, sample execution ~

This article was created on October 16, 2020.

Introduction

I'm Imai from Marketing Applications Co., Ltd., which provides a marketing research platform.

At our company, in order to find out why Kirin Brewery, which is on sale from Kirin Brewery, is a hit, ** Collect data by questionnaire → Aggregate with Python → Create dashboard with Dash and visualize the data I tried to develop a web application. ** **

I made a Python web app with Dash! A dashboard that analyzes the reasons for the hit of Hon Kirin!

At our company, we will post the contents related to Dash on Qiita by dividing it into three parts: basic part, tips part, and practical part.

** Basics (this article) ** We will show you an overview of Dash, build an environment, and run a sample to visualize the graph. ** A lesson-style commentary video is also available on YouTube. Please watch this article while using it as a textbook! ** ** Click here for an explanation video

** Tips (under construction. We will link after the article is published) ** We will introduce the visualization of various graphs such as bubble charts, compound graphs, band graphs, radar charts, and applied methods to make the graphs easier to see and understand.

** Practical edition (under construction. We will link after the article is published) ** In performing the hit analysis of this Kirin, we will introduce a practical method that combines the contents of the Tips edition, how to create a dashboard using Dash.

If you are happy to read it or find it helpful, please press the LGTM button.

What is the "dashboard" that we will make this time?

Before introducing the construction method by Dash, it is necessary to share the definition with everyone that "Dashboard is ◯◯". Let's ask one question.

** "Q. What is a dashboard?" **

What would you say to this question? "Summary of KPI progress of the entire management organization such as target achievement status, new order status, sales transition" "Sales performance management table of products for sale" "A collection of graphs related to human resources that scores employee work performance and satisfaction and visualizes work status." Perhaps there are many possible answers. The reason why different answers can be given is that people in various positions visualize various data and use it in various situations, so the way the dashboard itself is recognized is different. It will be different.

Therefore, in this series, the following sentence is quoted from SB Creative, 2020 "Design of Data Visualization" by Yukari Nagata, which expresses the definition of dashboard in an easy-to-understand manner.

Visual representation that promotes understanding by looking at data

I decided to define it as. I think this definition includes all the answers given above. Now that we've shared the dashboard definition with you, let's move on to Dash.

What is Dash?

-A Python web framework specializing in data visualization. -Made by Flask, Plotly.js, React.js. -The official website says "It's particularly suited for anyone who works with data in Python." ** It is especially suitable for people who handle data in Python. I would like to try to visualize the data aggregated and analyzed by Python with a Web application this time! I think that it is a recommended framework for those who say. ** **

usage environment

The environment used is as follows. ・ Mac (Windows is also acceptable) ・ Anaconda 4.8.5 ・ Python 3.8.3 ・ Dash 1.16.3 ・ Dash-core-components 1.12.1 ・ Dash-html-components 1.1.1

Environment

The method of environment construction is described for each person. Please read from the item that applies to you.

For those who do not have Anaconda ▶ ︎Install Anaconda For those who do not have an editor ▶ ︎Install Visual Studio Code (hereafter: VSCode) For those who have Anaconda and an editor (VSCode) ▶ ︎Prepare a virtual environment for Dash

• VS Code is introduced for those who do not have an editor. There is no problem if it is an integrated development environment (PyCharm) or editor (Atom, Vim, Sublime Text, etc.) that can develop Python.

For those who do not have Anaconda ▶ ︎Install Anaconda

「Anaconda」 Go to the site below and click "Products"-> "Individual Edition" in the menu. https://www.anaconda.com/

Choose the installer that suits your environment.

Launch the downloaded installer package and proceed to the final "Overview".

For those who do not have an editor ▶ ︎ Install Visual Studio Code

「Visual Studio Code」 https://azure.microsoft.com/ja-jp/products/visual-studio-code/

Click "Download Now".

Choose the installer that suits your environment.

When you open the zip file, the application is included, so if you can start it, it's OK.

For those who have Anaconda and an editor ▶ ︎ Prepare a virtual environment for Dash

Since you can build multiple virtual environments (conda environment) in Anaconda, we will prepare a virtual environment for Dash. By preparing a virtual environment, you can avoid the trouble that "I installed the necessary libraries with Dash. Then, I got an error due to a conflict with other libraries used."

Start Anaconda Navigator, click "Environments", and click "Create".

Select "dash" for Name and "3.8" for Python, and click "Create".

Once the build is complete, a new environment called "dash" will be added.

Start the "dash" environment. Launch a terminal and enter the following command.

conda activate dash

The name of the newly built environment will be displayed as shown below.

(dash) L116:(I think that the user's name etc. are displayed)

Install the required libraries

Install the required libraries with the conda command in the current environment you are running. When installing the library, you will be asked "Proceed ([y] / n)?" On the way and you have to enter "y". To automate this process, add "-y" at the end and install.

conda install -c conda-forge dash -y

conda install -c anaconda pandas -y

conda install -c plotly plotly -y 

Visualize a simple graph

Now that the environment is complete, let's visualize a simple graph. The graph below is created.

Make your desktop your work place. Create a "dash" folder and a "sample" folder under it. Copy and paste the code below to create an "app.py" file and save it.

app.py

# -*- coding: utf-8 -*-

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

Make sure you have "app.py" in the "sample" folder.

Open a terminal and proceed as follows.

Launch the "dash" environment.

conda activate dash

Move to the directory where "app.py" is located.

cd (Abbreviation)Desktop/dash/sample

Enter as below

python app.py

Then, the following will be displayed on the terminal.

http://127.0.0.1:8050/　 Copy and paste it into the URL input field of your browser.

If you can confirm that it is displayed safely, you are done!

Explanation of Dash configuration and sample code

There are two configurations of Dash: Determine the appearance of the "Layout" app. (Example: Generate Div, put H1 tag in it, display graph) "Callbacks" Makes the data in the app and the operation linked. (Example: Display the graph according to the entered information)

The sample code for creating the above bar graph has the following structure. Roughly speaking, I think it can be completed in 3 steps as shown below.

** Preparation: Import required libraries, create data, create graphs with data ** ** Display: Make necessary decorations in Layout and inject data ** ** Run: Run the app **

Throughout this series, we do not use "Callbacks", we just display the data. By using "Callbacks", you can expand the range of ways to display data, so if you are interested, please check "Callbacks" as well.

Other measures to be taken when an error occurs

If you customize the code yourself, you may get the following error:

At that time, check the terminal.

Then, I found that the fig on the 30th line of app.py could not be read properly. When I checked the source code of "app.py", the fig line was commented out.

Uncomment and save it so you can run it again.

Run it again to refresh your browser.

python app.py

The screen was displayed again.

Next time, we will talk about more applied techniques.

This time, I even visualized a simple bar graph with Dash. Next time, I will introduce visualization of various graphs such as bubble charts, compound graphs, band graphs, radar charts, and applied methods to make the graphs easier to see and understand.

Tips (under construction. We will link after the article is published)