How to represent data circle wise using row and column

I am tired to represent data row, column-wise like attach an image enter image description here.

condition:

  • Representation data similar next to in a column when overflow column then represent by row,
  • When next data is more than column Y-axis max and then X-axis representation.
  • If the blue over the previous Y-axis value then X and then Y

Here the example code: Codesandbox.io or

var data = {
      game_results: [
        {
          game_number: "1",
          winner: "red"
        },
        {
          game_number: "2",
          winner: "red"
        },
        {
          game_number: "3",
          winner: "red"
        },
        {
          game_number: "4",
          winner: "red"
        },
        {
          game_number: "5",
          winner: "red"
        },
        {
          game_number: "6",
          winner: "red"
        },
        {
          game_number: "7",
          winner: "red"
        },
        {
          game_number: "8",
          winner: "red"
        },
        {
          game_number: "9",
          winner: "red"
        },
        {
          game_number: "10",
          winner: "red"
        },
        {
          game_number: "11",
          winner: "blue"
        },
        {
          game_number: "12",
          winner: "blue"
        },
        {
          game_number: "13",
          winner: "red"
        },
        {
          game_number: "14",
          winner: "red"
        },
        {
          game_number: "15",
          winner: "red"
        },
        {
          game_number: "16",
          winner: "blue"
        },
        {
          game_number: "17",
          winner: "blue"
        },
        {
          game_number: "18",
          winner: "blue"
        },
        {
          game_number: "19",
          winner: "blue"
        },
        {
          game_number: "20",
          winner: "blue"
        },
        {
          game_number: "21",
          winner: "blue"
        },
        {
          game_number: "22",
          winner: "red"
        },
        {
          game_number: "23",
          winner: "blue"
        },
        {
          game_number: "24",
          winner: "blue"
        },
        {
          game_number: "25",
          winner: "blue"
        },
        {
          game_number: "26",
          winner: "blue"
        },
        {
          game_number: "27",
          winner: "blue"
        },
        {
          game_number: "28",
          winner: "blue"
        },
        {
          game_number: "30",
          winner: "blue"
        },
        {
          game_number: "31",
          winner: "red"
        },
        {
          game_number: "32",
          winner: "red"
        },
        {
          game_number: "33",
          winner: "red"
        },
        {
          game_number: "34",
          winner: "red"
        },
        {
          game_number: "35",
          winner: "blue"
        }
      ]
    };

    var width = 50,
      height = 50;
    var overflow1 = false;

    var prevState = data.game_results[0].winner;

    var regularx = 0,
      regularY = 0,
      x2 = 0,
      y2 = 6,
      xMax = 0;

    console.log("result ", data.game_results.length);

    for (i = 1; i <= data.game_results.length || 0; i++) {
      if (!(data.game_results[i - 1].winner == prevState)) {
        prevState = data.game_results[i - 1].winner;

        regularY = 0;
        x2 += 1;
        regularx = x2;
        xMax += 1;

        if (overflow1) {
          y2 -= 1;
        }
      }

      var _top = regularY * height;
      var _left = regularx * width;

      if (regularx == 0) {
        _left = 0;
      }
      if (regularY == 0) {
        _top = 0;
      }

      if (overflow1) {
        overflow1 = false;
      }

      if (regularY == y2) {
        overflow1 = true;
        regularY = y2 - 1;
        regularx += 1;
        _top = (y2 - 1) * height;
        _left = regularx * width;
      }

      $(".box__inner").append(
        '<div class="box '+ data.game_results[i - 1].winner+'" style="top:' +
          _top +
          "px; left:" +
          _left +
          "px; background: " + 'transparent'+
          ' "></div>'
      );

      regularY += 1;
    }
