JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  </head>

  <body>
    <div id="body">
      <div id="chart"></div>
    </div>
  </body>

</html>

CSS

body {
  background-color: #111111;
}

JavaScript

/*//////////////////////////////////////////////////////////
////////////////// Set up the Data /////////////////////////
//////////////////////////////////////////////////////////*/

var locations = [
  { id: 0, name: "Gate A", color: "#12B32D" },
  { id: 1, name: "Gate B", color: "#0D8020" },
  { id: 2, name: "Gate D", color: "#095916" },
  { id: 3, name: "Gate E", color: "#064010" },
  { id: 4, name: "Check-in 1", color: "#F4CF11" },
  { id: 5, name: "Check-in 2", color: "#B3970C" },
  { id: 6, name: "Check-in 3", color: "#665607" },
  { id: 7, name: "Airside Center", color: "#0D6180" },
  { id: 8, name: "Airport Shopping", color: "#16A2D5" },
  { id: 9, name: "P1", color: "#01FAF1" },
  { id: 10, name: "P2", color: "#14CCCC" },
  { id: 11, name: "P3", color: "#0F9999" },
  { id: 12, name: "P4", color: "#0C8080" },
  { id: 13, name: "P5", color: "#074D4D" },
  { id: 14, name: "Rail", color: "#F27900" },
  { id: 15, name: "Bus/Tram", color: "#EF4F00" }
];

var flows = [
  { from: 0, to: 0, quantity: 428 },
  { from: 0, to: 1, quantity: 5 },
  { from: 0, to: 2, quantity: 2 },
  { from: 0, to: 3, quantity: 10 },
  { from: 0, to: 4, quantity: 1 },
  { from: 0, to: 5, quantity: 8 },
  { from: 0, to: 6, quantity: 0 },
  { from: 0, to: 7, quantity: 86 },
  { from: 0, to: 8, quantity: 318 },
  { from: 0, to: 9, quantity: 30 },
  { from: 0, to: 10, quantity: 23 },
  { from: 0, to: 11, quantity: 67 },
  { from: 0, to: 12, quantity: 101 },
  { from: 0, to: 13, quantity: 10 },
  { from: 0, to: 14, quantity: 270 },
  { from: 0, to: 15, quantity: 120 },
  { from: 1, to: 0, quantity: 0 },
  { from: 1, to: 1, quantity: 128 },
  { from: 1, to: 2, quantity: 40 },
  { from: 1, to: 3, quantity: 10 },
  { from: 1, to: 4, quantity: 0 },
  { from: 1, to: 5, quantity: 30 },
  { from: 1, to: 6, quantity: 10 },
  { from: 1, to: 7, quantity: 78 },
  { from: 1, to: 8, quantity: 172 },
  { from: 1, to: 9, quantity: 90 },
  { from: 1, to: 10, quantity: 2 },
  { from: 1, to: 11, quantity:...