PlotlyJS 3D Annotations

General Usage
1

Hi all,

I am playing around with this PlotlyJS, I want to know:

  1. how to change the marker color so each can have different color.
  2. how to change the label of x,y,z ? x is for years, y is for pandemics, and z is for Death toll
  3. How to make the texts a bit apart? use margin? So it can be seen more nicely.

this is the code:

using PlotlyJS

trace = scatter3d(
    x=["1346-01-01", "1918-02-10", "1981-03-20","2019-02-20"],
    y=["Black Death", "Spanish Flu", "HIV/AIDS","COVID-19"],
    z=[200000000, 100000000, 36300000,26000000],
    name="Death toll",
)

layout = Layout(
    scene=attr(
        xaxis=attr(type="date"),
        yaxis=attr(type="category"),
        zaxis=attr(type="number"),
        annotations=[
        attr(
            showarrow=false,
            x="1346-01-01",
            y="Black Death",
            z=230000000,
            text="Global population lost: 17–54%",
            #xanchor="left",
            xshift=10,
            opacity=1.7),
        attr(
            x="1918-02-10",
            y="Spanish Flu",
            z=4,
            text="Global population lost: 1–5.4%",
            textangle=0,
            ax=0,
            ay=-75,
            font=attr(
                color="black",
                size=12
            ),
            arrowcolor="black",
            arrowsize=1,
            arrowwidth=1,
            arrowhead=1),
        attr(
            x="1981-03-20",
            y="HIV/AIDS",
            z=4,
            text="Global population lost: 0.2%",
            textangle=0),
        attr(
            x="2019-02-20",
            y="COVID-19",
            z=5,
            ax=50,
            ay=0,
            text="Global population lost: 0.1-0.3%",
            arrowhead=1,
            xanchor="left",
            yanchor="bottom"
        )]
    ),
)


plot(trace, layout)

Capture d’écran_2022-07-11_20-20-16

2
  1. how to change the marker color so each can have different color?

add to scatter3d definition marker_color as a 4 vector of color codes or names;

  1. how to change the label of x,y,z ? x is for years, y is for pandemics, and z is for Death toll?

add in layout definition scene_xaxis_title="years", etc

  1. How to make the texts a bit apart? use margin? So it can be seen more nicely?

Remove arrows from annotations, and set xshift, yshift for each one. I suggest to insert as text in tooltips, Global population lost for each case, and display as annotation just GPL:

using PlotlyJS
percent_lost= ["17–54%", "1–5.4%", "0.2%", "0.1-0.3%"]
trace = scatter3d(
    x=["1346-01-01", "1918-02-10", "1981-03-20","2019-02-20"],
    y=["Black Death", "Spanish Flu", "HIV/AIDS","COVID-19"],
    z=[200000000, 100000000, 36300000,26000000],
    marker_color=["red", "green", "blue", "orange"], #or the hexcode for each color
    name="Death toll",
    text= ["Global population lost: $perc"  for perc in percent_lost],
   
)
# years, y is for pandemics, and z is for Death toll
layout = Layout(width=600, height=600, font_size=10,
    scene=attr(
        xaxis=attr(type="date"),
        yaxis=attr(type="category"),
        zaxis=attr(type="number"),
        xaxis_title ="year",
        yaxis_title="pandemics",
        zaxis_title="death toll",
        camera_eye=attr(x=1.85, y=1.85, z=1.25),
        annotations=[
        attr(
            showarrow=false,
            x="1346-01-01",
            y="Black Death",
            z=230000000,
            text="GPL: 17–54%",
            yshift=-7, #Shifts the position of the  annotation and arrow up (positive) or down (negative) by 7 pixels.
            font_size=10,
            ),
        attr(showarrow=false,
            x="1918-02-10",
            y="Spanish Flu",
            #z=4,
            xshift=40, #Shifts the position of the  annotation and arrow to the right (positive) or left (negative) by 40 pixels.
            yshift=70,
            text="GPL: 1–5.4%",
            font_size=10,    
            ),
        attr(showarrow=false,
            x="1981-03-20",
            y="HIV/AIDS",
            #z=4,
            yshift=25,
            xshift=40,
            text="GPL: 0.2%",
            font_size=10,    
            ),
        attr(showarrow=false,
            x="2019-02-20",
            y="COVID-19",
            #z=5,
                yshift=35,
            text="GPL: 0.1-0.3%",
            font_size=10,
        )]
    ),
)

pl=Plot(trace, layout)
1 Like
3

Thanks for this @empet