Как создать тепловую карту, не создавая так много массивов для значения Z Plotly

Question

У меня очень большой набор данных, и создание тепловой карты с массивами z занимает слишком много времени.Есть ли способ, которым я могу установить его, где я перебираю значения x и говорю, что конкретные значения y имеют это значение z для этого значения x.Я не уверен, что объяснил это достаточно хорошо, дайте мне знать, если я смогу что-то прояснить.

Это пример того, как в учебнике, основанном на сюжете, создаются тепловые карты, но они не связаны с моим кодом.Я хочу вместо того, чтобы значения Z были представлены в массивах, чтобы я мог сказать, что конкретное значение x и значение y имеют это значение Z, так как у меня большой набор данных и потому что не все значения x и значения yбудет иметь значение z (это будет 0).Прямо сейчас, как это работает, обратите внимание, что есть 3 массива значений z и значение 3 y, и каждый массив значений z имеет 5 значений по одному для каждого значения.Это не будет работать для меня, потому что у меня есть 500+ значений x и y.

public graph = {
    data: [
    {z: [[1, 20, 30, 50, 1], [20, 1, 60, 80, 30], [30, 60, 1, -10, 20]],
    x: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    y: ['Morning', 'Afternoon', 'Evening'],
    type: 'heatmap'}
    ],
    layout: {
      autosize: true,
      xaxis: {
      side: 'top'
      }
    }     
};

Answer 1

Это не будет работать для меня, потому что у меня есть 500+ значений x и y.

Вместо создания большого массива ваших данных, я предлагаю использовать объект, который отображает вашиданные в массив тепловых карт.

Таким образом, первая часть объекта содержит ось X с осью Y внутри.Ось z для каждой координаты идет последней.Например:

const myValues = {
  100: { // <- x-axis = 100
    100: 20, // <- y-axis = 100 with z-axis = 20 
    101: 40,
    102: 60,
    103: 80,
    104: 100
  }
}

После инициализации нуля массива оси z с помощью функции getBlank, используйте функцию setMyValues, чтобы отобразить объект myValues на полную карту нагрева.

См. Этот фрагмент для примера и увеличьте диапазон 100 X 100, чтобы увидеть значения выборки.

// your specific values
const myValues = {
  100: {
    100: 20,
    101: 40,
    102: 60,
    103: 80,
    104: 100
  },
  101: {
    100: 20,
    101: 40,
    102: 60,
    103: 80,
    104: 100
  },
  102: {
    100: 20,
    101: 40,
    102: 60,
    103: 80,
    104: 100
  },
  103: {
    100: 20,
    101: 40,
    102: 60,
    103: 80,
    104: 100
  },
  104: {
    100: 20,
    101: 40,
    102: 60,
    103: 80,
    104: 100
  },
  105: {
    100: 20,
    101: 40,
    102: 60,
    103: 80,
    104: 100
  },
  106: {
    100: 20,
    101: 40,
    102: 60,
    103: 80,
    104: 100
  },
  107: {
    100: 20,
    101: 40,
    102: 60,
    103: 80,
    104: 100
  },
  108: {
    100: 20,
    101: 40,
    102: 60,
    103: 80,
    104: 100
  },
  109: {
    100: 20,
    101: 40,
    102: 60,
    103: 80,
    104: 100
  },
  110: {
    100: 20,
    101: 40,
    102: 60,
    103: 80,
    104: 100
  }
};
const z = getBlank(501, 501);
setMyValues();
const graph = {
  data: [{
    z: z,
    type: 'heatmap'
  }],
  layout: {
    autosize: true,
    xaxis: {
      side: 'top'
    }
  }
};

function setMyValues() {
  Object.keys(myValues).forEach(row => {
    Object.keys(myValues[row]).forEach(col => {
      z[row][col] = myValues[row][col];
    });
  });
}
// set blank heat map
function getBlank(xs, ys) {
  const z = [];
  const x = range(xs);
  const y = range(ys);
  x.forEach(row => {
    rowArray = [];
    y.forEach(col => {
      rowArray.push(0);
    });
    z.push(rowArray);
  });
  return z;
}

function range(size, startAt = 0) {
  return [...Array(size).keys()].map(i => i + startAt);
}

TESTER = document.getElementById('tester');
Plotly.plot(TESTER, graph);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="tester" style="width:600px;height:250px;"></div>