Use Python to make visual reports, which is too fast

Hits: 0

Hi everyone, it’s a very common way to share your insights using charts in data presentations. This is one of the reasons why business intelligence dashboards like [Tableau and Power BI continue to be popular, and these tools provide beautiful graphical interpretations of data.]

Of course, these tools also have a number of drawbacks, such as not being flexible enough to allow you to create your own designs. When you require customization of chart display, programming may be more suitable for you, such as Echarts, D3.js.

Today I will introduce a case of making a [visual] report with Python, mainly using Dash+Tailwindcss. If you like this article, remember to bookmark, like, and follow.

[Note] Complete code, data, and technical exchange are provided at the end of the article

The visual report effect is as follows

Dash is a Dashbord framework based on Plotly and supports Python, R and Julia. With Dash, you can create custom responsive dashboards.

Related Documentation

Instructions: https://dash.plotly.com/introduction

Case: https://dash.gallery/Portal/

Source code: https://github.com/plotly/dash-sample-apps/

Tailwindcss is a utility-first CSS framework for quickly building custom interfaces.

“This framework is only suitable for the kind of front-end that only implements page layout beautification elements and does not care about implementing business logic.”

See what others have to say about it, for a no-interaction chart, it’s perfectly adequate.

Related Documentation

Description: https://www.tailwindcss.cn/docs

GitHub:https://github.com/tailwindlabs/tailwindcss

Let me explain to you how to build a visual report through Dash+Tailwindcss~

First install the relevant Python library, then import.

import dash
import pandas as pd
import plotly.express as px
from dash import dcc, html

Three Python libraries, Pandas, Plotly, and dash are used.

We need to pass Tailwindcss’s CDN as external_script and pass it to our application instance so that we can use Tailwindcss successfully.

external_script = ["https://tailwindcss.com/", {"src": "https://cdn.tailwindcss.com"}]

# Create Dash instance
app = dash.Dash(
    __name__,
    external_scripts=external_script,
)
app.scripts.config.serve_locally = True

Use Pandas to create fruit sales data, just make up one.

# create data
df = pd.DataFrame(
    {
        "Fruit" : [ "apple" , "orange" , "banana" , "apple" , "orange" , "banana" ],
         "Amount" : [4.2, 1.0, 2.1, 2.32, 4.20, 5.0],
         "City " : [ "Beijing" , "Beijing" , "Beijing" , "Shanghai" , "Shanghai" , "Shanghai" ],
    }
)

print(df)

The result is as follows, with 3 columns and 6 rows, including fruit, sales, and city columns.

Process the relevant data, fruit odds, total sales, city odds, and variables.

# Fruit singular 
fruit_count = df.Fruit.count()
 # Total sales 
total_amt = df.Amount.sum()
 # City singular 
city_count = df.City.count()
 # Variable number 
variables = df.shape[ 1 ]

Create chart instances, a column chart, a box chart.

# Histogram 1, sales of different fruits in different cities 
fig = px.bar(df, x= "Fruit" , y= "Amount" , color= "City" , barmode= "group" )

# Box plot 1, sales distribution in different cities 
fig1 = px.box(df, x= "City" , y= "Amount" , color= "City" )

The effect is as follows.

The rest is the text module, text + CSS style.

The typesetting layout is beautified by Tailwindcss.

app.layout = html.Div(
    html.Div(
        children=[
            html.Div(
                children=[
                    html.H1(children="Fruit Sales --Visual Report", class),
                    html.Div(
                        children="""Python with Dash = 💝 .""",
                        class,
                    ),
                ],
                class,
            ),
            html.Div(
                html.Div(
                    children=[
                        html.Div(
                            children=[
                                f"¥{total_amt}",
                                html.Br(),
                                html.Span(" Total Sales ", class),
                            ],
                            className=" shadow-xl py-4 px-14 text-5xl bg-[#76c893] text-white  font-bold text-gray-800",
                        ),
                        html.Div(
                            children=[
                                fruit_count,
                                html.Br(),
                                html.Span( "Number of Fruits" , class ),
                            ],
                            className=" shadow-xl py-4 px-24 text-5xl bg-[#1d3557] text-white  font-bold text-gray-800",
                        ),
                        html.Div(
                            children=[
                                variables,
                                html.Br(),
                            ],
                            className=" shadow-xl py-4 px-24 text-5xl bg-[#646ffa] text-white  font-bold text-gray-800",
                        ),
                        html.Div(
                            children=[
                                city_count,
                                html.Br(),
                                html.Span( "Number of cities" , class ),
                            ],
                            className="w-full shadow-xl py-4 px-24 text-5xl bg-[#ef553b] text-white  font-bold text-gray-800",
                        ),
                    ],
                    className="my-4 w-full grid grid-flow-rows grid-cols-1 lg:grid-cols-4 gap-y-4 lg:gap-[60px]",
                ),
                class,
            ),
            html.Div(
                children=[
                    html.Div(
                        children=[
                            dcc.Graph(id="example-graph", figure=fig),
                        ],
                        class,
                    ),
                    html.Div(
                        children=[
                            dcc.Graph(id="example-graph1", figure=fig1),
                        ],
                        class,
                    ),
                ],
                class,
            ),
        ],
        className="bg-[#ebeaee]  flex py-14 flex-col items-center justify-center ",
    ),
    className="bg-[#ebeaee] container mx-auto px-14 py-4",
)

The effect is as follows.

Finally start the program code.

if __name__ == '__main__' :
     # debug mode, port 7777 
    app.run_server(debug= True , threaded= True , port= 7777 )
     # normal mode, the debug button in the lower right corner of the web page will not appear 
    # app.run_server(port =7777)

In this way, you can see the visual large-screen page locally, and the browser opens the following address.

http://127.0.0.1:7777

The charts produced in the future can not only be displayed online, but also updated in real time, which is really good~

Well, this is the end of today’s sharing, everyone can practice on their own.

recommended article

Technology Exchange

Complete code, technical exchange, data acquisition, you can ask me for it

At present, a technical exchange group has been opened, with more than 2,000 members . The best way to remark when adding is: source + interest direction, which is convenient to find like-minded friends

  • Method 1. Send the following picture to WeChat, long press to identify, and reply in the background: add group;
  • Method ②, add micro-signal: dkl88191 , note: from CSDN
  • Method ③, WeChat search public account: Python learning and data mining , background reply: add group

You may also like...

Leave a Reply

Your email address will not be published.