Enhance Analysis with Density Graphs
Density graphs offer a compelling visual representation of data distribution. They effectively show the concentration of data points across a continuous range, highlighting areas of high and low frequency. Unlike histograms which use bars, density graphs use a smooth curve, making them ideal for showcasing trends and patterns in continuous data. Applications span diverse fields, from statistical analysis and data visualization to machine learning and data science. Researchers use them to understand data distribution, identify outliers, and estimate probability densities. The smooth curve facilitates easier interpretation of complex datasets, aiding in decision-making processes.
<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", "sex"],
[ "Var1", 49, "F"],
[ "Var2", 56, "F"],
[ "Var3", 60, "F"],
[ "Var4", 43, "F"],
[ "Var5", 57, "F"],
[ "Var6", 58, "F"],
[ "Var7", 52, "F"],
[ "Var8", 52, "F"],
[ "Var9", 52, "F"],
[ "Var10", 51, "F"],
[ "Var11", 53, "F"],
[ "Var12", 50, "F"],
[ "Var13", 51, "F"],
[ "Var14", 55, "F"],
[ "Var15", 60, "F"],
[ "Var16", 54, "F"],
[ "Var17", 52, "F"],
[ "Var18", 50, "F"],
[ "Var19", 51, "F"],
[ "Var20", 67, "F"],
[ "Var21", 56, "F"],
[ "Var22", 53, "F"],
[ "Var23", 53, "F"],
[ "Var24", 57, "F"],
[ "Var25", 52, "F"],
[ "Var26", 48, "F"],
[ "Var27", 58, "F"],
[ "Var28", 50, "F"],
// ... (data truncated after 29 records for clarity)
]
// Create the configuration for the graph
var config = {
"graphType": "Scatter2D",
"hideHistogram": true,
"histogramStat": "count",
"showHistogram": true,
"showHistogramDensity": true,
"xAxis": ["weight"]
}
// 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>
<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" : [
[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 = {
"graphType": "Scatter2D",
"hideHistogram": true,
"histogramStat": "count",
"showHistogram": true,
"showHistogramDensity": true,
"xAxis": ["weight"]
}
// 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-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/r/cX-density-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
varAnnot=z,
graphType="Scatter2D",
hideHistogram=TRUE,
histogramStat="count",
showHistogram=TRUE,
showHistogramDensity=TRUE,
xAxis=list("weight")
)
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import show_in_browser
if __name__ == "__main__":
# Define the chart with its data and configuration
chart: CanvasXpress = CanvasXpress(
render_to = "density1",
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"]
}
},
config = {
"graphType": "Scatter2D",
"hideHistogram": True,
"histogramStat": "count",
"showHistogram": True,
"showHistogramDensity": True,
"xAxis": ["weight"]
},
width = 600,
height = 600
)
# Display the chart in its own Web page
show_in_browser(chart)
Run this notebook:
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import graph
graph(
CanvasXpress(
render_to = "density1",
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"]
}
},
config = {
"graphType": "Scatter2D",
"hideHistogram": True,
"histogramStat": "count",
"showHistogram": True,
"showHistogramDensity": True,
"xAxis": ["weight"]
},
width = 600,
height = 600
)
)
