Plotly plays a rectangular tree

Hello, I’m Peter

Plotly: How to use Plotly to draw a rectangular tree

Plotly articles

The Plotly article is currently updated to article 17.

Small talk

Why did Peter keep writing Plotly? Before National Day, a reader added Peter’s VX:

1. Your tutorial on Plotly helped me a lot 🦀

2, undergraduate junior began to volume 😭

3, Shandong students, excellent 👍

There was another Plotly reader who also saw Peter’s post:

So let’s study hard together, and Peter will write a good article. Maybe someday you will benefit from reading it

What is a tree diagram

The tree diagram is a method to represent the structural properties of hierarchical structures in a graphical way. Mainly through the father-son relationship to show, for example: China – Guangdong – Shenzhen, is an example. The relationship between China and Guangdong and between Guangdong and Shenzhen is a manifestation of this relationship.

Here is a graph about the hierarchy of the tree graph found on the Internet, very classic:

Let’s take a look at a modern tree with a lot of punch:

Called Cushion Treemap, the graphics use textures to make each rectangle look “raised” like a Cushion in the middle, tapering to the edges. This visual effect takes advantage of humans’ ability to interpret this type of shadow as a raised surface, allowing for faster recognition of different rectangles

Reference Resources:

1. Plotly website: plotly.com/python/tree…

2, the torque form a tree structure (Treemaps) – complex hierarchical structure of data visualization: www.idesigntools.com/treemaps.ht…

Import libraries

Plotly_express and plotly. Graph_objects will be used to draw tree graphs in this article.

import pandas as pd
import numpy as np

import plotly_express as px
import plotly.graph_objects as go
from plotly.subplots import make_subplots  # subgraph
Copy the code

Draw based on plotly_express

2.1 Base tree

The tree diagram is based on a list of data

name = ["China"."Fujian"."Guangdong"."Xiamen"."Shenzhen"."Zhuhai"."Hubei"."Hunan"."Changsha"."Shaanxi"."Hengyang"."Xianyang"."Dongguan"]
parent = [""."China"."China"."Fujian"."Guangdong"."Guangdong"."China"."China"."Hunan"."China"."Hunan"."Shaanxi"."Guangdong"]


fig = px.treemap(
    names = name,
    parents = parent)
fig.update_traces(root_color="lightgrey")

fig.update_layout(margin = dict(t=50, l=25, r=25, b=25))

fig.show()
Copy the code

2.2 DataFrame based tree graph

In pandas, the table is a DataFrame format. In pandas, the table is a DataFrame format.

Here we use the built-in consumption data set in Plotly:

fig = px.treemap(
    df,  # incoming data
    path=[px.Constant("all"),"day"."sex"."time"].# Important: Pass the data path
    values="tip"  The value shows which field to use
)

fig.update_traces(root_color="lightskyblue") 

fig.update_layout(margin=dict(t=30,l=20,r=25,b=30))   

fig.show()
Copy the code

You can also set color parameters:

fig = px.treemap(
    df,
    path=[px.Constant("all"),"day"."sex"."time"].# Important: Pass the data path
    values="tip",
    color="time"   # specify a color change parameter
)

fig.update_traces(root_color="lightskyblue")

fig.update_layout(margin=dict(t=30,l=20,r=25,b=30))   

fig.show()
Copy the code

2.3 Tree graphs with continuous color changes

GDP data set is used here:

fig = px.treemap(
    df1,
    path=[px.Constant("world"),"continent"."country"].# path
    values="pop".# value
    color="lifeExp".# The value of color
    hover_data=["iso_alpha"].# Hover data
    color_continuous_scale="RdBu".# Color change Settings
    color_continuous_midpoint=np.average(df1["lifeExp"],
                                        weights=df1["pop"])
)

fig.update_layout(margin = dict(t=40, l=15, r=35, b=45))

fig.show()
Copy the code

2.4 Tree graph based on discrete color changes

Again, a consumption-based data set was used:

The drawing code is as follows:

