Gender Disparity: Lack of Female Role Models
Stacked percent bar graphs are a type of chart that shows the proportion of different categories as parts of a whole. Each bar is divided into segments representing percentages, with all bars scaled to 100%. This makes it easy to compare relative contributions of categories across different groups or time periods.
<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", "Females-in", "Females-out", "Males-in", "Males-out", "Color"],
[ "Top 2 Roles", 35, 22, 56, 4, "A"],
[ "Self Reliant", 33, 24, 43, 17, "B"],
[ "Human", 34, 23, 25, 35, "C"],
[ "Adult with Job", 18, 39, 34, 26, "D"],
[ "Child", 14, 43, 12, 48, "E"],
[ "No Magic", 50, 7, 47, 13, "F" ]
];
// Create the configuration for the graph
var config = {
"backgroundType" : "solid",
"barPath" : true,
"barPathColor" : "rgb(48,116,154)",
"barPathTransparency" : 1,
"colorBy" : "Color",
"colors" : ["rgb(255,190,179)","rgb(251,153,134)","rgb(244,112,96)","rgb(230,68,72)","rgb(210,41,63)","rgb(173,18,58)"],
"fontName" : "Waltograph",
"fontsExternal" : [{"name" : "Waltograph","url" : "https://www.canvasxpress.org/assets/fonts/waltograph42.otf"}],
"graphOrientation" : "horizontal",
"graphType" : "StackedPercent",
"layoutCollapse" : true,
"legendBackgroundColor" : "rgb(63,149,180)",
"legendColumns" : 2,
"legendKeyBackgroundBorderColor" : "rgb(63,149,180)",
"legendKeyBackgroundColor" : "rgb(63,149,180)",
"legendPosition" : "bottom",
"legendTextColor" : "rgb(255,255,255)",
"legendTextScaleFontFactor" : 2,
"marginBottom" : 10,
"marginLeft" : 10,
"marginRight" : 50,
"marginTop" : 30,
"maxTextSize" : 80,
"objectBorderColor" : "rgba(255,255,255,0)",
"patternBy" : "InOut",
"patterns" : ["solid","stripeHorizontal","hatchForward","hatchReverse","stripeVertical","polkaDot"],
"plotBackgroundColor" : "rgb(63,149,180)",
"segregateVariablesBy" : ["Gender"],
"showColorLegend" : false,
"showLegend" : true,
"showLegendTitle" : false,
"smpTextColor" : "rgb(255,255,255)",
"smpTextScaleFontFactor" : 1.2,
"stripBackgroundBorderColor" : "rgba(255,255,255,0)",
"stripBackgroundColor" : "rgba(255,255,255,0)",
"stripTextColor" : "rgb(255,255,255)",
"stripTextScaleFontFactor" : 2.2,
"title" : "Fewer Role Models",
"titleAlign" : "center",
"titleColor" : "rgb(252,157,156)",
"titleScaleFontFactor" : 4.5,
"widthFactor" : 1.1,
"xAxis2Show" : false,
"xAxisGridMajorShow" : false,
"xAxisGridMinorShow" : false,
"xAxisShow" : false,
"xAxis" : ["Females-in","Females-out","Males-in","Males-out"]
}
// 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 = {
"x" : {
"Color" : ["A","B","C","D","E","F"]
},
"y" : {
"data" : [
[35,33,34,18,14,50],
[22,24,23,39,43,7],
[56,43,25,34,12,47],
[4,17,35,26,48,13]
],
"smps" : ["Top 2 Roles","Self Reliant","Human","Adult with Job","Child","No Magic"],
"vars" : ["Females-in","Females-out","Males-in","Males-out"]
},
"z" : {
"Gender" : ["Female","Female","Male","Male"],
"InOut" : ["In","Out","In","Out"]
}
}
// Create the configuration for the graph
var config = {
"backgroundType" : "solid",
"barPath" : true,
"barPathColor" : "rgb(48,116,154)",
"barPathTransparency" : 1,
"colorBy" : "Color",
"colors" : ["rgb(255,190,179)","rgb(251,153,134)","rgb(244,112,96)","rgb(230,68,72)","rgb(210,41,63)","rgb(173,18,58)"],
"fontName" : "Waltograph",
"fontsExternal" : [{"name" : "Waltograph","url" : "https://www.canvasxpress.org/assets/fonts/waltograph42.otf"}],
"graphOrientation" : "horizontal",
"graphType" : "StackedPercent",
"layoutCollapse" : true,
"legendBackgroundColor" : "rgb(63,149,180)",
"legendColumns" : 2,
"legendKeyBackgroundBorderColor" : "rgb(63,149,180)",
"legendKeyBackgroundColor" : "rgb(63,149,180)",
"legendPosition" : "bottom",
"legendTextColor" : "rgb(255,255,255)",
"legendTextScaleFontFactor" : 2,
"marginBottom" : 10,
"marginLeft" : 10,
"marginRight" : 50,
"marginTop" : 30,
"maxTextSize" : 80,
"objectBorderColor" : "rgba(255,255,255,0)",
"patternBy" : "InOut",
"patterns" : ["solid","stripeHorizontal","hatchForward","hatchReverse","stripeVertical","polkaDot"],
"plotBackgroundColor" : "rgb(63,149,180)",
"segregateVariablesBy" : ["Gender"],
"showColorLegend" : false,
"showLegend" : true,
"showLegendTitle" : false,
"smpTextColor" : "rgb(255,255,255)",
"smpTextScaleFontFactor" : 1.2,
"stripBackgroundBorderColor" : "rgba(255,255,255,0)",
"stripBackgroundColor" : "rgba(255,255,255,0)",
"stripTextColor" : "rgb(255,255,255)",
"stripTextScaleFontFactor" : 2.2,
"title" : "Fewer Role Models",
"titleAlign" : "center",
"titleColor" : "rgb(252,157,156)",
"titleScaleFontFactor" : 4.5,
"widthFactor" : 1.1,
"xAxis2Show" : false,
"xAxisGridMajorShow" : false,
"xAxisGridMinorShow" : false,
"xAxisShow" : false,
"xAxis" : ["Females-in","Females-out","Males-in","Males-out"]
}
// 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-movieRoles-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
x=read.table("https://www.canvasxpress.org/data/r/cX-movieRoles-smp.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-movieRoles-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
smpAnnot=x,
varAnnot=z,
backgroundType="solid",
barPath=TRUE,
barPathColor="rgb(48,116,154)",
barPathTransparency=1,
colorBy="Color",
colors=list("rgb(255,190,179)", "rgb(251,153,134)", "rgb(244,112,96)", "rgb(230,68,72)", "rgb(210,41,63)", "rgb(173,18,58)"),
fontName="Waltograph",
fontsExternal=list(list(name="Waltograph", url="https://www.canvasxpress.org/assets/fonts/waltograph42.otf")),
graphOrientation="horizontal",
graphType="StackedPercent",
layoutCollapse=TRUE,
legendBackgroundColor="rgb(63,149,180)",
legendColumns=2,
legendKeyBackgroundBorderColor="rgb(63,149,180)",
legendKeyBackgroundColor="rgb(63,149,180)",
legendPosition="bottom",
legendTextColor="rgb(255,255,255)",
legendTextScaleFontFactor=2,
marginBottom=10,
marginLeft=10,
marginRight=50,
marginTop=30,
maxTextSize=80,
objectBorderColor="rgba(255,255,255,0)",
patternBy="InOut",
patterns=list("solid", "stripeHorizontal", "hatchForward", "hatchReverse", "stripeVertical", "polkaDot"),
plotBackgroundColor="rgb(63,149,180)",
segregateVariablesBy=list("Gender"),
showColorLegend=FALSE,
showLegend=TRUE,
showLegendTitle=FALSE,
smpTextColor="rgb(255,255,255)",
smpTextScaleFontFactor=1.2,
stripBackgroundBorderColor="rgba(255,255,255,0)",
stripBackgroundColor="rgba(255,255,255,0)",
stripTextColor="rgb(255,255,255)",
stripTextScaleFontFactor=2.2,
title="Fewer Role Models",
titleAlign="center",
titleColor="rgb(252,157,156)",
titleScaleFontFactor=4.5,
widthFactor=1.1,
xAxis=list("Females-in", "Females-out", "Males-in", "Males-out"),
xAxis2Show=FALSE,
xAxisGridMajorShow=FALSE,
xAxisGridMinorShow=FALSE,
xAxisShow=FALSE
)
