JSFiddle - React, Tailwind, and code Playground

by theneuralbit

HTML

<div id="panel">
  <svg id="svg">
  </svg>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=PT+Serif);

JavaScript

var w = 400;
var h = 300;
var svg = d3.select('svg')
    .attr('width', w)
    .attr('height', h)
    .attr('font-size', '2.5em')
    .attr('font-family', '"PT Serif"');

function transform(string) {
  var counts = {};
  return string.split('').map(function(item, idx) {
    var count = counts[item] ? counts[item] : 0;
    counts[item] = count + 1;
    return {c: item, i: count, idx: idx}
  });
}
var the_neural_bit = transform('the neural bit')
var brian_hulette  = transform('brian hulette')
var toggle_flag = true;
var start = w/2 - the_neural_bit.length/2*25;
svg.selectAll('text')
    .data(the_neural_bit)
    .enter()
    .append('text')
    .text(function(d, i) {return d.c; })
    .attr('y', h/2)
    .attr('x', function(d, i) { return start + i*25; });
setInterval(function() {
  var the_string;
  if (toggle_flag) {
    the_string = brian_hulette;
  } else {
    the_string = the_neural_bit;
  }
  toggle_flag = !toggle_flag;
  svg.selectAll('text')
      .data(the_string, function(d) { return d.c + d.i; })
      .attr('x', function(d, i) { return start + d.idx*25; });
  return true;
}, 3000);