Impressions of touching Dash, a data visualization tool made by python

Introduction

I'm working on a project to collect data using python and pandas. When I was looking for a python dashboard creation tool, I arrived at dash. The following is a summary and memorandum of findings obtained during dash verification and sample creation.

What is Dash

plotly web application creation tool Based on Flask, written in python will be converted to React.js https://plot.ly/dash/

There are many components that display data graphically. The feature is that the data can be easily visualized. Example) https://dash-gallery.plotly.host/Portal/

Html Elements

app.layout = html.Div(children=[
  html.H1(id='elm1', className='hoge' children=[]),
  #Abbreviation
  html.Div(id='elm2', className='hoge' children=[]),
]

An html component is provided, https://dash.plot.ly/dash-html-components It is drawn by passing it to app.layout.

When the structure is nested, more child elements are added to the children of the child element put in children = ... It seems to be complicated in the form of, so it may be better to component it in parts

If it's partially static html


import dash_core_components as dcc

dcc.Markdown('''

#Heading
##Heading 2
Text
''')  

Markdown can also be described, so it seems better to use this https://dash.plot.ly/dash-core-components/markdown

Graphs

https://dash-gallery.plotly.host/Portal/

dcc.Graph(
    figure={
        'data': [
             {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
             {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
        ],

You can easily create a bar chart by passing a value to the Graph component

table

import pandas as pd

dataframe = pd.read_csv('url')

dash_table.DataTable(
    id='table',
    columns=[ {"name": i, "id": i} for i in dataframe.columns],
    hidden_columns=[],
    row_selectable="single",
    data=dataframe.to_dict('records'),
),

You can create a table from a dictionary or pandas dataframe

Callback


@app.callback(
    Output('table', 'data'),
    [Input('region-dropdown', 'value')])
def update_table(value):
    return df.query('City name== @value').to_dict('records')

UI callback can be fired by associating Input and Output of UI parts.

UI parts are essential

The point is to link UI parts,


#app.layout
dcc.Location(id='location', refresh=False),
   

@app.callback(
    [Output('hoge', 'value1'),
    Input('location', 'pathname')])
def pass_change(value1, pathname):

Put a UI part called dcc.Location to receive the change of url path Must receive the change value as its callback

Output has only one law

In Dash, callback output is limited to only one


@app.callback(
    Output('hoge', 'children'),
    Input('fuga', 'value2'))
def func(value2):

@app.callback(
    Output('hoge', 'children'),
    [Input('fuga', 'value'),
     Input('hoyo', 'value')
   ])
def func(value1, value2):

As mentioned above, if there are duplicate callbacks with hoge as output,

DuplicateCallbackOutput You have already assigned a callback to the output An output can only havea single callback function.

I get angry as above.

It is necessary to combine Input for Output, but I want to process another Output for Input In some cases, you have to design well.

@app.callback(
    [Output('hoge', 'children'),
     Output('hoge', 'children'),
     Output('hoge', 'children'),
     Output('hoge', 'children'),
     Output('hoge', 'children'),
     ],
    [Input('fuga1', 'value'),
     Input('fuga2', 'value'),
     Input('fuga3', 'value'),
     Input('fuga4', 'value'),
     Input('fuga5', 'value'),
   ])

Please note that it will be a huge Callback with many Outputs gathered for many Inputs.

Button Callback

When I investigated whether I could take the click event of the button, There was an Event class in the past, but it is now removed.

There is something called n_clicks in the property of the button class, Looking at the official example, n_clicks increases every time you press a button https://dash.plot.ly/dash-core-components/button

It's painful not to know that it was pressed without caching the n_clicks of all the buttons So when I searched for property, there was something called n_clicks_timestamp, so The click judgment is performed by comparing the timestamp with the current time as shown below.


@app.callback(
    Output('hoge', 'children'),
    Input('close-button', 'n_clicks_timestamp')])
def click(n_clicks_timestamp):
    if n_clicks_timestamp != None:
        if (time.time() * 1000 - n_clicks_timestamp) < 1000:
            return something

I'm not sure if this is really the right way to do it Please tell me who is familiar with Dash

Impressions

There are some quirks in usability, but it is attractive to be able to write tables and graphs with a very small amount of code. If there is a solution for the cons listed this time, I would like to add them one by one.

Recommended Posts

Impressions of touching Dash, a data visualization tool made by python
Visualization of data by prefecture
Procedure from environment construction to operation test of testinfra, a server environment test tool made by Python
A simple data analysis of Bitcoin provided by CoinMetrics in Python
Python visualization tool for data analysis work
Recommendation of Altair! Data visualization with Python
A textbook for beginners made by Python beginners
How to send a visualization image of data created in Python to Typetalk
Real-time visualization of thermography AMG8833 data in Python
A memorandum of extraction by python bs4 request
English word spell check tool (made by python)
A well-prepared record of data analysis in Python
A story made by a person who has no knowledge of Python or Json
I made a tool to easily display data as a graph by GUI operation.
Basic data frame operations written by beginners in a week of learning Python
[Python] Plot data by prefecture on a map (number of cars owned nationwide)
Analysis of financial data by pandas and its visualization (2)
Power BI visualization of Salesforce data entirely in Python
Visualization memo by Python
Python Data Visualization Libraries
Analysis of financial data by pandas and its visualization (1)
[Scientific / technical calculation by Python] Plot, visualization, matplotlib of 2D data read from file
Impressions of touching Django
Group by consecutive elements of a list in Python
Visualization method of data by explanatory variable and objective variable
I made a repeating text data generation tool "rpttxt"
Add a function to tell the weather of today to slack bot (made by python)
[Python] Creating a GUI tool that automatically processes CSV of temperature rise data in Excel
[I made it with Python] XML data batch output tool
Python application: data visualization # 2: matplotlib
I made a python text
A memorandum of understanding for the Python package management tool ez_setup
[Python] A memo of frequently used phrases (by myself) in Python scripts
Data visualization library "folium" by Python is very easy to use
Automatic acquisition of gene expression level data by python and R
Read the standard output of a subprocess line by line in Python
I made a lot of files for RDP connection with Python
Practice of data analysis by Python and pandas (Tokyo COVID-19 data edition)
A memorandum of scraping & machine learning [development technique] by Python (Chapter 4)
[Python] Visualization of longitudinal data (plot, boxplot, violin plot, confidence interval, histogram)
A memorandum of scraping & machine learning [development technique] by Python (Chapter 5)
I made a scaffolding tool for the Python web framework Bottle
I made a subtitle file (SRT) from JSON data of AmiVoice
Visualization of matrix created by numpy
A record of patching a python package
A good description of Python decorators
I made a Line-bot using Python!
Expansion by argument of python dictionary
[ns3-30] Enable visualization of Python scripts
[Python] A memorandum of beautiful soup4
A brief summary of Python collections
Proper use of Python visualization packages
I made a fortune with Python.
[Python] Creating a scraping tool Memo
10 selections of data extraction by pandas.DataFrame.query
Easy data visualization with Python seaborn.
Behavior of python3 by Sakura's server
Animation of geographic data by geopandas
Python application: data visualization part 1: basic
Data analysis starting with python (data visualization 1)
I made a daemon with Python