JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="http://johnarrowwood.com/pokemon/pokedex.min.js"></script>
<script src="http://johnarrowwood.com/pokemon/pokedex.min.js"></script>
<body>
  <svg id=root xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewbox="0 0 600 600" preserveAspectRatio="xMidYMid">
    <image xlink:href="http://johnarrowwood.com/pokemon/type/bug.png" x="-25" y="0" width="25" height="25" />
    <image xlink:href="http://johnarrowwood.com/pokemon/type/dark.png" x="-25" y="30" width="25" height="25" />
    <image xlink:href="http://johnarrowwood.com/pokemon/type/dragon.png" x="-25" y="60" width="25" height="25" />
    <image xlink:href="http://johnarrowwood.com/pokemon/type/electric.png" x="-25" y="90" width="25" height="25" />
    <image xlink:href="http://johnarrowwood.com/pokemon/type/fairy.png" x="-25" y="120" width="25" height="25" />
    <image xlink:href="http://johnarrowwood.com/pokemon/type/fighting.png" x="-25" y="150" width="25" height="25" />
    <image xlink:href="http://johnarrowwood.com/pokemon/type/fire.png" x="-25" y="180" width="25" height="25" />
    <image xlink:href="http://johnarrowwood.com/pokemon/type/flying.png" x="-25" y="210" width="25" height="25" />
    <image xlink:href="http://johnarrowwood.com/pokemon/type/ghost.png" x="-25" y="240" width="25" height="25" />
    <image xlink:href="http://johnarrowwood.com/pokemon/type/grass.png" x="-25" y="270" width="25" height="25" />
    <image xlink:href="http://johnarrowwood.com/pokemon/type/ground.png" x="-25" y="300" width="25" height="25" />
    <image xlink:href="http://johnarrowwood.com/pokemon/type/ice.png" x="-25" y="330" width="25" height="25" />
    <image xlink:href="http://johnarrowwood.com/pokemon/type/normal.png" x="-25" y="360" width="25" height="25" />
    <image xlink:href="http://johnarrowwood.com/pokemon/type/poison.png" x="-25" y="390" width="25" height="25" />
    <image...

CSS

html {
  position: absolute;
  display: block;
  margin: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.25in;
  background: #f7f7ff;
}

body {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: white;
}

#root {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border: 1px solid gray;
}

circle.node {
  fill: #ccc;
  stroke: #fff;
  stroke-width: 1px;
}

.link {
  stroke: rgba(0, 0, 0, 0.1);
  stroke-width: 0.5px;
}

JavaScript

(function code() {
  var dpi = 90;
  var width = 600; // dpi * 11;   // inches
  var height = 600; // dpi * 8.5; // inches
  var size = dpi * (1 / 3); // inches

  var type_node_list = typeNodes(pokedex);
  shuffle(type_node_list);
  initializePosition(type_node_list);

  var links = typeLinks(type_node_list);

  var svg = d3.select('#root');
/*
  var link = svg
    .append('g')
    .attr('id', 'links')
    .selectAll('line')
    .data(links)
    .enter()
    .append('line')
    .attr('class', 'link');
*/
  var type_nodes = svg
    .append('g')
    .attr('id', 'nodes')
    .selectAll('.node')
    .data(type_node_list)
    .enter()
    .append(createTypeNode);

  function updateTypeNodeLocations() {
  /*
    link
      .attr("x1", function(d){console.log(d.source);return d.source.x;})
      .attr("y1", function(d){return d.source.y;})
      .attr("x2", function(d){return d.target.x;})
      .attr("y2", function(d){return d.target.y;});
  */
    type_nodes
      .attr('x', nodeX)
      .attr('y', nodeY);

  	console.log('tick');

	}
  updateTypeNodeLocations();
  
  var position_the_types = d3.forceSimulation()
    .nodes( type_node_list )
    .force("charge",d3.forceManyBody().strength(-10))
    ;
  position_the_types.on('tick',updateTypeNodeLocations());
  
  function typeImage(type) {
    return 'http://www.johnarrowwood.com/pokemon/type/' + type.toLowerCase() + '.png';
  }
  function typeNodes(pokedex) {
    var type = {};
    var list = [];
    var p;
    var key;
    for (i = 0; i < pokedex.length; i++) {
      p = pokedex[i];
      key = p.type.join('-');
      if (!type.hasOwnProperty(key)) {
        type[key] = {
          id: key,
          type: 'type-' + (p.type.length == 1 ? 'single' : 'double'),
        };
        type[key].primary = typeImage(p.type[0]);
        if (p.type.length > 1) {
          type[key].secondary = typeImage(p.type[1]);
        }
        list.push(type[key]);
      }
    }
    return list;
  }

  function shuffle(a) {
    var i =...