console.clear()

var data = [
  {font: 'Courier'},
  {font: 'monaco'},
  {font: 'monaco, Consolas'},
  {font: 'Consolas, monaco'},
  {font: 'Consolas'},
  {font: 'Lucida Console'},
  {font: 'Lucida Grande'},
  {font: 'Courier New'},
  {font: 'Helvetica'},
  // {font: 'Verdana'},
  {font: 'Georgia'},
  {font: 'Comic Sans MS'},
  {font: 'wingdings'},
]

var sel = d3.select('#graph').html('')
var c = d3.conventions({sel, margin: {left: 30, top: 40}})

c.y.domain([data.length - 1, 0])


var rowSel = c.svg.appendMany('g', data)
  .translate((d, i) => c.y(i), 1)
  .at({fontFamily: d => d.font, fontSize: 50})

rowSel.append('text')
  .text(d => d.font)
  .st({fontSize: 14, textAnchor: 'start'})

var x0 = 160
var x1 = 260
var x2 = 360

rowSel.append('circle')
  .at({r: 15, cx: x0, stroke: '#ccc', fill: 'none'})

rowSel.append('text')
  .text('→')
  .at({x: x0})


rowSel.append('circle')
  .at({r: 15, cx: x1, stroke: '#ccc', fill: 'none'})

rowSel.append('text')
  .text('←')
  .at({x: x1})


rowSel.append('text')
  .text('→')
  .at({x: x2, fill: '#0f0', fillOpacity: 1})

rowSel
  .append('g').translate([x2, 0])
  .append('text')
  .text('←')
  .at({fill: '#00f', fillOpacity: 1})
  .at({transform: 'scale(-1, 1)'})


d3.selectAll('text')
  .at({dy: '.33em'})