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.
<!-- 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 )