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")
)
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 = "dashboard6",
data = {
"y": {
"data": [
[None, 92.7, 68.7],
[2.4, 90.6, 64.5],
[None, 91.7, 70],
[None, 91.7, 60.6],
[None, 92.2, 71.3],
[None, 89.9, 63],
[None, 94.4, 58.5],
[1.8, 92.2, 69],
[3.2, 90.3, 65.8],
[None, 93.3, 58.1],
[0.9, 90.6, 67.4],
[None, 90.6, 63],
[None, 85.4, 53],
[3, 91.4, 59.5],
[1.2, 93.4, 64],
[None, 90.4, 65.8],
[None, 90.6, 58],
[None, 88.7, 62.4],
[1.6, 90.9, 64.5],
[1.7, 90.9, 65.3],
[None, 94.4, 68.4],
[None, 90, 65.3],
[None, 88.8, 67.9],
[2.2, 91, 60.9],
[1.8, 91.3, 66.2],
[None, 92.4, 62.2],
[None, 87.5, 54],
[3, 86.8, 63.5],
[None, None, None],
[None, None, None],
[None, None, None],
[None, 92.9, 69.8],
[1.7, 91.1, 63.6],
[1, 92.1, 66.6],
[1.2, 88.9, 67.5],
[None, 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],
[None, 91.3, 67.9],
[0.5, 95.4, 69.1],
[None, 94.3, 71.4],
[None, 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],
[None, None, None],
[None, None, None],
[0.6, 94.6, 69.2],
[0.8, 94.9, 68.6],
[0.7, 95.4, 67.5],
[None, 95.7, 67],
[1.1, 93.4, 65.9],
[None, 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],
[None, None, None],
[None, None, None],
[None, None, None],
[None, 72.9, None],
[None, None, None],
[None, None, None],
[4.2, 86.7, 63.5],
[None, 92.5, 66.9],
[None, None, None],
[None, None, None],
[None, None, None],
[None, None, None],
[2.5, 87.6, 66.2],
[None, None, None],
[None, None, None],
[2, 90.2, 65],
[5.8, 81, 59.5],
[7.9, 79.3, 59.5],
[None, None, None]
],
"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"]
}
},
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"]
},
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 = "dashboard6",
data = {
"y": {
"data": [
[None, 92.7, 68.7],
[2.4, 90.6, 64.5],
[None, 91.7, 70],
[None, 91.7, 60.6],
[None, 92.2, 71.3],
[None, 89.9, 63],
[None, 94.4, 58.5],
[1.8, 92.2, 69],
[3.2, 90.3, 65.8],
[None, 93.3, 58.1],
[0.9, 90.6, 67.4],
[None, 90.6, 63],
[None, 85.4, 53],
[3, 91.4, 59.5],
[1.2, 93.4, 64],
[None, 90.4, 65.8],
[None, 90.6, 58],
[None, 88.7, 62.4],
[1.6, 90.9, 64.5],
[1.7, 90.9, 65.3],
[None, 94.4, 68.4],
[None, 90, 65.3],
[None, 88.8, 67.9],
[2.2, 91, 60.9],
[1.8, 91.3, 66.2],
[None, 92.4, 62.2],
[None, 87.5, 54],
[3, 86.8, 63.5],
[None, None, None],
[None, None, None],
[None, None, None],
[None, 92.9, 69.8],
[1.7, 91.1, 63.6],
[1, 92.1, 66.6],
[1.2, 88.9, 67.5],
[None, 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],
[None, 91.3, 67.9],
[0.5, 95.4, 69.1],
[None, 94.3, 71.4],
[None, 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],
[None, None, None],
[None, None, None],
[0.6, 94.6, 69.2],
[0.8, 94.9, 68.6],
[0.7, 95.4, 67.5],
[None, 95.7, 67],
[1.1, 93.4, 65.9],
[None, 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],
[None, None, None],
[None, None, None],
[None, None, None],
[None, 72.9, None],
[None, None, None],
[None, None, None],
[4.2, 86.7, 63.5],
[None, 92.5, 66.9],
[None, None, None],
[None, None, None],
[None, None, None],
[None, None, None],
[2.5, 87.6, 66.2],
[None, None, None],
[None, None, None],
[2, 90.2, 65],
[5.8, 81, 59.5],
[7.9, 79.3, 59.5],
[None, None, None]
],
"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"]
}
},
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"]
},
width = 600,
height = 600
)
)
