Plotly -express-10-plotly Implementation line diagram

In this article, we use Plotly to draw linelines, using line() and Go.Scatter ()

With px.line, each data point is represented as a vertex (which location is given by the x and y columns) of a polyline mark in 2D space.

img

Import libraries

import pandas as pd
import numpy as np

import  plotly_express as px
import plotly.graph_objects as go   # Import go module
 import dash import dash_core_components as dcc # Dash components import dash_html_components as html Copy the code

Using PX

In plotly_express this is done using the px.line method

Simple Line Plot with plotly.express

data = px.data.gapminder()
df = data.query("country=='Canada'")

fig = px.line(df, x="year",y="lifeExp",title="Life expectancy in Canada")
fig.show()
Copy the code

The dash is implemented

A generic approach implemented in DASH

fig = go.Figure() # or any Plotly Express function e.g. px.bar(...)
# fig.add_trace( ... )
# fig.update_layout( ... )

import dash
import dash_core_components as dcc import dash_html_components as html  app = dash.Dash() app.layout = html.Div([  dcc.Graph(figure=fig) ])  app.run_server() Copy the code

Line Plot with column encoding color

df = px.data.gapminder().query("continent=='Oceania'")
fig = px.line(df, x="year", y="lifeExp", color='country')
fig.show()
Copy the code
img

Use Go. Scatter

Website demo

np.random.seed(1)

N = 100
random_x = np.linspace(0.1, N)
random_y0 = np.random.randn(N) + 5
random_y1 = np.random.randn(N) random_y2 = np.random.randn(N) - 5  # Create traces fig = go.Figure() fig.add_trace(go.Scatter(x=random_x, y=random_y0,  mode='lines'. name='lines')) fig.add_trace(go.Scatter(x=random_x, y=random_y1,  mode='lines+markers'. name='lines+markers')) # Use both lines and points fig.add_trace(go.Scatter(x=random_x, y=random_y2,  mode='markers', name='markers'))  fig.show() Copy the code
img

Style Line Plots

How do I style a linear graph

# Add data
month = ['January'.'February'.'March'.'April'.'May'.'June'.'July'.         'August'.'September'.'October'.'November'.'December']

high_2007 = [36.5.26.6.43.6.52.3.71.5.81.4.80.5.82.2.76.0.67.3.46.1.35.0]
low_2007 = [23.6.14.0.27.0.36.8.47.6.57.7.58.9.61.2.53.3.48.5.31.0.23.6] high_2014 = [28.8.28.5.37.0.56.8.69.7.79.7.78.5.77.8.74.1.62.6.45.3.39.9] low_2014 = [12.7.14.3.18.6.35.5.49.9.58.0.60.0.58.6.51.7.45.2.32.2.29.1]  fig = go.Figure() # Create and style traces fig.add_trace(go.Scatter(x=month, y=high_2014, name='High 2014'. line=dict(color='firebrick', width=4))) # set by line parameter fig.add_trace(go.Scatter(x=month, y=low_2014, name = 'Low 2014'. line=dict(color='royalblue', width=4)))  fig.add_trace(go.Scatter(x=month, y=high_2007, name='High 2007'. line=dict(color='firebrick', width=4. dash='dashdot') # dash options include 'dash', 'dot', and 'dashdot' )) fig.add_trace(go.Scatter(x=month, y=low_2007, name='Low 2007'. line = dict(color='royalblue', width=4, dash='dot')))  # Edit the layout fig.update_layout(title='Average High and Low Temperatures in New York'.# top left header Settings  xaxis_title='Month'.# the name of the horizontal and vertical coordinates  yaxis_title='Temperature (degrees F)')  fig.show() Copy the code

Connect Data Gaps

What if there is a missing value or breakpoint in the data?

x = [1.2.3.4.5.6.7.8.9.10.11.12.13.14.15]

fig = go.Figure()

fig.add_trace(go.Scatter(
 x=x,  y=[10.20.None.15.10.5.15.None.20.10.10.15.25.20.10]. name = '<b>No</b> Gaps'.# Style name/legend Entry with HTML tags: Use HTML tags to format the legend or name  connectgaps=True # Override default to connect the gaps )) fig.add_trace(go.Scatter(  x=x,  y=[5.15.None.10.5.0.10.None.15.5.5.10.20.15.5]. name='Gaps'.))  fig.update_layout(title="How to deal with the missing data with plot") # legend  fig.show() Copy the code
img

Label Lines with Annotations

How to add comment annotions to some points in the graph

fig = go.Figure()

fig.add_trace(go.Scatter(
    x=[0.1.2.3.4.5.6.7.8].    y=[0.1.3.2.4.3.4.6.5]. name = "Line-1" # Modify the label in the upper right corner ))  fig.add_trace(go.Scatter(  x=[0.1.2.3.4.5.6.7.8]. y=[0.4.5.1.2.2.3.4.2]. name = "Line-2" ))  fig.add_annotation(  x=2.Add a comment to (2.5) a particular point  y=5. text="max number")  fig.add_annotation(  x=4. y=4. text="median number")  fig.update_annotations(dict(  xref="x". yref="y". showarrow=True. arrowhead=7. ax=0. ay=- 40 ))  fig.update_layout(showlegend=True) # display legend  fig.show() Copy the code

Filled Lines

Learn how to draw line diagrams with filled areas through an example

x = [1.2.3.4.5.6.7.8.9.10]
x_rev = x[::- 1]  # Flipped data

# Line 1
y1 = [1.2.3.4.5.6.7.8.9.10]
y1_upper = [2.3.4.5.6.7.8.9.10.11] y1_lower = [0.1.2.3.4.5.6.7.8.9] y1_lower = y1_lower[::- 1]  # Line 2 y2 = [5.2.5.5.7.5.5.2.5.7.5.4.5.5.5.5] y2_upper = [5.5.3.5.5.8.6.3.8.5.6.5.5] y2_lower = [4.5.2.4.4.7.4.2.7.4.5.4.75] y2_lower = y2_lower[::- 1]  fig = go.Figure()  # Fill area of the first line fig.add_trace(go.Scatter(  x = x + x_rev,  y = y1_upper + y1_lower,  fill = 'toself'.# display padding  fillcolor = 'rgba(0,100,80,0.2)'.# Fill the area color  line_color = 'rgba(255,255,255,0)'.# boundary color  showlegend = False. name = 'Fair'.)) fig.add_trace(go.Scatter(  x = x + x_rev,  y = y2_upper + y2_lower,  fill = 'toself'. fillcolor = 'rgba (231107243,0.2)'. line_color = 'rgba(255,255,255,0)'. name = 'Premium'. showlegend = False.))  # Draw two lines fig.add_trace(go.Scatter(  x=x, y=y1,  line_color='RGB (0100)'. name='Fair'.))  fig.add_trace(go.Scatter(  x=x, y=y2,  line_color='RGB (231107243).. name='Premium'.))  # fig.update_traces(mode='lines')  fig.show() Copy the code
img

🏆 technology project phase iii | data visualization of those things…