<p><div><div><div><div data-show-faces="false" data-height="21" data-width="100" data-layout="button_count" data-send="true" data-href="https://www.r-bloggers.com/quantitative-story-telling-with-shiny-gender-bias-in-syllabi/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="https://www.gokhanciflikli.com/post/lse-gender/"> Computational Social Science</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<div>
<h3>LSE IR Gender <del>and Diversity</del> Project</h3>
<p>Two <code>shinydashboard</code> posts in a row, that’s a first. As I mentioned on Twitter, I’m not really this productive; rather, the apps had been on the proverbial shelf for a while and I’m just releasing them now. In fact, this is one of my earlier works: quantifying the gender imbalance as it manifests itself in the LSE International Relations (IR) reading lists. You can access the app <a rel="nofollow" href="https://gokhan.shinyapps.io/gender/" target="_blank">here</a>.</p>
<p>This is a much larger project that I got involved during its second year, so I’m just visualising other peoples’ hard work. The recentness of my contribution to the project was clearly on display when I amused my audience by saying cross-sectional feminism instead of inter-sectional. <em>Are you a statistician or what?</em> Baby steps.</p>
<p>In a nutshell, about twenty or so PhD candidates at the department manually (!) scraped the reading lists of 43 courses that were on offer during the 2015-2016 academic year, resulting in a dataset containing 12,358 non-unique publications. Of those, 2,574 involves at least one female author, while 9,784 features at least one male author. Morevoer, 81% of the syllabi is written exclusively by male scholars.</p>
<p>Recently, I have been working on a talk proposal about (Shiny) design, so I will let some of those guidelines dictate the structure for the rest of this post. I will touch upon three main themes: i) how to emphasise contrast and make a point out of it, ii) how to unpack the whole and present disaggregated data, and iii) how to design useful interactivity that connects with your intended audience. As usual, there will be sprinkles of random thoughts and semi-relevant sidetracking in between.</p>
<p>On that note, this project used to be (still?) called the Gender and Diversity Project. You may have noticed that I struck through the latter bit in the title. Well, when I ran the classification models – predicting binary outcomes as male/female, diverse/not diverse etc. – two things stuck out. First, if you do not subsample, the sheer male dominance of the field will result in lazy models that are >90% accurate: it will always predict male, and will be correct most of the time (especially when you subset the data). Naturally, this is uninformative.</p>
<p>However, the second point eclipses the first: when you try to predict diversity, well, you can’t. Because even though women are severely under-represented (leading to lazy algorithms), <em>everyone</em> is white. You can’t even make a cross-section joke anymore. Another unintended side effect of this is that if you rely on an API like <a rel="nofollow" href="https://genderize.io/" target="_blank">genderize</a>, you don’t have to worry about whether it will work well on, say, an Indian name. Feel free to make your own inferences about the state of the discipline.</p>
</div>
<div>
<h3>Visualising Contrast</h3>
<p>On that uplifting note, let’s move on to the first theme: contrast. What I mean by contrast here is striking difference, or difference in juxtaposition; not the graphical design contrast/hue/saturation. Given the subject matter, I thought a basic comparison over time stratified by gender will do nicely. It would not be surprising to see an increase in the number of included works by female authors as time progresses. However, we don’t know whether that (if exists) is an independent effect or a general one. We can set up a hover plot with <code>ggplot2</code> to illustrate this point: the first (static) plot only shows the female author subset, and upon hovering/clicking, it reveals the second plot that displays the whole data. Like the previous post, I’m only providing unevaluated (read: motivational) code here; you can always fork the functional code on <a rel="nofollow" href="https://github.com/ciflikli/gendeR" target="_blank">GitHub</a>:</p>
<pre><code>#Only the hover part of the Shiny code
  fluidRow(column(width = 6,
                  plotOutput(&quot;plot1&quot;, height = 400,
                             hover = hoverOpts(
                               id = &quot;plot1_hover&quot;,
                               nullOutside = FALSE))),
          column(width = 6,
                 conditionalPanel(
                   condition = &quot;input.plot1_hover != null&quot;,
                   plotOutput(&quot;plot2&quot;, height = 400))))</code></pre>
