JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/@inflect/map@latest"></script>
<div id="container">
  <div id="inflect-map"></div>
</div>

CSS

#container {
  width: 100%;
  height: 400px;
}

JavaScript

function genHex() {
  var hex = '0123456789abcdef';
  var color = ['#'];
  for (var i = 0; i < 6; i++) {
    var rand = Math.floor(Math.random() * hex.length);
    color.push(hex[rand]);
  }
  return color.join('');
}

// initialize map
var map = new InflectMap();
map.init({ 
  token: 'NQjSphGeQyjnmALeKEfJTz6a',
  theme: 'dark',
});

// cycle through random values every two seconds
setInterval(() => {
  map.set({
    dotColor: genHex(),
    dotRadius: Math.random() * 8,
    dotBorderColor: genHex(),
    dotBorderWidth: Math.random() * 8,
  })
}, 2000);