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.

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa

<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({'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
)