JSFiddle - React, Tailwind, and code Playground

by Nayana Das

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script src="https://d3js.org/d3.v4.min.js"></script>

<body>
</body>

JavaScript

var margin = {
            top: 20,
            right: 20,
            bottom: 70,
            left: 40
          },
          width = 1800 - margin.left - margin.right,
          height = 1800 - margin.top - margin.bottom;


        var svg = d3.select("body").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");

        var data = [{
          "name": "Read",
          "status": "Green"
        }, {
          "name": "Write",
          "status": "Green"
        }, {
          "name": "StorageAccount",
          "status": "Red"
        }];

        var panelPadding = 10;
        var panelWidth = 250;
        var panelHeight = 150;
        var rowCountMax = 2;
        var currentRow = 0;
        var xcount = 0;
        var ycount = 0;

        svg.selectAll("status-panel")
          .data(data)
          .enter().append("rect")
          .attr("class", "status-panel")
          .attr("x", function(d, i) {
            if (xcount == rowCountMax)
              xcount = 0;
            return (panelWidth + panelPadding) * xcount++;
          })
          .attr("y", function(d, i) {
            if (ycount == rowCountMax) {
              currentRow += (panelHeight + panelPadding);
              ycount = 1;
              return currentRow;

            } else {
              ycount++;
              return currentRow;
            }
          })
          .attr("width", panelWidth)
          .attr("height", panelHeight)
          .attr("fill", function(d, i) {
            return d.status == "Green" ? "#07BA72" : "#F14659";
          })
          .append("html")
          .attr()
          

        xcount = 0;
        ycount = 0;
        currentRow = 0;
        var yTextPadding = 20;
        svg.selectAll("status-panel")
          .data(data)
          .enter()
         ...