Visualize Three Series with Unique Colors and Shapes

Facets are a way to split your data into subsets and create multiple plots based on those subsets, all within a single visualization. They allow you to display different views of the data side by side, making it easier to compare patterns across groups. For example, if you have a dataset with sales data categorized by region, you can use facets to create separate plots for each region.

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa

HTML / JS
R Code

<html>

  <head>
    <!-- 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/dist/canvasXpress.min.js"></script>
  </head>

  <body>

    <!-- 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" : [
              [38.4,27.7,25.7,53.1,30.6,30.2],
              [46.2,57.2,41.9,54.7,43.3,56.7],
              [72.5,57.9,51.9,74.2,53.4,42.4],
              [38,38,32.2,49.6,37.4,34.4],
              [82.8,57.9,64.7,53.6,48.6,44.8],
              [33.9,32,31.4,51.3,35.5,42.9],
              [50.4,40.6,40.1,44.1,46.9,42.7],
              [35,33.1,43.2,34,26.4,24.8],
              [32.8,26.8,33.9,34.5,25.1,25.1],
              [60.1,53.2,40.4,59.1,87.1,59.2],
              [75.1,63.1,58,67.3,43.8,42.2],
              [57.6,57.7,61.5,75.5,126.6,48.4],
              [55.5,63.3,44.6,41.1,41.8,32],
              [49.5,45.8,35.3,52.2,53.8,48.1],
              [40.9,35.7,37.2,28.3,26,33.7],
              [44.3,46.8,39.4,74.9,45.3,42.6],
              [93.8,91.9,77.4,77.5,55.8,54.9],
              [47.9,59.9,52.8,50.9,58.6,64.5],
              [75.2,54.1,63.6,70.1,44,43.1],
              [46.2,39.3,56.6,60.3,47.8,52.8],
              [56.3,45.8,58.9,59.9,36.8,44.3]
            ],
            "desc" : ["time in seconds"],
            "smps" : ["U-Trial 1","U-Trial 2","U-Trial 3","S-Trial 1","S-Trial 2","S-Trial 3"],
            "vars" : ["s1","s2","s3","s4","s5","s6","s7","s8","s9","s10","s11","s12","s13","s14","s15","s16","s17","s18","s19","s20","s21"]
         },
         "z" : {
            "Age" : [23,43,43,32,15,37,26,35,26,31,35,55,25,39,25,26,33,62,54,38,65],
            "Opinion" : ["pos","neg","pos","neg","neg","pos","pos","pos","pos","indiff","pos","indiff","pos","indiff","indiff","pos","neg","neg","pos","neg","neg"],
            "Order" : ["1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1"],
            "Sex" : ["M","F","M","M","M","F","F","F","M","F","F","F","F","M","M","M","M","M","F","F","M"],
            "Smoker" : ["N","Y","N","N","N","Y","N","N","N","N","Y","Y","Y","Y","N","N","Y","N","Y","N","N"]
         }
      }

      // Create the configuration for the graph
      var config = {
         "graphType" : "Scatter2D",
         "layoutCollapse" : false,
         "layoutType" : "cols",
         "legendBox" : true,
         "shapeBy" : "Age",
         "showTransition" : false,
         "stripBackgroundBorderColor" : "rgb(0,0,0)",
         "stripTextColor" : "rgb(0,0,0)",
         "theme" : "CanvasXpress",
         "title" : "Floral scent data set",
         "xAxis" : ["U-Trial 1","U-Trial 2","U-Trial 3"],
         "yAxis" : ["S-Trial 1","S-Trial 2","S-Trial 3"]
      }

      // Event used to create graph (optional)
      var events = false


      // Call the CanvasXpress function to create the graph
      var cX = new CanvasXpress("canvasId", data, config, events);

      // Functions after rendering graph
      cX.segregateVariables(["Opinion"]);

    </script>

  </body>

</html>

library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/r/cX-scentst-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
z=read.table("https://www.canvasxpress.org/data/r/cX-scentst-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  varAnnot=z,
  graphType="Scatter2D",
  layoutCollapse=FALSE,
  layoutType="cols",
  legendBox=TRUE,
  shapeBy="Age",
  showTransition=FALSE,
  stripBackgroundBorderColor="rgb(0,0,0)",
  stripTextColor="rgb(0,0,0)",
  theme="CanvasXpress",
  title="Floral scent data set",
  xAxis=list("U-Trial 1", "U-Trial 2", "U-Trial 3"),
  yAxis=list("S-Trial 1", "S-Trial 2", "S-Trial 3"),
  afterRender=list(list("segregateVariables", list("Opinion")))
)