server-side/fill-in-the-blank/gender-over-time-colab/script.js

console.clear()
d3.select('body').selectAppend('div.tooltip.tooltip-hidden')

var colors = ["#ba6a38", "#008670"]

d3.loadData('https://roadtolarissa.com/colab/gender-over-time-colab/processed_vocab.json', (err, res) => {
  window.vocab = res[0]
  d3.select('#graph').html('').datum(jsData).each(drawSentence)
})

async function drawSentence({s0, s1, tidyCSV, minYear}, i){
  var tidy = d3.csvParse(jsData.tidyCSV)

  console.log(minYear)
  tidy.forEach(d => {
    d.year = minYear + +d.year_index
    d.i = +d.token_index
    d.e0 = +d.e0
    d.e1 = +d.e1
    d.mean = d.e0 + d.e1
    d.dif = d.e0 - d.e1
  })

  var sel = d3.select(this).st({marginRight: 20})
  sel.append('div').st({color: colors[0]}).text(s0)
  sel.append('div').st({color: colors[1]}).text(s1)

  var e0Extent = d3.extent(tidy, d => d.e0)
  var e1Extent = d3.extent(tidy, d => d.e1)
  var e0e1Exent = d3.extent(e0Extent.concat(e1Extent))

  var maxDif = d3.max(d3.extent(tidy, d => d.dif), Math.abs)
  var difExtent = [-maxDif, maxDif]

  drawDim(tidy, sel, {
    key: 'dif', 
    yExtent: difExtent, 
    rectColor: [colors[0], colors[1]]
  })
  drawDim(tidy, sel, {
    key: 'e0', 
    yExtent: e0e1Exent, 
    rectColor: [colors[0], colors[0]]
  })
  drawDim(tidy, sel, {
    key: 'e1', 
    yExtent: e0e1Exent, 
    rectColor: [colors[1], colors[1]]
  })
}

function drawDim(tidy, sel, {key, rectColor, yExtent}){
  var c = d3.conventions({
    sel: sel.append('div').st({display: 'inline-block'}), 
    height: 280,
    width: 280,
    margin: {left: 0, bottom: 50, right: 80}
  })

  c.svg.append('rect')
    .at({width: c.width, height: c.height/2, opacity: .1, fill: rectColor[0]})

  c.svg.append('rect')
    .at({width: c.width, height: c.height/2, opacity: .1, fill: rectColor[1], y: c.height/2})

  c.x.domain(d3.extent(tidy, d => d.year))
  c.y.domain(yExtent)

  c.xAxis.tickFormat(d => d)
  c.yAxis.ticks(5)
  d3.drawAxis(c)

  var byToken = d3.nestBy(tidy, d => d.i)
  byToken.forEach(d => {
    d.endY = c.y(_.last(d)[key])
    d.str = vocab[+d.key].replace('▁', '')
    d.displayLabel = true
    d.mean = d3.sum(d, e => e.mean)
    d.keyMean = d3.sum(d, e => e[key])
  })
  console.log(tidy[0])

  d3.nestBy(_.sortBy(byToken, d => -d.mean), d => Math.round(d.endY/12))
    .forEach(d => d.forEach((e, i) => e.displayLabel = !i))

  var line = d3.line()
    .x(d => c.x(d.year))
    .y(d => c.y(d[key]))

  var tokenSel = c.svg.appendMany('g.token', byToken)
    // .call(d3.attachTooltip)
    .on('mouseover', function(d){
      d3.selectAll('g.token')
        .classed('active', 0)
        .filter(e => e.str == d.str)
        .classed('active', 1)
        .raise()
    })

  c.svg.on('mouseleave', function(){
    d3.selectAll('g.token').classed('active', 0)
  })

  tokenSel.append('text')
    .text(d => d.str)
    .translate(d => [c.width + 2, d.endY])
    .at({fontSize: 10, dy: '.33em', fill: (d, i) => d.displayLabel ? '#999' : 'rgba(0,0,0,0)'})

  tokenSel.append('path')
    .at({
      d: line,
      stroke: '#000',
      opacity: .2,
      fill: 'none',
    })

}