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.

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:

Ranking Qualities Overview
1 Strategic Good at thinking about multiple approaches towards a goal
2 A sense of responsibility If you say you do it once, you do it
3 Activity Get results by executing ideas, try it for the time being
4 idea I like to think of new ideas
5 Inclusion I can't leave it if I'm out of friends

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.

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.

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.

#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.

Recommended Posts

You can create an interactive web application with Python alone [Strength finder dashboard creation]
If you know Python, you can make a web application with Django
You can easily create a GUI with Python
Web application with Python + Flask ② ③
Web application with Python + Flask ④
Create an Excel file with Python3
Python | What you can do with Python
Create an application by classifying with Pygame
Quickly create an excel file with Python #python
[Python] A quick web application with Bottle!
[Python] Quickly create an API with Flask
Create an English word app with python
Run a Python web application with Docker
Until you can use opencv with python
Quickly create an environment where you can play with Raspberry Pi 4 (target 1 hour)
Create an app that guesses students with python
Create an image with characters in python (Japanese)
Create a Python console application easily with Click
Create an API server quickly with Python + Falcon
Create an animated GIF local server with Python + Flask
Parse and visualize JSON (Web application ⑤ with Python + Flask)
Launch a Python web application with Nginx + Gunicorn with Docker
Web application made with Python3.4 + Django (Part.1 Environment construction)