Interactive DOE Dashboards With Scatter2D Charts

Dashboards in CanvasXpress streamline data visualization and analysis by combining various charts and visual elements into one interactive interface. With customizable layouts, they offer a clear view of complex datasets, making it easier to spot trends and insights. Users can filter, drill down, and explore data dynamically, providing a user-friendly experience for both experts and non-technical audiences. Whether for business, research, or project monitoring, CanvasXpress dashboards help users make confident, data-driven decisions efficiently.

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa

<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>

      // Use a data frame (2D-array) for the graph
      var data = [
        [ "Id", "Weight", "Height", "Waist", "Hip", "Gender", "Hair", "Chest", "Exercise", "Age"],
        [ "Jax", 76.3, 167.6, 94.3, 100.4, "Male", "Blond", 104.3, "Moderate", 35],
        [ "Finley", 58.6, 163.8, 68.3, 94, "Female", "Black", 85.4, "Intense", 31],
        [ "Eloise", 59.5, 160, 74.7, 100, "Female", "Black", 86.7, "Moderate", 42],
        [ "Elena", 60.3, 164.5, 69.8, 93.7, "Female", "Blond", 86.8, "Intense", 23],
        [ "Ember", 53.9, 162.6, 58, 90.2, "Female", "Brown", 72.6, "Low", 37],
        [ "Owen", 78.8, 176, 92, 98, "Male", "Brown", 100, "Intense", 22],
        [ "Ezra", 74.9, 172.1, 79.7, 98.4, "Male", "Red", 100, "Moderate", 25],
        [ "Knox", 62.3, 170.2, 71.8, 87.6, "Male", "Blond", 101.2, "Moderate", 30],
        [ "Mateo", 89.6, 178, 89.5, 106, "Male", "Blond", 108.8, "Moderate", 24],
        [ "Charlie", 59.8, 167, 69.1, 94.1, "Female", "Brown", 85.9, "Low", 20],
        [ "Rosalie", 47.3, 152.4, 60.4, 87, "Female", "Brown", 78, "Intense", 25],
        [ "Marcus", 102.5, 177.8, 113.2, 107.9, "Male", "Red", 116.7, "Intense", 28 ]
      ];

      // Create the configuration for the graph
      var config = {
        "graphType": "Scatter2D",
        "histogramBins": false,
        "showTransition": false,
        "xAxis": ["Weight"],
        "yAxis": ["Height"]
      }

      // 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.createDOE();

    </script>

  </body>

</html>

<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" : [
              [76.3,167.6],
              [58.6,163.8],
              [59.5,160],
              [60.3,164.5],
              [53.9,162.6],
              [78.8,176],
              [74.9,172.1],
              [62.3,170.2],
              [89.6,178],
              [59.8,167],
              [47.3,152.4],
              [102.5,177.8]
            ],
            "smps" : ["Weight","Height"],
            "vars" : ["Jax","Finley","Eloise","Elena","Ember","Owen","Ezra","Knox","Mateo","Charlie","Rosalie","Marcus"]
         },
         "z" : {
            "Age" : [35,31,42,23,37,22,25,30,24,20,25,28],
            "Chest" : [104.3,85.4,86.7,86.8,72.6,100,100,101.2,108.8,85.9,78,116.7],
            "Exercise" : ["Moderate","Intense","Moderate","Intense","Low","Intense","Moderate","Moderate","Moderate","Low","Intense","Intense"],
            "Gender" : ["Male","Female","Female","Female","Female","Male","Male","Male","Male","Female","Female","Male"],
            "Hair" : ["Blond","Black","Black","Blond","Brown","Brown","Red","Blond","Blond","Brown","Brown","Red"],
            "Hip" : [100.4,94,100,93.7,90.2,98,98.4,87.6,106,94.1,87,107.9],
            "Waist" : [94.3,68.3,74.7,69.8,58,92,79.7,71.8,89.5,69.1,60.4,113.2]
         }
      }

      // Create the configuration for the graph
      var config = {
        "graphType": "Scatter2D",
        "histogramBins": false,
        "showTransition": false,
        "xAxis": ["Weight"],
        "yAxis": ["Height"]
      }

      // 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.createDOE();

    </script>

  </body>

</html>

library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/r/cX-body2-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-body2-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  varAnnot=z,
  graphType="Scatter2D",
  histogramBins=FALSE,
  showTransition=FALSE,
  xAxis=list("Weight"),
  yAxis=list("Height"),
  afterRender=list(list("createDOE"))
)