DOE Mapping Dashboard: Interactive Data Analysis & Visualization
Dashboards in CanvasXpress streamline data visualization and analysis by combining various charts and visual elements into one interactive interface. With customizable layouts, they offer a clear view of complex datasets, making it easier to spot trends and insights. Users can filter, drill down, and explore data dynamically, providing a user-friendly experience for both experts and non-technical audiences. Whether for business, research, or project monitoring, CanvasXpress dashboards help users make confident, data-driven decisions efficiently.
<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", "No Preventive Actions", "Physical Distancing", "Stay Home Sick"],
[ "111", null, 92.7, 68.7],
[ "112", 2.4, 90.6, 64.5],
[ "113", null, 91.7, 70],
[ "114", null, 91.7, 60.6],
[ "115", null, 92.2, 71.3],
[ "116", null, 89.9, 63],
[ "121", null, 94.4, 58.5],
[ "122", 1.8, 92.2, 69],
[ "123", 3.2, 90.3, 65.8],
[ "124", null, 93.3, 58.1],
[ "125", 0.9, 90.6, 67.4],
[ "126", null, 90.6, 63],
[ "127", null, 85.4, 53],
[ "131", 3, 91.4, 59.5],
[ "132", 1.2, 93.4, 64],
[ "133", null, 90.4, 65.8],
[ "134", null, 90.6, 58],
[ "135", null, 88.7, 62.4],
[ "136", 1.6, 90.9, 64.5],
[ "137", 1.7, 90.9, 65.3],
[ "138", null, 94.4, 68.4],
[ "139", null, 90, 65.3],
[ "141", null, 88.8, 67.9],
[ "142", 2.2, 91, 60.9],
[ "143", 1.8, 91.3, 66.2],
[ "144", null, 92.4, 62.2],
[ "145", null, 87.5, 54],
[ "146", 3, 86.8, 63.5],
// ... (data truncated after 29 records for clarity)
]
// Create the configuration for the graph
var config = {
"asDOE" : true,
"colorBy" : "Stay Home Sick",
"graphType" : "Map",
"histogramBins" : false,
"layoutConfig" : [{"size" : "2X2"}],
"legendPosition" : "top",
"mapId" : "bc",
"mapPropertyId" : "LOCAL_HLTH_AREA_CODE",
"topoJSON" : "https://www.canvasxpress.org/data/json/bc.json",
"xAxis": ["No Preventive Actions","Physical Distancing","Stay Home Sick"]
}
// 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" : [
[null,92.7,68.7],
[2.4,90.6,64.5],
[null,91.7,70],
[null,91.7,60.6],
[null,92.2,71.3],
[null,89.9,63],
[null,94.4,58.5],
[1.8,92.2,69],
[3.2,90.3,65.8],
[null,93.3,58.1],
[0.9,90.6,67.4],
[null,90.6,63],
[null,85.4,53],
[3,91.4,59.5],
[1.2,93.4,64],
[null,90.4,65.8],
[null,90.6,58],
[null,88.7,62.4],
[1.6,90.9,64.5],
[1.7,90.9,65.3],
[null,94.4,68.4],
[null,90,65.3],
[null,88.8,67.9],
[2.2,91,60.9],
[1.8,91.3,66.2],
[null,92.4,62.2],
[null,87.5,54],
[3,86.8,63.5],
[null,null,null],
[null,null,null],
[null,null,null],
[null,92.9,69.8],
[1.7,91.1,63.6],
[1,92.1,66.6],
[1.2,88.9,67.5],
[null,91.7,67.2],
[0.6,94.5,70.1],
[0.5,94,65.5],
[0.8,94.8,68.3],
[0.9,94,66.7],
[1.2,92.9,66],
[0.5,92.9,65.4],
[0.8,92.9,67.3],
[0.5,94.1,67.1],
[0.4,92.8,64.3],
[0.3,95.5,69.5],
[0.4,95.9,71.1],
[null,91.3,67.9],
[0.5,95.4,69.1],
[null,94.3,71.4],
[null,92.2,66.6],
[0.4,95.3,69],
[0.7,93.7,65.7],
[0.7,95.3,67.2],
[1.7,90.3,63.2],
[1.1,92.7,67.8],
[null,null,null],
[null,null,null],
[0.6,94.6,69.2],
[0.8,94.9,68.6],
[0.7,95.4,67.5],
[null,95.7,67],
[1.1,93.4,65.9],
[null,93.3,59.5],
[1.2,94.6,64.3],
[0.9,94.8,67.1],
[0.5,95.2,65.6],
[0.6,92.7,67.6],
[1.8,94.3,66.5],
[0.8,93.9,65.9],
[null,null,null],
[null,null,null],
[null,null,null],
[null,72.9,null],
[null,null,null],
[null,null,null],
[4.2,86.7,63.5],
[null,92.5,66.9],
[null,null,null],
[null,null,null],
[null,null,null],
[null,null,null],
[2.5,87.6,66.2],
[null,null,null],
[null,null,null],
[2,90.2,65],
[5.8,81,59.5],
[7.9,79.3,59.5],
[null,null,null]
],
"smps" : ["No Preventive Actions","Physical Distancing","Stay Home Sick"],
"vars" : ["111","112","113","114","115","116","121","122","123","124","125","126","127","131","132","133","134","135","136","137","138","139","141","142","143","144","145","146","147","148","149","211","212","213","214","215","221","222","223","224","231","232","233","234","311","321","322","323","324","325","326","331","332","333","334","335","336","337","411","412","413","414","421","422","423","424","425","426","431","432","433","434","510","511","512","513","514","515","516","517","518","519","521","522","523","524","531","532","533"]
}
}
// Create the configuration for the graph
var config = {
"asDOE" : true,
"colorBy" : "Stay Home Sick",
"graphType" : "Map",
"histogramBins" : false,
"layoutConfig" : [{"size" : "2X2"}],
"legendPosition" : "top",
"mapId" : "bc",
"mapPropertyId" : "LOCAL_HLTH_AREA_CODE",
"topoJSON" : "https://www.canvasxpress.org/data/json/bc.json",
"xAxis": ["No Preventive Actions","Physical Distancing","Stay Home Sick"]
}
// 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-bc-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
asDOE=TRUE,
colorBy="Stay Home Sick",
graphType="Map",
histogramBins=FALSE,
layoutConfig=list(list(size="2X2")),
legendPosition="top",
mapId="bc",
mapPropertyId="LOCAL_HLTH_AREA_CODE",
topoJSON="https://www.canvasxpress.org/data/json/bc.json",
xAxis=list("No Preventive Actions", "Physical Distancing", "Stay Home Sick")
)
