Scatter3D Chart

A scatterplot displays the relationship between 3 numeric variables. For each data point, the value of its first variable is represented on the X axis, the second on the Y axis, and the third on the Z axis.


Example Color Themes

Example Fonts



Show Code

Tools

<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>


<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
  <canvas id="canvasId" width="600" height="600"</canvas>
</div>


<!-- Create a script to initialize the chart -->
<script>

  <!-- Create the data for the graph -->
  var data = {
     "y" : {
        "data" : [
          [-5,5,5],
          [-5,15,15],
          [-5,25,25],
          [-5,35,35],
          [-5,45,45],
          [-5,35,55],
          [-5,25,65],
          [-5,15,75],
          [-5,5,85],
          [-15,15,5],
          [-15,25,15],
          [-15,35,25],
          [-15,45,35],
          [-15,55,45],
          [-15,45,55],
          [-15,35,65],
          [-15,25,75],
          [-15,15,85],
          [-25,25,5],
          [-25,35,15],
          [-25,45,25],
          [-25,55,35],
          [-25,65,45],
          [-25,55,55],
          [-25,45,65],
          [-25,35,75],
          [-25,25,85],
          [-35,35,5],
          [-35,45,15],
          [-35,55,25],
          [-35,65,35],
          [-35,75,45],
          [-35,65,55],
          [-35,55,65],
          [-35,45,75],
          [-35,35,85],
          [-45,45,5],
          [-45,55,15],
          [-45,65,25],
          [-45,75,35],
          [-45,85,45],
          [-45,75,55],
          [-45,65,65],
          [-45,55,75],
          [-45,45,85],
          [-55,35,5],
          [-55,45,15],
          [-55,55,25],
          [-55,65,35],
          [-55,75,45],
          [-55,65,55],
          [-55,55,65],
          [-55,45,75],
          [-55,35,85],
          [-65,25,5],
          [-65,35,15],
          [-65,45,25],
          [-65,55,35],
          [-65,65,45],
          [-65,55,55],
          [-65,45,65],
          [-65,35,75],
          [-65,25,85],
          [-75,15,5],
          [-75,25,15],
          [-75,35,25],
          [-75,45,35],
          [-75,55,45],
          [-75,45,55],
          [-75,35,65],
          [-75,25,75],
          [-75,15,85],
          [-85,5,5],
          [-85,15,15],
          [-85,25,25],
          [-85,35,35],
          [-85,45,45],
          [-85,35,55],
          [-85,25,65],
          [-85,15,75],
          [-85,5,85]
        ],
        "smps" : ["S1","S2","S3"],
        "vars" : ["V1","V2","V3","V4","V5","V6","V7","V8","V9","V10","V11","V12","V13","V14","V15","V16","V17","V18","V19","V20","V21","V22","V23","V24","V25","V26","V27","V28","V29","V30","V31","V32","V33","V34","V35","V36","V37","V38","V39","V40","V41","V42","V43","V44","V45","V46","V47","V48","V49","V50","V51","V52","V53","V54","V55","V56","V57","V58","V59","V60","V61","V62","V63","V64","V65","V66","V67","V68","V69","V70","V71","V72","V73","V74","V75","V76","V77","V78","V79","V80","V81"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "graphType":"Scatter3D",
     "scatterType":"bar",
     "theme":"CanvasXpress",
     "xAxis":[
        "S1"
     ],
     "yAxis":[
        "S2"
     ],
     "zAxis":[
        "S3"
     ]
  }
  

  <!-- Call the CanvasXpress function to create the graph -->
  var cX = new CanvasXpress("canvasId", data, config);


</script>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-scatter3d-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  graphType="Scatter3D",
  scatterType="bar",
  theme="CanvasXpress",
  xAxis=list("S1"),
  yAxis=list("S2"),
  zAxis=list("S3")
)