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" : [
          [0.907,3.741,12],
          [0.761,2.295,12],
          [1.108,1.498,12],
          [1.016,2.881,12],
          [1.189,0.76,12],
          [1.001,3.12,9],
          [1.231,0.638,9],
          [1.123,1.17,9],
          [1.042,2.358,12],
          [1.215,0.606,12],
          [0.93,3.669,12],
          [1.152,1,12],
          [1.138,0.981,15],
          [0.601,1.192,18],
          [0.696,0.926,7.5],
          [0.686,1.59,12],
          [1.072,1.806,12],
          [1.074,1.962,15],
          [0.934,4.028,15],
          [0.808,3.148,9],
          [1.071,1.836,9],
          [1.009,2.845,7.5],
          [1.142,1.013,7.5],
          [1.229,0.414,18],
          [1.175,0.812,18],
          [0.568,0.374,15],
          [0.977,3.623,15],
          [0.767,1.869,7.5],
          [1.006,2.836,7.5],
          [0.893,3.567,9],
          [1.152,0.866,15],
          [0.693,1.369,15],
          [1.232,0.542,15],
          [1.036,2.739,15],
          [1.125,1.2,15],
          [1.081,1.719,9],
          [0.868,3.423,9],
          [0.762,1.634,7.5],
          [1.144,1.021,7.5],
          [1.045,2.157,7.5],
          [0.797,3.361,18],
          [1.115,1.39,18],
          [1.07,1.947,18],
          [1.219,0.962,18],
          [0.637,0.571,9],
          [0.733,2.219,9],
          [0.715,1.419,9],
          [0.872,3.519,9],
          [0.765,1.732,7.5],
          [0.878,3.206,7.5],
          [0.811,2.471,7.5],
          [0.676,1.777,15],
          [1.045,2.571,18],
          [0.968,3.952,18],
          [0.846,3.931,15],
          [0.684,1.587,15],
          [0.729,1.397,7.5],
          [0.911,3.536,7.5],
          [0.808,2.202,7.5],
          [1.168,0.756,7.5],
          [0.749,1.62,7.5],
          [0.892,3.656,7.5],
          [1.002,2.964,7.5],
          [0.812,3.76,18],
          [1.23,0.672,18],
          [0.804,3.677,18],
          [0.813,3.517,12],
          [1.002,3.29,12],
          [0.696,1.139,9],
          [1.199,0.727,9],
          [1.03,2.581,9],
          [0.602,0.923,15],
          [0.694,1.527,15],
          [0.816,3.388,15],
          [1.037,2.085,15],
          [1.181,0.966,15],
          [0.899,3.488,7.5],
          [1.227,0.754,7.5],
          [1.18,0.797,9],
          [0.795,2.064,7.5],
          [0.99,3.732,18],
          [1.201,0.586,18],
          [0.629,0.561,7.5],
          [0.608,0.563,9],
          [0.584,0.678,12],
          [0.562,0.37,15],
          [0.535,0.53,18],
          [0.655,1.9,18]
        ],
        "smps" : ["E","NOx","C"],
        "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","V82","V83","V84","V85","V86","V87","V88"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "graphType":"Scatter3D",
     "showConfidenceIntervals":"true",
     "showLoessFit":"true",
     "theme":"CanvasXpress",
     "title":"Loess Fit",
     "xAxis":[
        "E"
     ],
     "xAxisExact":"true",
     "yAxis":[
        "NOx"
     ],
     "yAxisExact":"true",
     "zAxis":[
        "C"
     ],
     "zAxisExact":"true"
  }
  

  <!-- 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-loess3-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  graphType="Scatter3D",
  showConfidenceIntervals=TRUE,
  showLoessFit=TRUE,
  theme="CanvasXpress",
  title="Loess Fit",
  xAxis=list("E"),
  xAxisExact=TRUE,
  yAxis=list("NOx"),
  yAxisExact=TRUE,
  zAxis=list("C"),
  zAxisExact=TRUE
)