var chars = []
var widths = []

// For "!" through "~"...
for (var i = 33; i < 127; i++) {
  chars[i] = {char: String.fromCharCode(i), i}
}

chars = chars.filter(d => d)


var {svg, width, height} = d3.conventions({
  sel: d3.select('#graph').html('')
})

var numCols = 13
var s = 960/numCols

chars.forEach((d, i) => d.pos = [
  s*(i % numCols),
  s*Math.floor(i / numCols)   
])


var charSel = svg.appendMany('g', chars).translate(d => d.pos)

charSel.append('text')
  .st({font: '50px courier'})
  .at({dy: '.33em', fill: 'red'})
  .text(d => d.char)

charSel.append('rect')
  .at({width: 30, height: 51, y: -22, fill: 'rgba(255,255,255,1)'})

charSel.append('rect.hidden')
  .at({width: 30, height: 51, y: -22, fill: 'rgba(230,230,230,1)'})

charSel.append('text.hidden')
  .st({font: '50px courier', opacity: 1})
  .at({dy: '.33em'})
  .text(d => d.char)
  .each(function(d) {
    var bb = this.getBoundingClientRect()

    d.width = bb.width
    d.height = bb.height
  })


charSel.append('rect.hidden')
  .at({fill: '#f0f', width: d => d.width, height: 0})



charSel.append('text.hidden')
  .text(d => ('' + d.width).substr(0, 5) + 'px')
  .at({fill: '#f0f', fontSize: 10, y: s/1.8})


d3.select('svg').on('click', function(){
  console.log(d3.mouse(this))
})

var highlights = [
  [862, 404],
  [833, 404],
  [833, 385],
  [789, 342],
  [758, 342],
  [493, 182],
  [641, 458],
  [611, 458]
]

svg.appendMany('circle', highlights)
  .at({r: 5, stroke: '#f00', fill: 'none', cx: -20, cy: -20, strokeDasharray: '1 1'})
  .translate(d => d)


function showOverlap(){
  d3.selectAll('.hidden')
    .st({opacity: 0})
    .transition().duration(1000).delay(1000)
    .st({opacity: 1})
}

showOverlap()

d3.select('body').on('click', showOverlap).st({cursor: 'pointer'})