Plotly.js 테이블 만들어보기

먼저 D3.js 데이터를 불려와 스크립트로 테이블을 생성한다.
데이터는 CIE 으로 구성되어있다.

<!--height:auto OR hegiht:85vh 사용자 화면 비례 사용-->
<div id="linear" style="width:100%; height:auto;"></div>
<script>
d3.tsv("https://raw.githubusercontent.com/kiioio/CieData/refs/heads/main/Media/EPSON_P904/HP_Premeium_Plain_Paper_90gsm/20250930_M2.tsv", function(err, rows) {
   // header values
  var headerNames = d3.keys(rows[0]);

  // cell values
  var cellValues = [];
  for (i = 0; i < headerNames.length; i++) {
    cellValue = rows.map(v => v[headerNames[i]]);
    cellValues[i] = cellValue;
  }

   // create table
  var table = [{
    type: 'table',
    columnwidth: [200, 150, 150, 150, 200, 200, 200, 200, 200, 200], // 너비
    columnorder: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 순서
    header: {
      values: headerNames, // 첫번 째열의 값
      align: "center", // 가운데 정렬
      line: {width: 1, color: 'rgb(50, 50, 50)'}, // 테두리
      fill: {color: ['rgb(235, 100, 230)'] }
    },
    cells: {
      values: cellValues,
      align: ["center", "center"],
      line: {color: "black", width: 1},
      fill: {color: ['rgb(235, 193, 238)', 'rgba(228, 222, 249, 0.65)']}
    }
  }];

  var data = table;

  var layout = {
    title: {text: "hello"},
    showlegend: false
  };

  var config = {responsive: true};
    
  plot = document.getElementById('linear');
  Plotly.newPlot(plot, data, layout, config);
});
  
</script>