A density plot shows the distribution of a numeric variable. It takes only numeric variables as input and is very close from an histogram. It can be use in the same exact condition.
<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" : [ [49],[56],[60],[43],[57],[58],[52],[52],[52],[51],[53],[50],[51],[55],[60],[54],[52],[50],[51],[67],[56],[53],[53],[57],[52],[48],[58],[50],[55],[50],[61],[53],[51],[52],[47],[49],[44],[48],[54],[53],[62],[50],[51],[54],[50],[50],[49],[49],[52],[53],[46],[52],[49],[50],[54],[58],[63],[51],[63],[49],[58],[68],[55],[52],[55],[64],[49],[62],[62],[57],[55],[53],[53],[58],[65],[54],[48],[51],[56],[53],[54],[54],[48],[54],[59],[58],[58],[53],[54],[49],[55],[56],[64],[60],[53],[57],[49],[59],[60],[66],[57],[53],[55],[52],[51],[56],[51],[56],[57],[55],[54],[52],[49],[59],[55],[59],[49],[56],[58],[55],[54],[51],[65],[59],[64],[55],[52],[47],[52],[56],[60],[56],[49],[58],[47],[53],[53],[45],[60],[52],[53],[62],[58],[54],[58],[57],[63],[56],[58],[57],[53],[55],[63],[51],[56],[62],[54],[50],[51],[53],[51],[54],[53],[54],[57],[58],[63],[55],[53],[62],[64],[55],[53],[46],[62],[51],[49],[70],[56],[55],[41],[55],[60],[57],[60],[65],[61],[52],[59],[54],[52],[41],[51],[57],[66],[58],[58],[50],[56],[45],[67],[68],[66],[69],[67],[69],[74],[71],[65],[59],[67],[63],[72],[57],[63],[67],[64],[62],[63],[68],[69],[68],[76],[71],[66],[62],[80],[68],[62],[66],[63],[64],[60],[66],[67],[60],[49],[64],[65],[68],[65],[67],[60],[69],[69],[66],[72],[67],[66],[66],[67],[70],[67],[68],[59],[63],[72],[59],[66],[67],[70],[63],[66],[56],[67],[62],[64],[59],[67],[68],[63],[74],[68],[70],[75],[62],[69],[70],[65],[67],[60],[67],[61],[69],[61],[67],[61],[64],[57],[66],[70],[66],[56],[62],[73],[74],[59],[63],[67],[67],[62],[60],[64],[70],[65],[62],[62],[73],[63],[69],[72],[67],[63],[65],[63],[71],[64],[73],[62],[62],[66],[65],[62],[57],[65],[61],[70],[60],[71],[62],[66],[69],[62],[68],[65],[59],[64],[73],[64],[61],[65],[67],[70],[71],[66],[71],[61],[53],[63],[62],[53],[68],[61],[64],[57],[68],[74],[61],[64],[75],[70],[75],[65],[64],[62],[72],[59],[67],[65],[76],[62],[57],[66],[65],[61],[66],[64],[62],[68],[63],[56],[52],[62],[72],[69],[71],[70],[67],[57],[66],[73],[48],[61],[71],[68],[69],[67],[68],[65],[60] ], "smps" : ["weight"] }, "z" : { "sex" : ["F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M","M"] } } // Create the configuration for the graph var config = { "densityPosition":"filled", "graphType":"Scatter2D", "hideHistogram":true, "histogramStat":"density", "showFilledHistogramDensity":true, "showHistogram":"sex", "showHistogramDensity":true, "showHistogramMedian":true, "theme":"CanvasXpress" } // Call the CanvasXpress function to create the graph var cX = new CanvasXpress("canvasId", data, config); </script> </body>
library(canvasXpress) y=read.table("https://www.canvasxpress.org/data/cX-density-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/cX-density-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) canvasXpress( data=y, varAnnot=z, densityPosition="filled", graphType="Scatter2D", hideHistogram=TRUE, histogramStat="density", showFilledHistogramDensity=TRUE, showHistogram="sex", showHistogramDensity=TRUE, showHistogramMedian=TRUE, theme="CanvasXpress" )