fig = px.treemap(
    df,   # incoming data
    path=[px.Constant("all"), 'sex'.'day'.'time'].# data path
    values='total_bill'.# The adopted value
    color='time'.# color
    color_discrete_map={'(?) ':'lightgrey'.# Discrete color Settings
                        'Lunch':'gold'.'Dinner':'darkblue'})

fig.update_layout(margin = dict(t=50, l=15, r=25, b=35))

fig.show()
Copy the code

3. Draw based on go.Treemap

3.1 Base tree

 name = ["China"."Fujian"."Guangdong"."Xiamen"."Shenzhen"."Zhuhai"."Hubei"."Hunan"."Changsha"."Shaanxi"."Hengyang"."Xianyang"."Dongguan"]
parent = [""."China"."China"."Fujian"."Guangdong"."Guangdong"."China"."China"."Hunan"."China"."Hunan"."Shaanxi"."Guangdong"]


fig = go.Figure(go.Treemap(  # go method implementation
    labels = name,
    parents = parent,
    root_color = "lightgrey"
))

fig.update_layout(margin = dict(t=50, l=25, r=25, b=25))

fig.show()
Copy the code

3.2 Tree diagram with different colors

A variety of ways to set the color of the tree

1. Method 1

name = ["China"."Fujian"."Guangdong"."Xiamen"."Shenzhen"."Zhuhai"."Hubei"."Hunan"."Changsha"."Shaanxi"."Hengyang"."Xianyang"."Dongguan"]
parent = [""."China"."China"."Fujian"."Guangdong"."Guangdong"."China"."China"."Hunan"."China"."Hunan"."Shaanxi"."Guangdong"]
color = ["pink"."royalblue"."lightgray"."purple"."cyan"."lightgray"."lightblue"."lightgreen"]


fig = go.Figure(go.Treemap(  
    labels = name,
    parents = parent,
    marker_colors = color   # Method 1: The marker_colors parameter setting
))

fig.update_layout(margin = dict(t=50, l=25, r=25, b=25))

fig.show()
Copy the code

Method 2:

name = ["China"."Fujian"."Guangdong"."Xiamen"."Shenzhen"."Zhuhai"."Hubei"."Hunan"."Changsha"."Shaanxi"."Hengyang"."Xianyang"."Dongguan"]
parent = [""."China"."China"."Fujian"."Guangdong"."Guangdong"."China"."China"."Hunan"."China"."Hunan"."Shaanxi"."Guangdong"]

fig = go.Figure(go.Treemap(  
    labels = name,
    parents = parent,
))

fig.update_layout(
    margin = dict(t=50, l=25, r=25, b=25),
    # Method 2: Set the treemapcolorway parameter
    treemapcolorway = ["pink"."blue"."red"."lightblue"."purple"."royalblue"])

fig.show()
Copy the code

Method 3:

name = ["China"."Fujian"."Guangdong"."Xiamen"."Shenzhen"."Zhuhai"."Hubei"."Hunan"."Changsha"."Shaanxi"."Hengyang"."Xianyang"."Dongguan"]
parent = [""."China"."China"."Fujian"."Guangdong"."Guangdong"."China"."China"."Hunan"."China"."Hunan"."Shaanxi"."Guangdong"]
values = [0.10.20.30.44.55.60.70.88.96.127.150.180]


fig = go.Figure(go.Treemap(  
    labels = name,
    parents = parent,
    values = values,
    marker_colorscale = 'Blues'  Way # 3
))

fig.update_layout(
    margin = dict(t=20, l=25, r=25, b=25))

fig.show()
Copy the code

If we want to control that all label contents are the same size, we can use the UniformText parameter to control this.

Here we use an online CSV file:

fig = go.Figure(go.Treemap(
    ids = df2.ids, 
    labels = df2.labels,  # label
    parents = df2.parents,  Parent path
    pathbar_textfont_size = 20.The font size of the path
    root_color = "lightblue"  # root color
))

fig.update_layout(uniformtext=dict(minsize=10,mode="hide"),
                  margin=dict(t=50,l=25,r=25,b=25))

fig.show()
Copy the code