According to William S. Cleveland dotplots are an alternative to the bar chart, in which dots are used to depict the quantitative values (e.g. counts) associated with categorical variables.
<!-- 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 = { "x" : { "Color" : ["A","B","B","C","C","C","D","D","E","E","F","F","F","F","G","G"], "Size" : [1,2,3,1,2,3,2,3,5,4,5,2,3,2,1,2], "Task" : ["Initial Meeting","Needs Assessment","Research","Site Outline","Site Map","Wireframes","Wireframes Review","Content ","Landing Page Artwork","Inner Pages Artwork","Coding","Validation","Content Population","Cross Platform & Browser Testing","Refinement","Launch & Search Engine Submission"] }, "y" : { "data" : [ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] ], "smps" : ["2021-12-31","2021-03-01","2021-03-31","2021-05-30","2021-06-29","2021-07-29","2021-10-27","2021-11-26","2021-03-26","2021-05-25","2021-09-22","2021-10-22","2021-11-21","2021-12-21","2021-03-21","2021-04-20"], "vars" : ["Unit"] } } <-- Create the configuration for the graph --> var config = { "colorBy":"Color", "colorScheme":"LastAirBenderWater", "decorations":{ "line":[ { "align":"left", "color":"rgba(0,0,0,0.5)", "value":1, "width":1 } ] }, "graphOrientation":"vertical", "graphType":"Dotplot", "isGraphTime":"true", "marginLeft":"70", "marginRight":"70", "objectColorTransparency":0.6, "showLegend":"false", "sizeBy":"Size", "sizes":[ "2", "15", "25", "35", "70", "150" ], "smpLabelInterval":"100", "smpTextRotate":"90", "timeFormat":"isoDate", "xAxis2Show":"false", "xAxisGridMajorShow":"false", "xAxisGridMinorShow":"false", "xAxisShow":"false" } <!-- 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-timeliner-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/cX-timeliner-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) canvasXpress( data=y, smpAnnot=x, colorBy="Color", colorScheme="LastAirBenderWater", decorations=list(line=list(list(align="left", color="rgba(0,0,0,0.5)", value=1, width=1))), graphOrientation="vertical", graphType="Dotplot", isGraphTime=TRUE, marginLeft=70, marginRight=70, objectColorTransparency=0.6, showLegend=FALSE, sizeBy="Size", sizes=list(2, 15, 25, 35, 70, 150), smpLabelInterval=100, smpTextRotate=90, timeFormat="isoDate", xAxis2Show=FALSE, xAxisGridMajorShow=FALSE, xAxisGridMinorShow=FALSE, xAxisShow=FALSE )