<div><img src="https://i1.wp.com/www.gokhanciflikli.com/img/plots.gif?w=456&ssl=1" data-recalc-dims="1"></div>
<p>On the left panel, we see what we expected: works by female authors see a surge after 1990. The drop-off at the end is probably indicative of the lag present in publication date and the time needed to make it into a reading list. However, when we plot both genders on the right panel, we realise the trend is universal – male authors also get included more and more.</p>
<p>Our illustration demonstrates two separate effects. First, there is absolute improvement over time; in syllabi, the number of publications by female authors tripled in the last three decades. Second, there is comparatively <em>little</em> relative progress in the same timeframe. Any statement more precise than that will need to involve statistics (cough, we may have a manuscript under review).</p>
<p>One thing we may not have accomplished with the above is the clear communication of year-to-year ratios. We could have used stacked bar charts rather than histograms, but I wanted to divide the workload – don’t put all your tricks into one plot (as they are more likely to break). <code>dygraphs</code> is a powerful library and will serve our needs well with its interactivity. <code>plotly</code> can achieve similar results as well, but I used it as an example in my previous post so let’s go for diversity (ha):</p>
<pre><code>library(dygraphs)
dygraph(data = authors) %>%
      dyOptions(fillGraph = TRUE, fillAlpha = 0.1, panEdgeFraction = 0.1, drawPoints = TRUE,
                strokeWidth = 1.2, drawGapEdgePoints = TRUE, drawGrid = FALSE, mobileDisableYTouch = TRUE) %>%
      dyLimit(.2, color = &quot;black&quot;) %>%
      dyLegend(width = 400, hideOnMouseOut = FALSE) %>%
      dyAxis(&quot;y&quot;, label = &quot;Percentage of All Readings&quot;, valueRange = c(.01, 1.005), rangePad = 1) %>%
      dyAxis(&quot;x&quot;, label = &quot;Date of Publication&quot;) %>%
      dySeries(&quot;V2&quot;, label = &quot;Female Author Ratio&quot;, color = &quot;#1fbfc3&quot;, stepPlot = TRUE) %>%
      dySeries(&quot;V3&quot;, label = &quot;Male Author Ratio&quot;, color = &quot;#f5766f&quot;, stepPlot = TRUE, fillGraph = TRUE)</code></pre>
<div><img src="https://i0.wp.com/www.gokhanciflikli.com/img/ts.png?w=456&ssl=1" data-recalc-dims="1"></div>
<p>Now, we can see that the majority of publication-years include less than 20% female authors, indicated by the dashed line. In the live app, users can hover and the legend on the top right corner will update to display the ratios for both genders. Unsurprisingly, we observe a similar trend after 1990; the relative improvement is about double: pre-1990, the female author ratio averages around 10%, while post-1990 it’s about 20%. I believe I have already made a sarcastic remark about the state of the discipline.</p>
</div>
<div>
<h3>Disaggregating Content</h3>
<p>Okay, so we have all these crude yearly statistics and plotted them to the best of our ability. What next? We need to go deeper <em>ala</em> Inception. This part is naturally governed by the richness of your data. In our case, we have some publication characteristics (year, type, number of authors, author gender) and data on independent courses. Let’s illustrate them both.</p>
<p>Publication characteristics easily lend themselves to segmented, colour-coded graphics. There are multiple libraries that you can utilise in R. I will go with <code>sunburstR</code> for no other reason that I liked the graphics so much, I made it my website favicon. It’s also featured in my <a rel="nofollow" href="https://www.gokhanciflikli.com/post/hello-world/" target="_blank">first blog post</a>. We all have our favourites.</p>
<pre><code>library(htmlwidgets)
library(sunburstR)
library(RColorBrewer)

blues &lt;- c(brewer.pal(9, &quot;Blues&quot;))
reds &lt;- c(brewer.pal(9, &quot;Reds&quot;))

#Sunburst using static patch data (code at the end makes sure the legend is on by default; use with htmlwidgets)
  
  output$sb &lt;- renderSunburst({
    htmlwidgets::onRender(
      sunburst(patch, count = TRUE,
               legend = list(w = 150, h = 25, s = 5, t = 25),
               breadcrumb = list(w = 0, h = 25, s = 5, t = 10),
               colors = c(&quot;&quot;, blues[1:8], reds[7:2]),
               legendOrder = c(&quot;1960&quot;, &quot;1970&quot;, &quot;1980&quot;, &quot;1990&quot;, &quot;2000&quot;, &quot;2010&quot;,
                               &quot;Book&quot;, &quot;Article&quot;,
                               &quot;OtherPublisher&quot;, &quot;TopPublisher&quot;,
                               &quot;CoAuthored&quot;, &quot;SingleAuthored&quot;,
                               &quot;MaleCoAuthor&quot;, &quot;FemaleCoAuthor&quot;), withD3 = TRUE),
    &quot;
    function(el,x){
    d3.select(el).select('.sunburst-togglelegend').property('checked', true);
    d3.select(el).select('.sunburst-legend').style('visibility', '');
    }
    &quot;
    )
  })</code></pre>
<div><img src="https://i2.wp.com/www.gokhanciflikli.com/img/sunburstR.png?w=456&ssl=1" data-recalc-dims="1"></div>
<p>You will need to wrangle your data to create sequences that <code>sunburstR</code> can plot, which is usually achieved with multiple <code>group_by</code> arguments with <code>dplyr</code>. The JavaScript code at the end renders a click so that the legend is on by default. You need to load <code>htmlwidgets</code> first and make sure you pass <code>withD3 = TRUE</code> as an argument during the call. Users can navigate the dial inside-out and the selection descriptives will be displayed in the middle, both as percentages and as a raw count.</p>
<p>Moving onto course breakdown, I got inspired by the <code>bokeh</code><a rel="nofollow" href="http://hafen.github.io/rbokeh/" target="_blank">tutorial</a> featuring the periodic table. We first cluster the courses into subfields of the discipline. Then, I manually (painfully) arranged the courses because all my automated attempts resulted in not-so-elegant outputs. Luckily, I happen to have a large whiteboard in my room (you don’t?), so I just drew the coordinate matrix there and then copy-pasted them. I’m sure you will find a way, too.</p>
<pre><code>library(rbokeh)
#Bokeh using static course data
  
  output$bokeh &lt;- renderRbokeh({
    figure(title = &quot;&quot;,
           tools = c(&quot;pan&quot;, &quot;wheel_zoom&quot;, &quot;reset&quot;, &quot;hover&quot;, &quot;save&quot;),
           font = &quot;Roboto Condensed&quot;,
           ylim = as.character(1:6),
           xlim = as.character(0:14), 
           xgrid = FALSE, ygrid = FALSE,
           xaxes = FALSE, yaxes = FALSE,
           height = 400, width = 1050,
           h_symmetry = TRUE, v_symmetry = TRUE,
           toolbar_location = &quot;right&quot;) %>%
      #Create cluster boxes as indicators
      ly_crect(xcor, ycor, data = indicator, width = 2.95, height = .95,
               fill_color = colors, line_color = &quot;#252525&quot;, fill_alpha = .6,
               hover = list(Subfield, Courses)) %>%
      ly_text(symx, ycor, text = clusters, data = indicator,
              font = &quot;Roboto Condensed&quot;,
              font_style = &quot;normal&quot;, font_size = &quot;14pt&quot;,
              align = &quot;center&quot;, baseline = &quot;middle&quot;) %>%
      #Create centered rectangles
      ly_crect(xcor, ycor, data = course, width = .95, height = .95,
               fill_color = color, line_color = &quot;#252525&quot;, fill_alpha = .6,
               hover = list(Convener, Readings)) %>%
      #F/M ratio
      ly_text(symx, ycor, text = Ratio, data = course,
              font = &quot;Roboto Condensed&quot;,
              font_style = &quot;bold&quot;, font_size = &quot;14pt&quot;,
              align = &quot;left&quot;, baseline = &quot;middle&quot;) %>%
      #Core course indicator
      ly_text(symx2, numbery, text = Core, data = course, font = &quot;Roboto Condensed&quot;,
              font_style = &quot;bold&quot;, font_size = &quot;6pt&quot;, align = &quot;left&quot;, baseline = &quot;middle&quot;) %>%
      #Course level
      ly_text(symx, massy, text = Level, data = course, font = &quot;Roboto Condensed&quot;,
              font_size = &quot;6pt&quot;, align = &quot;left&quot;, baseline = &quot;middle&quot;) %>%
      theme_title(text_font = &quot;Roboto Condensed&quot;, text_font_size = &quot;16pt&quot;,
                  background_fill_color = &quot;#ecf0f5&quot;, text_font_style = &quot;normal&quot;) %>%
      theme_plot(background_fill_color = &quot;#ecf0f5&quot;, border_fill_color = &quot;#ecf0f5&quot;, outline_line_alpha = 0)
  })</code></pre>
<div><img src="https://i2.wp.com/www.gokhanciflikli.com/img/bokeh.png?w=456&ssl=1" data-recalc-dims="1"></div>
<p>We want to convey two things at a glance with the course breakdown: which subfields feature more readings by female authors, and the level of dispersion within the clusters. Thus, I sorted the clusters from the lowest overall ratio to the highest, as well as dividing the courses into five categories. I removed both axes as they would be more confusing given the layout. In the app, you can hover on the boxes to reveal additional info: for courses, the gender and rank of the convener and the total of number of readings included; for clusters, it shows the full name of the subfield so that you can find out what IPE actually means.</p>
</div>
<div>
<h3>Impactful Interactivity</h3>
<p>Finally, sometimes you want to give the users finer control over the end result. In the first couple of plots, they can see yearly ratios, but cannot do much more than that. One way of achieving this would be giving them control over creating yearly dummies and then plotting it as a binary outcome for whether that mark is reached or not. For example, you can manipulate the dataframe to create dummies for whether that year has equal or greater than 20% F/M ratio. I will not embed the code here as it is just a <code>ggplot</code> with slider inputs, but the output would look like the following:</p>
<div><img src="https://i0.wp.com/www.gokhanciflikli.com/img/logit.png?w=456&ssl=1" data-recalc-dims="1"></div>
<p>In addition, we can also give them control over visualising the co-authorship patterns. We have three variables of interest for each entry: the total number of authors, the number of female authors, and the number of male authors. I calcuate the circle radii using square root as otherwise you would only see a huge M (if you include single-authored work in the mix) and nothing else. We transform all three into sliders and emulate the <a rel="nofollow" href="https://gallery.shinyapps.io/087-crandash/" target="_blank">CRAN package shiny app</a>:</p>
<pre><code>devtools::install_github(&quot;jcheng5/bubbles&quot;)
library(bubbles)
#Bubbles using reactive coData()
  
  output$bubbles &lt;- renderBubbles({
    if (nrow(coData()) == 0)
      return()
    bubbles(sqrt(coData()$n), coData()$AutGen, key = coData()$AutGen,
            tooltip = coData()$n, color = &quot;#222d32&quot;, textColor = &quot;white&quot;)
  })</code></pre>
<div><img src="https://i0.wp.com/www.gokhanciflikli.com/img/bubbles.png?w=456&ssl=1" data-recalc-dims="1"></div>
<p>Last but not least, as this whole project is about publications, it wouldn’t be right to gloss over the publishers themselves. Again, we are looking at the publishers from a single-year snapshot of the LSE IR department, so it wouldn’t be poignant to generalise beyond that. At least, this is what reviewer 2 told us. Using <code>DT</code>, it’s a breeze to create interactive tables. In Shiny, do call <code>renderDataTable</code> via <code>DT</code>:</p>
<pre><code>library(DT)
#selectedData will update based on slider settings
DT::renderDataTable(selectedData())
                     options(DT.options = list(
                       pageLength = 10, order = list(list(4, &quot;desc&quot;)),
                       class = &quot;hover&quot;,
                       language = list(search = &quot;Enter Publisher Name:&quot;,
                                       info = &quot;Displaying _START_ to _END_ of _TOTAL_ publishers&quot;)))</code></pre>
<div><img src="https://i1.wp.com/www.gokhanciflikli.com/img/pub.png?w=456&ssl=1" data-recalc-dims="1"></div>
<p>We see that the more ‘prestigious’ the publisher is, the more it gets close to the ‘status quo’ of 20% F/M ratio. However, if you decrease the number of total publications to ten (lowest allowed), you will find that there are publishers that go beyond 50%. Well, two of them, anyway.</p>
</div>
<p><strong><a rel="nofollow" href="https://blockads.fivefilters.org/" target="_blank">Let’s block ads!</a></strong> <a rel="nofollow" href="https://blockads.fivefilters.org/acceptable.html" target="_blank">(Why?)</a></p>
	<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="https://www.gokhanciflikli.com/post/lse-gender/"> Computational Social Science</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a rel="nofollow" href="https://www.r-project.org/" title="The R Project for Statistical Computing">R</a> news and <a rel="nofollow" href="https://www.r-bloggers.com/search/tutorial" title="R tutorials">tutorials</a> on topics such as: <a rel="nofollow" href="https://www.r-bloggers.com/search/data%20science" title="Data science">Data science</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data" title="Big Data">Big Data, <a rel="nofollow" href="https://www.r-users.com/" title="R jobs">R jobs</a>, visualization (<a rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2" title="ggplot and ggplot2 tutorials">ggplot2</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/boxplot" title="Boxplots using lattice and ggplot2 tutorials">Boxplots</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/map" title="Maps and gis">maps</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/animation" title="Animation in R">animation</a>), programming (<a rel="nofollow" href="https://www.r-bloggers.com/search/RStudio" title="RStudio IDE for R">RStudio</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/sweave" title="Sweave and literate programming">Sweave</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX" title="LaTeX in R">LaTeX</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/SQL" title="SQL and databases">SQL</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/eclipse" title="Eclipse IDE for R">Eclipse</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/git" title="git and github, Version Control System">git</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/hadoop" title="Large data in R using Hadoop">hadoop</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping" title="Web Scraping of google, facebook, yahoo, twitter and more using R">Web Scraping</a>) statistics (<a rel="nofollow" href="https://www.r-bloggers.com/search/regression" title="Regressions and ANOVA analysis tutorials">regression</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/PCA" title="principal component analysis tutorial">PCA</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/time+series" title="Time series">time series</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/trading" title="finance trading">trading</a>) and more...
<img width="1" alt="" src="http://feeds.feedburner.com/~r/RBloggers/~4/ywCKBrz_QOk" height="1"></a></div>