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;
d3.select('svg')
    .attr('width', w)
    .attr('height', h)
    .attr('font-size', '2.5em')
    .attr('font-family', '"PT Serif"');
var the_string = 'the neural bit';
var start = w/2 - the_string.length/2*25;
d3.select('svg')
    .selectAll('text')
    .data(the_string)
    .enter()
    .append('text')
    .text(function(d, i) {return d; })
    .attr('y', h/2)
    .attr('x', function(d, i) { return start + i*25; });