Split bars: three groups across nine bins
Bar graphs are visual tools used to represent data using rectangular bars of varying heights or lengths. The length of each bar is proportional to the value it represents, making it easy to compare different categories or groups. They are ideal for showcasing discrete data and making comparisons between categories readily apparent. Variations include vertical and horizontal bar graphs, clustered bar graphs for showing multiple data sets, and stacked bar graphs for showing components of a whole. Creating effective bar graphs involves selecting appropriate scales, labeling axes clearly, and using color or patterns to improve understanding. They are frequently used across various fields, from business reports to scientific presentations.
<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 =
// Create the configuration for the graph
var config = {
"graphType" : "Bar",
"titleAlign" : "plot::0",
"subtitleAlign" : "plot::0",
"legendHorizontalJustification" : 0,
"legendJustifyTo" : "plot",
"graphOrientation" : "horizontal",
"theme" : "minimal",
"colorScheme" : "User",
"colors" : [
"#2E6F95",
"#9E2A2B",
"#7A9E3B"
],
"title" : "Ecologists land big grants later, astrophysicists earlier",
"subtitle" : "Age of principal investigators at first major grant (count of awardees per age bin). Illustrative data.",
"xAxis" : [
"Structural biology",
"Astrophysics",
"Ecology"
],
"segregateVariablesBy" : [
"Field"
],
"showDataValues" : true,
"showLegend" : false,
"xAxisShow" : false,
"sampleSpaceFactor" : 0.35
}
// 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" : {
"vars" : [
"Structural biology",
"Astrophysics",
"Ecology"
],
"smps" : [
"20-29",
"30-39",
"40-49",
"50-59",
"60-69",
"70-79",
"80+"
],
"data" : [
[
0,
9,
41,
47,
28,
6,
1
],
[
1,
22,
52,
38,
17,
5,
0
],
[
0,
4,
18,
36,
49,
23,
8
]
]
},
"z" : {
"Field" : [
"Structural biology",
"Astrophysics",
"Ecology"
]
}
}
// Create the configuration for the graph
var config = {
"graphType" : "Bar",
"titleAlign" : "plot::0",
"subtitleAlign" : "plot::0",
"legendHorizontalJustification" : 0,
"legendJustifyTo" : "plot",
"graphOrientation" : "horizontal",
"theme" : "minimal",
"colorScheme" : "User",
"colors" : [
"#2E6F95",
"#9E2A2B",
"#7A9E3B"
],
"title" : "Ecologists land big grants later, astrophysicists earlier",
"subtitle" : "Age of principal investigators at first major grant (count of awardees per age bin). Illustrative data.",
"xAxis" : [
"Structural biology",
"Astrophysics",
"Ecology"
],
"segregateVariablesBy" : [
"Field"
],
"showDataValues" : true,
"showLegend" : false,
"xAxisShow" : false,
"sampleSpaceFactor" : 0.35
}
// 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-bar23-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-bar23-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
varAnnot=z,
colorScheme="User",
colors=list("#2E6F95", "#9E2A2B", "#7A9E3B"),
graphOrientation="horizontal",
graphType="Bar",
legendHorizontalJustification=0,
legendJustifyTo="plot",
sampleSpaceFactor=0.35,
segregateVariablesBy=list("Field"),
showDataValues=TRUE,
showLegend=FALSE,
subtitle="Age of principal investigators at first major grant (count of awardees per age bin). Illustrative data.",
subtitleAlign="plot::0",
theme="minimal",
title="Ecologists land big grants later, astrophysicists earlier",
titleAlign="plot::0",
xAxis=list("Structural biology", "Astrophysics", "Ecology"),
xAxisShow=FALSE
)
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 = "bar20",
data = {
"y": {
"vars": ["Structural biology", "Astrophysics", "Ecology"],
"smps": ["20-29", "30-39", "40-49", "50-59", "60-69", "70-79", "80+"],
"data": [
[0, 9, 41, 47, 28, 6, 1],
[1, 22, 52, 38, 17, 5, 0],
[0, 4, 18, 36, 49, 23, 8]
]
},
"z": {
"Field": ["Structural biology", "Astrophysics", "Ecology"]
}
},
config = {
"graphType": "Bar",
"titleAlign": "plot::0",
"subtitleAlign": "plot::0",
"legendHorizontalJustification": 0,
"legendJustifyTo": "plot",
"graphOrientation": "horizontal",
"theme": "minimal",
"colorScheme": "User",
"colors": ["#2E6F95", "#9E2A2B", "#7A9E3B"],
"title": "Ecologists land big grants later, astrophysicists earlier",
"subtitle": "Age of principal investigators at first major grant (count of awardees per age bin). Illustrative data.",
"xAxis": ["Structural biology", "Astrophysics", "Ecology"],
"segregateVariablesBy": ["Field"],
"showDataValues": True,
"showLegend": False,
"xAxisShow": False,
"sampleSpaceFactor": 0.35
},
width = 760,
height = 520
)
# 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 = "bar20",
data = {
"y": {
"vars": ["Structural biology", "Astrophysics", "Ecology"],
"smps": ["20-29", "30-39", "40-49", "50-59", "60-69", "70-79", "80+"],
"data": [
[0, 9, 41, 47, 28, 6, 1],
[1, 22, 52, 38, 17, 5, 0],
[0, 4, 18, 36, 49, 23, 8]
]
},
"z": {
"Field": ["Structural biology", "Astrophysics", "Ecology"]
}
},
config = {
"graphType": "Bar",
"titleAlign": "plot::0",
"subtitleAlign": "plot::0",
"legendHorizontalJustification": 0,
"legendJustifyTo": "plot",
"graphOrientation": "horizontal",
"theme": "minimal",
"colorScheme": "User",
"colors": ["#2E6F95", "#9E2A2B", "#7A9E3B"],
"title": "Ecologists land big grants later, astrophysicists earlier",
"subtitle": "Age of principal investigators at first major grant (count of awardees per age bin). Illustrative data.",
"xAxis": ["Structural biology", "Astrophysics", "Ecology"],
"segregateVariablesBy": ["Field"],
"showDataValues": True,
"showLegend": False,
"xAxisShow": False,
"sampleSpaceFactor": 0.35
},
width = 760,
height = 520
)
)
using CanvasXpress
canvasxpress(Dict(
"y" => Dict(
"vars" => ["Structural biology", "Astrophysics", "Ecology"],
"smps" => ["20-29", "30-39", "40-49", "50-59", "60-69", "70-79", "80+"],
"data" => [
[0, 9, 41, 47, 28, 6, 1],
[1, 22, 52, 38, 17, 5, 0],
[0, 4, 18, 36, 49, 23, 8]
]
),
"z" => Dict(
"Field" => ["Structural biology", "Astrophysics", "Ecology"]
)
);
graphType = "Bar",
titleAlign = "plot::0",
subtitleAlign = "plot::0",
legendHorizontalJustification = 0,
legendJustifyTo = "plot",
graphOrientation = "horizontal",
theme = "minimal",
colorScheme = "User",
colors = ["#2E6F95", "#9E2A2B", "#7A9E3B"],
title = "Ecologists land big grants later, astrophysicists earlier",
subtitle = "Age of principal investigators at first major grant (count of awardees per age bin). Illustrative data.",
xAxis = ["Structural biology", "Astrophysics", "Ecology"],
segregateVariablesBy = ["Field"],
showDataValues = true,
showLegend = false,
xAxisShow = false,
sampleSpaceFactor = 0.35
)
