JavaScript: Arranging Data in a Matrix Based on Optimal Placement

Question

JavaScript: Arranging Data in a Matrix Based on Optimal Placement

How can one efficiently organize a dynamic matrix for optimal fit? Imagine you need to constantly display items in the best possible way, with no gaps between them. Each item can have a size ranging from 1 to 12, and each row can have a maximum width of 12. Given a sample dataset, how would you dynamically sort and generate a new array that fits the display perfectly?

let exampleMatrix = [{
  size: 10,
  type: 'card'
}, {
  size: 4,
  type: 'card'
}, {
  size: 2,
  type: 'card'
}, {
  size: 11,
  type: 'card'
}, {
  size: 6,
  type: 'card'
}];


let resultArray = [
  [{
    size: 10,
    type: 'card'
  }, {
    size: 2,
    type: 'card'
  }],
  [{
    size: 4,
    type: 'card'
  }, {
    size: 6,
    type: 'card'
  }],
  [{
    size: 11,
    type: 'card'
  }]
];

What is the significance of this for the user? This process is crucial when generating dynamic data for a UI and ensuring that the components are optimized for space.

javascript arrays sorting

Answer 1

Answer №1

It appears that the challenge presented here aligns with what is known as the bin packing problem.

Solving this particular problem isn't an easy feat, and achieving more accurate outcomes can lead to solutions that are increasingly complex.

Featured below is a basic greedy algorithm intended to address your issue with a rough approximation. While it's feasible to enhance matches, doing so will add complexity and computational expense.

The provided solution utilizes recursion and adheres to a functional style, per my preference; however, a cleaner and less costly algorithm could be devised if avoiding functional or recursive techniques is preferred.

const matrixExample = [{
  size: 10,
  type: 'card'
}, {
  size: 4,
  type: 'card'
}, {
  size: 2,
  type: 'card'
}, {
  size: 11,
  type: 'card'
}, {
  size: 6,
  type: 'card'
}];

const sumCardList = cardList => cardList.reduce((prev, curr) => prev + curr.size, 0);

const packNextToBin = (cards, bins, max) => {
  if (cards.length === 0) {
    // there are no more cards to pack, use bins as is
    return bins;
  }
  
  // get the next card to pack into the bins
  const cardToPack = cards[0];
  
  // get the indices of bins which can still be filled
  const availableBinIndices = bins
    .map((bin, i) => ({sum: sumCardList(bin), index: i}))
    .filter(binData => binData.sum + cardToPack.size < max)
    .map(binData => binData.index);
    
  // if there are no more bins which can fit this card, makea new bin  
  if (availableBinIndices.length === 0) {
    const updatedBins = [
      ...bins,
      [
        cardToPack
      ]
    ];
    
    return packNextToBin(
      cards.slice(1),
      updatedBins,
      max
    );
  }
  
  // get the first available bin which can accept the card
  const binToPack = availableBinIndices[0];
    
  // get a version of the matched bin with the new card added  
  const binWithInsertion = [
    ...bins[binToPack],
    cardToPack,
  ];
  
  // get the bins with the updated bin updated
  const updatedBins = bins
    .map((bin, i) => i === binToPack ?
      binWithInsertion :
      bin
    );
  
  // pack the next card into the bins
  return packNextToBin(
    cards.slice(1),
    updatedBins,
    max
  );
}

const results = packNextToBin(matrixExample, [[]], 12)

console.dir(results)

Answer 2

It appears that the challenge presented here aligns with what is known as the bin packing problem.

Solving this particular problem isn't an easy feat, and achieving more accurate outcomes can lead to solutions that are increasingly complex.

Featured below is a basic greedy algorithm intended to address your issue with a rough approximation. While it's feasible to enhance matches, doing so will add complexity and computational expense.

The provided solution utilizes recursion and adheres to a functional style, per my preference; however, a cleaner and less costly algorithm could be devised if avoiding functional or recursive techniques is preferred.

const matrixExample = [{
  size: 10,
  type: 'card'
}, {
  size: 4,
  type: 'card'
}, {
  size: 2,
  type: 'card'
}, {
  size: 11,
  type: 'card'
}, {
  size: 6,
  type: 'card'
}];

const sumCardList = cardList => cardList.reduce((prev, curr) => prev + curr.size, 0);

const packNextToBin = (cards, bins, max) => {
  if (cards.length === 0) {
    // there are no more cards to pack, use bins as is
    return bins;
  }
  
  // get the next card to pack into the bins
  const cardToPack = cards[0];
  
  // get the indices of bins which can still be filled
  const availableBinIndices = bins
    .map((bin, i) => ({sum: sumCardList(bin), index: i}))
    .filter(binData => binData.sum + cardToPack.size < max)
    .map(binData => binData.index);
    
  // if there are no more bins which can fit this card, makea new bin  
  if (availableBinIndices.length === 0) {
    const updatedBins = [
      ...bins,
      [
        cardToPack
      ]
    ];
    
    return packNextToBin(
      cards.slice(1),
      updatedBins,
      max
    );
  }
  
  // get the first available bin which can accept the card
  const binToPack = availableBinIndices[0];
    
  // get a version of the matched bin with the new card added  
  const binWithInsertion = [
    ...bins[binToPack],
    cardToPack,
  ];
  
  // get the bins with the updated bin updated
  const updatedBins = bins
    .map((bin, i) => i === binToPack ?
      binWithInsertion :
      bin
    );
  
  // pack the next card into the bins
  return packNextToBin(
    cards.slice(1),
    updatedBins,
    max
  );
}

const results = packNextToBin(matrixExample, [[]], 12)

console.dir(results)

JavaScript: Arranging Data in a Matrix Based on Optimal Placement

Answer №1

Similar questions

Inquire about understanding Mean.js through form submission

Hide the .prev button on the jQuery slider when it is on the first

The health check URL is experiencing issues: Unable to locate any routes

Steps to Extract the key value from the parseJson() function

Regular expression for finding CSS key-value pairs

Best practices for selecting checkboxes and transferring values to another page in PHP/HTML

Limit the maximum value for a NUMBER input in vue - a step-by-step guide!

Implementing AJAX notifications in a contact form integrated with PHP, Google reCAPTCHA, and SweetAlert

Tips for positioning the footer in HTML and CSS

Sending a Thunk to the store using Typescript

ng-src unable to bind the data

Is there a way to execute a condition in a Vue component before rendering the HTML in the template?

Performing iterative calculations in Python

I am looking to save a collection of variables in an array and store it as a $_SESSION variable

Unable to retrieve slots from child component's dynamic function in Vue2

Only ONE number is being printed in the array

When attempting to send data to the ServiceStack RESTful service, an error message of 'Access is denied' was received

Troubleshooting: Jquery Toggle Issue When Used with Adjacent Div Element

Leveraging jQuery to dynamically load an icon based on the content within a <label> tag

I want to initiate a Python script by clicking a button on my HTML page with the help of Ajax