Density Map.

<div id="chart-container" style="width: 100%; min-width: 0;"></div>

<script type="module">
  import { defineCustomElement as define0 } from '@syidax/advanced-pro/components/sy-density-map.js';
  define0();

  // Pro: 앱 시작 시 발급받은 인증서로 registerLicense를 완료하세요.
  // 홈페이지 미리보기의 인증서는 고객 앱에서 사용하지 않습니다.
  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-density-map",
      "props": {
        "data": [
          {
            "x": 0,
            "y": 7,
            "weight": 1
          },
          {
            "x": 16,
            "y": 4,
            "weight": 2
          },
          {
            "x": 29,
            "y": -3,
            "weight": 3
          },
          {
            "x": 37,
            "y": -7,
            "weight": 1
          },
          {
            "x": 44,
            "y": -5,
            "weight": 2
          },
          {
            "x": 55,
            "y": 2,
            "weight": 3
          },
          {
            "x": -1,
            "y": 17,
            "weight": 1
          },
          {
            "x": 15,
            "y": 15,
            "weight": 2
          },
          {
            "x": 29,
            "y": 9,
            "weight": 3
          },
          {
            "x": 38,
            "y": 4,
            "weight": 1
          },
          {
            "x": 45,
            "y": 4,
            "weight": 2
          },
          {
            "x": 55,
            "y": 10,
            "weight": 3
          },
          {
            "x": -3,
            "y": 26,
            "weight": 1
          },
          {
            "x": 14,
            "y": 26,
            "weight": 2
          },
          {
            "x": 29,
            "y": 21,
            "weight": 3
          },
          {
            "x": 39,
            "y": 15,
            "weight": 1
          },
          {
            "x": 47,
            "y": 13,
            "weight": 2
          },
          {
            "x": 55,
            "y": 18,
            "weight": 3
          },
          {
            "x": -4,
            "y": 35,
            "weight": 1
          },
          {
            "x": 13,
            "y": 37,
            "weight": 2
          },
          {
            "x": 29,
            "y": 33,
            "weight": 3
          },
          {
            "x": 40,
            "y": 26,
            "weight": 1
          },
          {
            "x": 48,
            "y": 23,
            "weight": 2
          },
          {
            "x": 56,
            "y": 26,
            "weight": 3
          },
          {
            "x": -5,
            "y": 43,
            "weight": 1
          },
          {
            "x": 11,
            "y": 47,
            "weight": 2
          },
          {
            "x": 28,
            "y": 45,
            "weight": 3
          },
          {
            "x": 41,
            "y": 38,
            "weight": 1
          },
          {
            "x": 49,
            "y": 33,
            "weight": 2
          },
          {
            "x": 57,
            "y": 35,
            "weight": 3
          },
          {
            "x": -5,
            "y": 51,
            "weight": 1
          },
          {
            "x": 10,
            "y": 56,
            "weight": 2
          },
          {
            "x": 27,
            "y": 56,
            "weight": 3
          },
          {
            "x": 41,
            "y": 50,
            "weight": 1
          },
          {
            "x": 51,
            "y": 44,
            "weight": 2
          },
          {
            "x": 58,
            "y": 44,
            "weight": 3
          }
        ],
        "kernel": "gaussian",
        "bandwidth": 9,
        "columns": 60,
        "rows": 40,
        "width": 640,
        "height": 360,
        "brandPosition": "bottom-right",
        "brandLogo": ""
      }
    }
  ];
  const container = document.querySelector('#chart-container');
  const elements = specs.map(({ tag, id, props }) => {
    const element = document.createElement(tag);
    element.id = id;
    Object.assign(element, props);
    element.setAttribute('aria-label', 'density-map 예제 차트');
    return element;
  });
  container.replaceChildren(...elements);
  const chart = elements.at(-1);
  const onEvent = event => {
    console.log('pointClick', event.detail);
  };
  chart.addEventListener('pointClick', onEvent);
  const observer = new ResizeObserver(([entry]) => {
    const width = Math.max(160, Math.floor(entry.contentRect.width));
    elements.forEach(element => { element.width = width; });
  });
  observer.observe(container);

  // SPA에서는 화면이 해제될 때 이 함수를 호출하세요.
  function disposeChart() {
    observer.disconnect();
    chart.removeEventListener('pointClick', onEvent);
    container.replaceChildren();
  }
</script>