wiki-years by 1wheel

script.js

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

d3.loadData('years.tsv', (err, res) => {
  data = res[0]
  data.forEach(d => {
    d.str = d.year
    d.year = +d.year
    d.count = +d.count
  })
  data = data
    .filter(d => 1000 <= d.year && d.year <= 2020)
    .filter(d => d.year + '' === d.str)

  data.forEach(d => delete d.str)
  var sel = d3.select('#graph').html('')
  var c = d3.conventions({sel, margin: {left: 80}})
  c.svg.append('rect').at({width: c.width, height: c.height, fill: '#eee'})

  c.x.domain(d3.extent(data, d => d.year)).interpolate(d3.interpolateRound)
  // c.y.domain(d3.extent(data, d => d.count))
  var y = d3.scaleLog()
    .domain([1000, 2000000])
    .range([c.height, 0])
    .clamp(1)
    .interpolate(d3.interpolateRound)

  c.xAxis.tickFormat(d => d)
  c.yAxis = d3.axisLeft(y).ticks(5, d3.format(','))
  d3.drawAxis(c)
  c.svg.selectAll('.y .tick')
    .append('path').at({d: 'M 0 0 H ' + c.width, stroke: '#fff', strokeWidth: 1})

  c.svg.selectAll('.x .tick')
    .append('path').at({d: 'M 0 0 V -' + c.height, stroke: '#fff', strokeWidth: 3})

  c.svg.appendMany('circle', data)
    .at({
      cx: d => c.x(d.year),
      cy: d => y(d.count),
      stroke: '#000',
      fillOpacity: .4,
      r: 3
    })
    .call(d3.attachTooltip)
  data.forEach(d => d.count = d3.format(',')(d.count))

})








d3.loadData('years.tsv', (err, res) => {
  data = res[0]
  data.forEach(d => {
    d.str = d.year
    d.year = +d.year
    d.count = +d.count
  })
  data = data
    .filter(d => 1350 <= d.year && d.year <= 1850)
    .filter(d => d.year + '' === d.str)

  data.forEach(d => delete d.str)
  var sel = d3.select('#small-graph').html('')
  var c = d3.conventions({sel, margin: {left: 40, right: 10}, height: 100})
  c.svg.append('rect').at({width: c.width, height: c.height, fill: '#eee'})

  c.x.domain(d3.extent(data, d => d.year)).interpolate(d3.interpolateRound)
  // c.y.domain(d3.extent(data, d => d.count))
  var y = d3.scaleLog()
    .domain([1000, 40000])
    .range([c.height, 0])
    .clamp(1)
    .interpolate(d3.interpolateRound)

  c.xAxis.tickFormat(d => d).ticks(4)
  c.yAxis = d3.axisLeft(y).tickValues([1000, 2000, 4000, 10000, 20000]).tickFormat(d3.format(','))
  d3.drawAxis(c)
  c.svg.selectAll('.y .tick')
    .append('path').at({d: 'M 0 0 H ' + c.width, stroke: '#fff', strokeWidth: .5})

  c.svg.selectAll('.y text').at({x: -3})

  c.svg.selectAll('.x .tick')
    .append('path').at({d: 'M 0 0 V -' + c.height, stroke: '#fff', strokeWidth: 2})
  
  c.svg.append('text').text('Year Frequency in Wikipedia')
    .at({fontSize: 12, fontWeight: 600, fontFamily: 'sans-serif', y: -4, textAnchor: 'middle', x: c.width/2})

  c.svg.appendMany('circle', data)
    .at({
      cx: d => c.x(d.year),
      cy: d => y(d.count),
      stroke: '#000',
      fillOpacity: .4,
      r: 1
    })
    .call(d3.attachTooltip)
})

index.html

<!DOCTYPE html>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">

<div id='graph'></div>
<div id='small-graph'></div>

<script src='d3_.js'></script>
<script src='script.js'></script>

parse-years.js

var {io, fs} = require('scrape-stl')

var years = []
var rows = fs.readFileSync('wp_1gram.tsv', 'utf8')
  .split('\n')
  .forEach(d => {
    var [count, str] = d.split('	')
    if (str?.length == 4 && isFinite(str)) years.push({year: str, count})
  })

io.writeDataSync('years.tsv', years)

style.css

body{
  font-family: menlo, Consolas, 'Lucida Console', monospace; 
  margin: 0px;
  /*filter: invert(100%);*/
}

.tooltip {
  top: -1000px;
  position: fixed;
  padding: 10px;
  background: rgba(255, 255, 255, .90);
  border: 1px solid lightgray;
  pointer-events: none;
}
.tooltip-hidden{
  opacity: 0;
  transition: all .3s;
  transition-delay: .1s;
}

@media (max-width: 590px){
  div.tooltip{
    bottom: -1px;
    width: calc(100%);
    left: -1px !important;
    right: -1px !important;
    top: auto !important;
    width: auto !important;
  }
}

svg{
  overflow: visible;
}

.domain{
  display: none;
}

text{
  pointer-events: none;
  /*text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;*/
}


.tick line{
  opacity:  0;
}

.axis text{
  fill: #555;
}

#small-graph{
  margin-top: 200px;
  /*background: rgba(255, 255, 255, .8);*/
  width: 300px;
}