You can create an interactive web application with Python alone [Strength finder dashboard creation]

BrainPad Advent Calendar 2020 This is the article on the 23rd day.

In this article, I will talk about making an ** interactive visualization app ** with ** Python only **. The app I made this time is ** Strength Finder Dashboard **.

I have been working as a data scientist since joining BrainPad as a new graduate. The language used for business is exclusively Python. I have never made a web application before.

Interactive operation is indispensable for the dashboard you want to create this time. When I tried to create such a web application, I thought that I could not escape from JavaScript, but this time I was able to complete it only with Python. I wanted to make it as soon as possible, so it was great that there was almost no learning cost.

About the app

First, I will briefly introduce the contents of the created application.

• Since the description below is about the contents of the app, please skip it if you are concerned about the technical aspect.

What can you do?

** It is an application that can visualize the consultation results of multiple strength finder. ** **

Strength Finder is an online "talent diagnosis" tool developed by Gallup, USA. By answering 177 questions on the website, you will get a ranking of 34 "qualities". It can be used for self-understanding and team building. I have a lot to write about the strength finder, but I won't go into details here.

For example, my top 5 qualities were:

BrainPad also recommends consultations, with ** about half ** employees. However, just having an assessment does not make sense.

Therefore, I wanted them to be used for mutual understanding of employees, team building, and communication material, so I decided to create a dashboard limited to the company.

Introduction of some functions

--Present the tendency of top qualities for each department --Presentation of missing qualities within any group --Presentation of individual prominent qualities within any group --Matching people who are close to each other

For example, if you enter the names of multiple employees who have undergone medical examination, the screen that presents the trends of that group looks like this.

• Mosaic processing is applied to the name

It works interactively. (At another time, we will discuss the internal reaction to the app and its specific utilization.)

Main frameworks and libraries used

--Dash: Python web framework based on Flask, Plotly.js, React.js --Flask: Python web framework --plotly: visualization library ――Usually, you often use matplotlib or seaborn as a visualization library, but you can use Plotly to draw graphs that can be moved around.

It is a web framework called ** Dash ** that enables interactive operation.

What is Dash

Dash is a framework for turning graphs into web apps. The graph is written in Plotly, and Flask is running behind the scenes.

If you know this much, it's OK

Dash consists of two components. ** layout ** and ** callback **. Since it is also described in Dash Official Tutorial, please refer to that for details, but for the time being, if you can understand these two, I think that you can make a reasonable application.

layout As the name implies, it is a component that determines the appearance of the app. HTML plays this role for common web apps. In other words, you don't have to write HTML either.

For example, suppose you want to create the following page.

• Excerpt from Official Tutorial Heading 1 has "Hello Dash", below which is the text, and below that is the graph. It can be implemented by writing as follows.

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

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

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

In this way, layout defines the appearance of your app. The background color and text color can also be set in layout.

Next is about callbacks.

callback It is a component that links the application and data operations, and interactive operations are set by callback. For example, suppose you want to output the input from the user as text as it is, as shown below.

• Excerpt from Official Tutorial It can be implemented by writing as follows.

#Set appearance with layout
app.layout = html.Div([
    html.H6("Change the value in the text box to see callbacks in action!"),
    #Set any ID for the input box (in this example'my-input'）
    html.Div(["Input: ",
              dcc.Input(id='my-input', value='initial value', type='text')]),
    html.Br(),
    #Set an arbitrary ID for the output (in this example'my-output'）
    html.Div(id='my-output')
])

#callback settings
#Specify the I / O ID set in the layout above
@app.callback(
    Output(component_id='my-output', component_property='children'),
    Input(component_id='my-input', component_property='value')
)
#Write a function that operates interactively
#(In this example, it receives the input and returns it as it is)
def update_output_div(input_value):
    return 'Output: {}'.format(input_value)

Both layout and callback are very simple.

Other useful libraries

A library called dash_bootstrap_components that can use Bootstrap * in Dash was convenient. * Bootstrap: A CSS framework developed by Twitter. You can make a nice front

A drop-down menu like this, You can quickly make a card like this. You don't even have to write HTML or CSS.

Summary

I only write Python on a daily basis, but I want to quickly create an interactive web application! I recommend Dash to those who say. I thought that Dash would be enough to make a light dashboard like the one I introduced this time. However, sometimes it's hard to reach, so it's best to have a lot of options for implementation as an engineer. I would like to conclude this article by saying the obvious thing.