Plot the area of Plotly

This article describes how to map an area using Plotly, again using two methods:

Implementation based on Plotly_express
Implementation based on plotly. Graph_objects

Import libraries

import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
Copy the code

Implementation based on PX

px.area creates a stacked area plot. Each filled area corresponds to one value of the column given by the line_group parameter.

Area implements a stacked area map. Each portion of the padding is determined by the given line_group parameter, and the following example uses the built-in GDP data set:

# With GDP data

gdp = px.data.gapminder()
gdp.head()
Copy the code

.dataframe tbody tr th:only-of-type { vertical-align: middle; } .dataframe tbody tr th { vertical-align: top; } .dataframe thead th { text-align: right; }

	country	continent	year	lifeExp	pop	gdpPercap	iso_alpha	iso_num
0	Afghanistan	Asia	1952	28.801	8425333	779.445314	AFG	4
1	Afghanistan	Asia	1957	30.332	9240934	820.853030	AFG	4
2	Afghanistan	Asia	1962	31.997	10267083	853.100710	AFG	4
3	Afghanistan	Asia	1967	34.020	11537966	836.197138	AFG	4
4	Afghanistan	Asia	1972	36.088	13079460	739.981106	AFG	4

fig = px.area(
    gdp,   # Data to be plotted
    x='year'.# specify x\y axis and color, and linear group
    y='pop',
    color='continent',
    line_group="country"  # Key parameters
    )

fig.show()
Copy the code

Implementation based on GO

Foundation area map

import plotly.graph_objects as go

fig = go.Figure()

['none', 'tozeroy', 'Tozerox ',' tonexty', 'tonextx','toself', 'tonext']

fig.add_trace(go.Scatter(
    x=[1.2.3.4], 
    y=[13.15.21.27], 
    fill='toself',
    name='toself'
    )) 

fig.add_trace(go.Scatter(
    x=[1.2.3.4], 
    y=[13.15.21.27], 
    fill='tonexty',
    name='tonexty'
    ))

fig.add_trace(go.Scatter(
    x=[1.2.3.4], 
    y=[13.15.21.27], 
    fill='tozerox',
    name='tozerox'  Fill against the Y axis
    ))

fig.add_trace(go.Scatter(
    x=[1.2.3.4], 
    y=[13.15.21.27], 
    fill='tozeroy',
    name='tozeroy'  # Fill against the X-axis
    ))

fig.show()
Copy the code

Graphical display of different filling methods:

The boundary issue

Sometimes we need to remove the border display and use the mode parameter.

Lines, markers, text
Use None to show no boundaries

# How to cancel borderlines: add mode='none'

import plotly.graph_objects as go

fig = go.Figure()

['none', 'tozeroy', 'Tozerox ',' tonexty', 'tonextx','toself', 'tonext']

fig.add_trace(go.Scatter(
    x=[1.2.3.4], 
    y=[13.15.21.27], 
    fill='tonext',
    mode='none'.['lines', 'markers', 'text'] or none
    name='tonext'
    )) 

fig.show()
Copy the code

Interior filling area diagram

import plotly.graph_objects as go

fig = go.Figure()

fig.add_trace(go.Scatter(
    x=[1.2.3.4], 
    y=[3.4.8.3],
    fill=None,
    mode='lines',
    line_color='red'.# trace0
))

fig.add_trace(go.Scatter(
    x=[1.2.3.4],
    y=[1.6.2.6],
    fill='tonexty', 
    mode='lines',  
    line_color='indigo'))  # trace1

fig.show()
Copy the code

Stack area map

Display data by stacking data

import plotly.graph_objects as go

x = ["Xiao Ming"."Little red"."Chou"."Note"]

fig = go.Figure()

fig.add_trace(go.Scatter(
    x=x,
    y=[100.120.110.108].# language
    hoverinfo = 'x+y'.# Hover over the information displayed
    mode='lines',
    line=dict(width=0.5,color='RGB (121,90,200)'),
    stackgroup='one'   Stack group statistics by default
))

fig.add_trace(go.Scatter(
    x=x,
    y=[130.100.80.140].# mathematics
    hoverinfo = 'x+y',
    mode='lines',
    line=dict(width=0.5,color='RGB (121231219).),
    stackgroup='one'   # 
))

fig.add_trace(go.Scatter(
    x=x,
    y=[98.120.149.91].# English
    hoverinfo = 'x+y',
    mode='lines',
    line=dict(width=0.5,color='RGB (191249230).),
    stackgroup='one'   
))

# fig.update_layout(yaxis_range=(0, 100))
fig.show()
Copy the code

Normalized stack area diagram

It’s the percentage of each figure

import plotly.graph_objects as go

x = ["Xiao Ming"."Little red"."Chou"."Note"]

fig = go.Figure()

fig.add_trace(go.Scatter(
    x=x,
    y=[30.20.40.30].# language
    hoverinfo = 'x+y',
    mode='lines',
    line=dict(width=0.5,color='RGB (11,90,200)'),
    stackgroup='one',   
    groupnorm='percent'   # Key parameters: group normalization, select percentage
))

fig.add_trace(go.Scatter(
    x=x,
    y=[50.60.80.70].# mathematics
    hoverinfo = 'x+y',
    mode='lines',
    line=dict(width=0.5,color='RGB (121231219).),
    stackgroup='one'   Stack group statistics by default
))

fig.add_trace(go.Scatter(
    x=x,
    y=[80.90.90.75].# English
    hoverinfo = 'x+y',
    mode='lines',
    line=dict(width=0.5,color='RGB (191249230).),
    stackgroup='one'   
))

fig.add_trace(go.Scatter(
    x=x,
    y=[100.100.100.200].# English
    hoverinfo = 'x+y',
    mode='lines',
    line=dict(width=0.5,color='RGB (111,90,241)'),
    stackgroup='one'   
))

fig.update_layout(
    showlegend=True.# display legend, default is displayed
# xaxis_type='category',
    yaxis=dict(
    type='linear'.range= [1.100].# y-range
    ticksuffix=The '%'))  # tag suffix

fig.show()
Copy the code

Select hover information

When we fill the area map, we can choose to hover the data displayed; Hover represents the data that will be displayed when the cursor is placed over it. There are two display schemes in the following example:

Fill sections and data points are displayed
Only hover over the data point display

import plotly.graph_objects as go

fig = go.Figure()
fig.add_trace(go.Scatter(
    x=[0.0.5.1.1.5.2].# Drawing data
    y=[0.1.2.1.0],
    fill='toself'.# Fill method and color
    fillcolor='darkviolet',  
    hoveron = 'points+fills'.# Hover position: Both the dot and the inner fill parts are hover displayed
    line_color='red'.# line color
    text="Points + Fills".# Text display
    hoverinfo = 'text+x+y'  # specify hover information
))

fig.add_trace(go.Scatter(
    x=[3.3.5.4.4.5.5], 
    y=[0.1.2.1.0],
    fill='toself', 
    fillcolor = 'violet',
    hoveron='points'.# Hover only over points
    line_color='violet',
    text="Points only".# show only dots
    hoverinfo='text+x+y'
))

fig.update_layout(
    title = "hover on <i>points</i> or <i>fill</i>".Generate the title using the format of the HTML tag syntax
    xaxis_range = [0.5.2].# Data range of two axes
    yaxis_range = [0.3])#fig.show()
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Plot the area of Plotly