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);