Skip to content
Plotly templates

4D — Animated 3D Scatter (time)

3D scatter animated over time — the classic 4D visualisation. Use the play / slider to scrub through frames.

Template previewPlotly
Rendering…

Make it your own.

{
  "data":[{
    "type":"scatter3d","mode":"markers",
    "x":[1,2,3,4],"y":[1,2,3,4],"z":[1,2,3,4],
    "marker":{"size":8,"color":[1,2,3,4],"colorscale":"Viridis"}
  }],
  "layout":{
    "title":"3D positions animated over time (4D)",
    "scene":{"xaxis":{"range":[0,10]},"yaxis":{"range":[0,10]},"zaxis":{"range":[0,10]}},
    "updatemenus":[{"type":"buttons","showactive":false,
      "buttons":[
        {"label":"Play","method":"animate","args":[null,{"frame":{"duration":500},"transition":{"duration":250}}]},
        {"label":"Pause","method":"animate","args":[[null],{"frame":{"duration":0},"mode":"immediate"}]}
      ]}],
    "sliders":[{"steps":[
      {"label":"t=0","method":"animate","args":[["f0"]]},
      {"label":"t=1","method":"animate","args":[["f1"]]},
      {"label":"t=2","method":"animate","args":[["f2"]]},
      {"label":"t=3","method":"animate","args":[["f3"]]}
    ]}]
  },
  "frames":[
    {"name":"f0","data":[{"type":"scatter3d","mode":"markers","x":[1,2,3,4],"y":[1,2,3,4],"z":[1,2,3,4],"marker":{"size":8,"color":"#3666ff"}}]},
    {"name":"f1","data":[{"type":"scatter3d","mode":"markers","x":[2,3,4,5],"y":[2,3,2,3],"z":[3,2,4,3],"marker":{"size":8,"color":"#7c3aed"}}]},
    {"name":"f2","data":[{"type":"scatter3d","mode":"markers","x":[4,5,6,7],"y":[3,4,3,5],"z":[5,4,6,5],"marker":{"size":8,"color":"#16a34a"}}]},
    {"name":"f3","data":[{"type":"scatter3d","mode":"markers","x":[6,7,8,8],"y":[5,6,5,7],"z":[7,6,8,7],"marker":{"size":8,"color":"#dc2626"}}]}
  ]
}