JSFiddle - React, Tailwind, and code Playground

by theneuralbit

HTML

<svg shape-rendering="geometricPrecision">
  <defs>
    <marker orient="auto" markerHeight="4" markerWidth="4" refY="0" refX="10" viewBox="0 -5 10 10" id="arrow"><path class="arrowHead" d="M0,-5L10,0L0,5"></path></marker> 
  </defs>
</svg>

CSS

svg > text {
  text-anchor: middle;
  dominant-baseline: middle;
  font-family: monospace;
}

JavaScript

var w = 1100;
var h = 500;

var svg = d3.select('svg')
	.attr('width', w)
  .attr('height', h);

var nodes = [
  	{binary: [0, 0], transitions: []},
    {binary: [0, 1], transitions: []},
    {binary: [1, 0], transitions: []},
    {binary: [1, 1], transitions: []},
  ];

var transitions = [
	{source: 0, target: 0, out: [0,0]}, {source: 0, target: 2, out: [1,1]},
  {source: 1, target: 0, out: [1,1]}, {source: 1, target: 2, out: [0,0]},
  {source: 2, target: 1, out: [0,1]}, {source: 2, target: 3, out: [1,0]},
  {source: 3, target: 1, out: [1,0]}, {source: 3, target: 3, out: [0,1]},
];

transitions.forEach(function (elem, idx) {
	nodes[elem.source].transitions.push({
  	target: elem.target, out: elem.out
  });
});

var num_bits = 5;
var r = 25;
function random_bit() { return Math.round(Math.random()); }
var received_bits = d3.range(num_bits).map(function() { 
	return [random_bit(), random_bit()];
});

var metric_data = received_bits.map(function (bits, idx) {
	return nodes.map(function (node, node_idx) {
  	var rtrn = {
    	binary: node.binary,
      transitions: node.transitions.map(function (t) {
      	return {
        	target: t.target,
          out: t.out,
          distance: hamming(t.out, bits)
        };
      }),
    }
    return rtrn;
  });
});

metric_data.forEach(function(step, idx) {
	step.forEach(function (node, node_idx) {
    if (idx === 0) {
    	node.metric = node_idx === 0 ? 0 : Infinity;
    } else {
    	var min_distance = Infinity;
      var min_node;
    	metric_data[idx - 1].forEach(function (prev_node) {
      	prev_node.transitions.forEach(function (t) {
        	if (t.target === node_idx && 
          		prev_node.metric + t.distance <= min_distance) {
          	min_distance = t.distance;
            min_node = prev_node;
          }
        });
      });
      node.metric = min_node.metric + min_distance;
    }    
  });
});

console.log(metric_data);

function hamming(a, b) {
	var sum = 0;
  a.forEach(function(d, i) { if (d == b[i]) {...