Spaces:
Running
Running
| console.clear() | |
| d3.select('body').selectAppend('div.tooltip.tooltip-hidden') | |
| var colors = ["#c0584b", "#649398"] | |
| 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 c = d3.conventions({ | |
| sel, | |
| height: 300, | |
| width: 300, | |
| margin: {left: 0, bottom: 50, right: 60} | |
| }) | |
| c.svg.append('rect') | |
| .at({width: c.width, height: c.height/2, opacity: .1, fill: colors[0]}) | |
| c.svg.append('rect') | |
| .at({width: c.width, height: c.height/2, opacity: .1, fill: colors[1], y: c.height/2}) | |
| console.log(tidy[0]) | |
| c.x.domain(d3.extent(tidy, d => d.year)) | |
| var minY = d3.min(d3.extent(tidy, d => d.dif), Math.abs) | |
| var maxY = d3.max(d3.extent(tidy, d => d.dif), Math.abs) | |
| c.y.domain([-minY, minY]) | |
| c.y.domain([-maxY, maxY]) | |
| // c.y.domain([-4.5, 4.5]) | |
| 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).dif) | |
| d.str = vocab[+d.key].replace('▁', '') | |
| d.displayLabel = true | |
| d.mean = d3.sum(d, e => e.mean) | |
| }) | |
| 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.dif)) | |
| var tokenSel = c.svg.appendMany('g', byToken) | |
| // .call(d3.attachTooltip) | |
| .on('mouseover', function(){ | |
| tokenSel.classed('active', 0) | |
| d3.select(this) | |
| .raise() | |
| .classed('active', 1) | |
| }) | |
| c.svg.on('mouseleave', function(){ | |
| tokenSel.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', | |
| }) | |
| } | |