Search code examples
jupyter-notebookplotly

How to to do a line graph from a scatter plot?

Considering the simple dataframe below where step1 and step2 are number of days after start.

id   start   step1  step2
a    0       10     27
b    0       5      45
c    0       1      11
..   ...     ...    ...

I'd like to plot (using Plotly) a graph line looking like this (a quick drawing/montage). The gray and red lines are fictional.

enter image description here

I've tried with strip, scatter... but without success.
Any idea?
Thanks.

Solution

  • Python API

    Let's say, we use Python API reference for plotly and Pandas to represent data. Then we can do the required plotting with help of plotly.express.line.

    Here's some dummy data to experiment with:

    import pandas as pd
from string import ascii_lowercase
from numpy.random import default_rng

rng = default_rng(0)
size = 10
data = {
    'id': [*ascii_lowercase][:size]
    , 'start': rng.integers(0, 10, size)
    , 'step1': rng.integers(3, 15, size)
    , 'step2': rng.integers(6, 20, size)
}

df = pd.DataFrame(data)

    We can get a plot similar to the expected one as follows:

    import plotly.express as pe

(
    pe
    .line(df.set_index('id').T, title='Number of days', line_shape='spline')
    .update_layout(xaxis_title='steps', yaxis_title='days')
)

    If we pass the DataFrame without specifying the x and y axis, then all columns are used to draw lines. So we need the [start, step1, step2] values to be arranged in columns and the id to be used as the names of those columns. Therefore, df.set_index('id').T is passed as the drawing data.

    line plot

    JavaScript API

    In JS, the approach depends on what meaning is given to the word dataframe. Let's build some data ourselves, adding traces one by one to the list, which we can use in Plotly.newPlot:

    var steps = ['start', 'step1', 'step2'];
var trace_id = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
var days = [
  [8, 10,  9],
  [6, 13, 17],
  [5,  9, 15],
  [2, 10,  6],
  [3, 14, 11],
  [0, 11, 18],
  [0, 10, 13],
  [0,  9,  6],
  [1,  9, 16],
  [8, 14, 16]];

var data = [];
for (var i = 0; i < days.length; i++) {
  var trace = {
    x: steps,
    y: days[i],
    name: trace_id[i],
    mode: 'lines',
    line: {shape: 'spline'}
  };
  data.push(trace);
}

var layout = {
  title: 'Number of days'
};

Plotly.newPlot('myDiv', data, layout);
    <head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-2.27.0.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>