Audrey Hepburn Awards: Stacked Bar Graph

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.

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa

HTML / JS
R Code

<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" : {
            "Award" : ["New York Film Critics Circle Awards","Academy Awards","Bafta","Golden Globe Awards","Tony Awards","Academy Awards","Bafta","Golden Globe Awards","New York Film Critics Circle Awards","Bafta","Golden Globe Awards","New York Film Critics Circle Awards","Golden Globe Awards","New York Film Critics Circle Awards","Academy Awards","Bafta","Golden Globe Awards","Academy Awards","Golden Globe Awards","Golden Globe Awards","New York Film Critics Circle Awards","Bafta","Golden Globe Awards","Academy Awards","Golden Globe Awards","Golden Globe Awards","New York Film Critics Circle Awards","Tony Awards","Golden Globe Awards","Academy Awards","Emmy Awards","Screen Actors Guild Awards","Grammy Awards"],
            "Result" : ["Awarded","Awarded","Awarded","Awarded","Awarded","Nominated","Nominated","Awarded","Nominated","Nominated","Nominated","Nominated","Nominated","Awarded","Nominated","Awarded","Nominated","Nominated","Nominated","Nominated","Nominated","Awarded","Nominated","Nominated","Nominated","Nominated","Nominated","Awarded","Awarded","Nominated","Awarded","Awarded","Awarded"],
            "Work" : ["Roman Holiday","Roman Holiday","Roman Holiday","Roman Holiday","Ondine","Sabrina","Sabrina","Henrietta Award for World Film Favorite","Sabrina","War and Peace","War and Peace","Love in the Afternoon","Love in the Afternoon","The Nun's Story","The Nun's Story","The Nun's Story","The Nun's Story","Breakfast at Tiffany's","Breakfast at Tiffany's","Charade","My Fair Lady","Charade","My Fair Lady","Wait Until Dark","Two for the Road","Wait Until Dark","Wait Until Dark","Special Tony Award","Cecil B. DeMille Award","Jean Hersholt Humanitarian Award","Gardens of the World with Audrey Hepburn","Life Achievement Award","Audrey Hepburn's Enchanted Tales"]
         },
         "y" : {
            "data" : [
              [1953,1954,1954,1954,1954,1955,1955,1955,1955,1957,1957,1957,1958,1959,1960,1960,1960,1962,1962,1964,1964,1965,1965,1968,1968,1968,1968,1968,1990,1993,1993,1993,1994]
            ],
            "smps" : ["R1","R2","R3","R4","R5","R6","R7","R8","R9","R10","R11","R12","R13","R14","R15","R16","R17","R18","R19","R20","R21","R22","R23","R24","R25","R26","R27","R28","R29","R30","R31","R32","R33"],
            "vars" : ["Year"]
         }
      }

      // Create the configuration for the graph
      var config = {
         "colorBy" : "Result",
         "colorScheme" : "Greens",
         "graphType" : "Bar",
         "groupingFactors" : ["Award"],
         "legendColumns" : 2,
         "legendPosition" : "top",
         "legendTextScaleFontFactor" : 1.5,
         "maxSmpStringLen" : 50,
         "objectBorderColor" : "rgb(0,0,0)",
         "showLegendTitle" : false,
         "smpTextScaleFontFactor" : 1.5,
         "stackBy" : "Result",
         "summaryType" : "count",
         "title" : "The Awards of Audrey Hepburn",
         "xAxis" : [ "Year" ],
         "xAxis2Show" : true,
         "xAxisShow" : false
      }

      // 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-audrey2-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-audrey2-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  smpAnnot=x,
  colorBy="Result",
  colorScheme="Greens",
  graphType="Bar",
  groupingFactors=list("Award"),
  legendColumns=2,
  legendPosition="top",
  legendTextScaleFontFactor=1.5,
  maxSmpStringLen=50,
  objectBorderColor="rgb(0,0,0)",
  showLegendTitle=FALSE,
  smpTextScaleFontFactor=1.5,
  stackBy="Result",
  summaryType="count",
  title="The Awards of Audrey Hepburn",
  xAxis=list("Year"),
  xAxis2Show=TRUE,
  xAxisShow=FALSE
)