Density Chart

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.


Example Color Themes

Example Fonts

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa


Show Code

Tools

<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":"normal",
       "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="normal",
  graphType="Scatter2D",
  hideHistogram=TRUE,
  histogramStat="density",
  showFilledHistogramDensity=TRUE,
  showHistogram="sex",
  showHistogramDensity=TRUE,
  showHistogramMedian=TRUE,
  theme="CanvasXpress"
)