Colorful Dot Plot for Data Visualization

Dot plots are ideal for visualizing distributions, particularly when dealing with smaller datasets. They offer a clear and intuitive way to show the frequency of individual data points. This makes them useful for quickly identifying clusters, outliers, and the overall shape of the data. Compared to histograms, dot plots maintain the identity of each data point. This level of detail is beneficial when precise values are crucial and the sample size is not overwhelmingly large. They are easy to understand and interpret, making them a good choice for presentations and reports aimed at a broad audience.

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 = {
         "x" : {
            "dose" : ["0.5","0.5","0.5","0.5","0.5","0.5","0.5","0.5","0.5","0.5","1","1","1","1","1","1","1","1","1","1","2","2","2","2","2","2","2","2","2","2","0.5","0.5","0.5","0.5","0.5","0.5","0.5","0.5","0.5","0.5","1","1","1","1","1","1","1","1","1","1","2","2","2","2","2","2","2","2","2","2"],
            "order" : [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10],
            "supp" : ["VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ"]
         },
         "y" : {
            "data" : [
              [4.2,11.5,7.3,5.8,6.4,10,11.2,11.2,5.2,7,16.5,16.5,15.2,17.3,22.5,17.3,13.6,14.5,18.8,15.5,23.6,18.5,33.9,25.5,26.4,32.5,26.7,21.5,23.3,29.5,15.2,21.5,17.6,9.7,14.5,10,8.2,9.4,16.5,9.7,19.7,23.3,23.6,26.4,20,25.2,25.8,21.2,14.5,27.3,25.5,26.4,22.4,24.5,24.8,30.9,26.4,27.3,29.4,23]
            ],
            "smps" : ["Var1","Var2","Var3","Var4","Var5","Var6","Var7","Var8","Var9","Var10","Var11","Var12","Var13","Var14","Var15","Var16","Var17","Var18","Var19","Var20","Var21","Var22","Var23","Var24","Var25","Var26","Var27","Var28","Var29","Var30","Var31","Var32","Var33","Var34","Var35","Var36","Var37","Var38","Var39","Var40","Var41","Var42","Var43","Var44","Var45","Var46","Var47","Var48","Var49","Var50","Var51","Var52","Var53","Var54","Var55","Var56","Var57","Var58","Var59","Var60"],
            "vars" : ["len"]
         }
      }

      // Create the configuration for the graph
      var config = {
         "axisAlgorithm" : "rPretty",
         "axisTitleFontStyle" : "bold",
         "background" : "white",
         "backgroundType" : "panel",
         "binned" : true,
         "colorBy" : "dose",
         "colorScheme" : "Blues",
         "graphOrientation" : "vertical",
         "graphType" : "Dotplot",
         "groupingFactors" : ["supp"],
         "guidesColor" : "white",
         "guidesLineType" : "solid",
         "guidesShow" : true,
         "jitter" : false,
         "objectBorderColor" : "rgba(0,0,0)",
         "panelBackgroundColor" : "#E5E5E5",
         "showErrorBars" : false,
         "showLegend" : true,
         "smpTextRotate" : 90,
         "smpTitle" : "dose",
         "smpTitleFontStyle" : "bold",
         "splitSamplesBy" : "supp",
         "stringSampleFactors" : ["dose"],
         "title" : "The Effect of Vitamin C on Tooth Growth in Guinea Pigs",
         "xAxis" : ["len"],
         "xAxis2Show" : false,
         "xAxisGridMajorColor" : "white",
         "xAxisGridMinorShow" : false,
         "xAxisTitle" : "len"
      }

      // 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);

      
    </script>

  </body>

</html>

library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/r/cX-toothgrowth-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
x=read.table("https://www.canvasxpress.org/data/r/cX-toothgrowth-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  smpAnnot=x,
  axisAlgorithm="rPretty",
  axisTitleFontStyle="bold",
  background="white",
  backgroundType="panel",
  binned=TRUE,
  colorBy="dose",
  colorScheme="Blues",
  graphOrientation="vertical",
  graphType="Dotplot",
  groupingFactors=list("supp"),
  guidesColor="white",
  guidesLineType="solid",
  guidesShow=TRUE,
  jitter=FALSE,
  objectBorderColor="rgba(0,0,0)",
  panelBackgroundColor="#E5E5E5",
  showErrorBars=FALSE,
  showLegend=TRUE,
  smpTextRotate=90,
  smpTitle="dose",
  smpTitleFontStyle="bold",
  splitSamplesBy="supp",
  stringSampleFactors=list("dose"),
  title="The Effect of Vitamin C on Tooth Growth in Guinea Pigs",
  xAxis=list("len"),
  xAxis2Show=FALSE,
  xAxisGridMajorColor="white",
  xAxisGridMinorShow=FALSE,
  xAxisTitle="len"
)