*:before,
      *:after,
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      .box-outer {
        border: 1px solid #ddd;
        overflow: auto;
      }

      .box__inner {
        height: 300px;
        position: relative;
        min-width: 100%;
        background: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk5RkVDODhBNzg1QjExRUI5MTE0REM4RTg4NTYyQjhBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk5RkVDODhCNzg1QjExRUI5MTE0REM4RTg4NTYyQjhBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTlGRUM4ODg3ODVCMTFFQjkxMTREQzhFODg1NjJCOEEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTlGRUM4ODk3ODVCMTFFQjkxMTREQzhFODg1NjJCOEEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAyADIDAREAAhEBAxEB/8QAWQABAQEAAAAAAAAAAAAAAAAAAAMIAQEAAAAAAAAAAAAAAAAAAAAAEAABBAAHAQEAAAAAAAAAAAAAAQIDBNGSslNzFDQRYREBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A0/Vq1XVYXOhYqqxqqqtT6q/E/AK9OpsR5W4AOnU2I8rcAHTqbEeVuADp1NiPK3AB06mxHlbgA6dTYjytwAU/JBxt0oBUAAAAAAEqfkg426UAqAAAAAACVPyQcbdKAVAAAAAABKn5IONulAKgAAAAAAlT8kHG3SgFQAAAAAASp+SDjbpQCoAAAAAAP//Z);
      }

      .box {
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #fff;
        border: 5px solid transparent;
      }
      

      .box:before,
      .box:after {
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        z-index: 1;
        background: #fff;
      }
      .box:before {
        width: 45px;
        height: 45px;
        background: red
      }

      .box.red:before {
        background: red;
      }
      .box.blue:before {
        background: blue;
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-outer">
  <div class="box__inner">
    <!-- <div class="box"></div> -->
  </div>
</div>

Answer

var data = {
  game_results: [
    {
      game_number: "1",
      winner: "red"
    },
    {
      game_number: "2",
      winner: "red"
    },
    {
      game_number: "3",
      winner: "red"
    },
    {
      game_number: "4",
      winner: "red"
    },
    {
      game_number: "5",
      winner: "red"
    },
    {
      game_number: "6",
      winner: "red"
    },
    {
      game_number: "7",
      winner: "red"
    },
    {
      game_number: "8",
      winner: "red"
    },
    {
      game_number: "9",
      winner: "red"
    },
    {
      game_number: "10",
      winner: "red"
    },
    {
      game_number: "11",
      winner: "blue"
    },
    {
      game_number: "12",
      winner: "blue"
    },
    {
      game_number: "13",
      winner: "red"
    },
    {
      game_number: "14",
      winner: "red"
    },
    {
      game_number: "15",
      winner: "red"
    },
    {
      game_number: "16",
      winner: "blue"
    },
    {
      game_number: "17",
      winner: "blue"
    },
    {
      game_number: "18",
      winner: "blue"
    },
    {
      game_number: "19",
      winner: "blue"
    },
    {
      game_number: "20",
      winner: "blue"
    },
    {
      game_number: "21",
      winner: "blue"
    },
    {
      game_number: "22",
      winner: "red"
    },
    {
      game_number: "23",
      winner: "blue"
    },
    {
      game_number: "24",
      winner: "blue"
    },
    {
      game_number: "25",
      winner: "blue"
    },
    {
      game_number: "26",
      winner: "blue"
    },
    {
      game_number: "27",
      winner: "blue"
    },
    {
      game_number: "28",
      winner: "blue"
    },
    {
      game_number: "30",
      winner: "blue"
    },
    {
      game_number: "31",
      winner: "red"
    },
    {
      game_number: "32",
      winner: "red"
    },
    {
      game_number: "33",
      winner: "red"
    },
    {
      game_number: "34",
      winner: "red"
    },
    {
      game_number: "35",
      winner: "blue"
    }
  ]
};

$(document).ready(async function () {
  await renderGameObject();
});

var visitedDataSet = [];
async function renderGameObject() {
  var width = 50,
    height = 50;
  var regularx = 0,
    ymax = 6;

  let _top = -1;
  let _left = 0;
  let xCordCompleted = -1;
  let previousColor = "";

  //for loop to render the element
  for (const r of data.game_results) {
    //Reset the color/state:
    if (previousColor != r.winner) {
      previousColor = r.winner;
      xCordCompleted = xCordCompleted + 1;
      _top = -1;
      _left = xCordCompleted;
    }

    //calculate that last position
    if (_top === ymax - 1) {
      regularx += 1;
      _left = regularx;
      var cordinate = await checkAvailablePosition(_left, _top);
      _left = cordinate.xCod;
      _top = cordinate.yCod;
    } else {
      _top = _top + 1;
      var cordinate1 = await checkAvailablePosition(_left, _top);
      _left = cordinate1.xCod;
      _top = cordinate1.yCod;
    }

    // stored the visited coordinate
    visitedDataSet.push({ x: _left, y: _top });
    $(".box__inner").append(
      '<div class="box ' +
        r.winner +
        '" style="top:' +
        _top * width +
        "px; left:" +
        _left * height +
        "px; background: " +
        "transparent" +
        ' "></div>'
    );
  }
}

async function checkAvailablePosition(xCod, yCod) {
  let existingData =
    (await visitedDataSet.filter((r) => r.x === xCod && r.y === yCod)) || [];
  if (existingData.length > 0) {
    //console.log("existing:", existingData);
    //
    if (
      (
        (await visitedDataSet.filter(
          (r) => r.x === xCod + 1 && r.y === yCod - 1
        )) || []
      ).length > 0
    ) {
      return { xCod: xCod + 1, yCod: yCod + 1 };
    } else {
      return { xCod: xCod + 1, yCod: yCod - 1 };
    }
  } else {
    return { xCod: xCod, yCod: yCod };
  }
}
*:before,
      *:after,
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      .box-outer {
        border: 1px solid #ddd;
        overflow: auto;
      }

      .box__inner {
        height: 300px;
        position: relative;
        min-width: 100%;
        background: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk5RkVDODhBNzg1QjExRUI5MTE0REM4RTg4NTYyQjhBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk5RkVDODhCNzg1QjExRUI5MTE0REM4RTg4NTYyQjhBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTlGRUM4ODg3ODVCMTFFQjkxMTREQzhFODg1NjJCOEEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTlGRUM4ODk3ODVCMTFFQjkxMTREQzhFODg1NjJCOEEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAyADIDAREAAhEBAxEB/8QAWQABAQEAAAAAAAAAAAAAAAAAAAMIAQEAAAAAAAAAAAAAAAAAAAAAEAABBAAHAQEAAAAAAAAAAAAAAQIDBNGSslNzFDQRYREBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A0/Vq1XVYXOhYqqxqqqtT6q/E/AK9OpsR5W4AOnU2I8rcAHTqbEeVuADp1NiPK3AB06mxHlbgA6dTYjytwAU/JBxt0oBUAAAAAAEqfkg426UAqAAAAAACVPyQcbdKAVAAAAAABKn5IONulAKgAAAAAAlT8kHG3SgFQAAAAAASp+SDjbpQCoAAAAAAP//Z);
      }

      .box {
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #fff;
        border: 5px solid transparent;
      }
      

      .box:before,
      .box:after {
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        z-index: 1;
        background: #fff;
      }
      .box:before {
        width: 45px;
        height: 45px;
        background: red
      }

      .box.red:before {
        background: red;
      }
      .box.blue:before {
        background: blue;
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="box-outer">
      <div class="box__inner">
        <!-- <div class="box"></div> -->
      </div>
    </div>

Could you check the code from the link, I have stored the visited co-ordinate and checked the visited path so that we can change the logic.

Click here to view the code

Leave a Reply

Your email address will not be published. Required fields are marked *