Data Binding for a Heat Map

Demonstrate the process of binding geographic data to a heat map using TanStack React Charts, focusing on data formatting and the configuration of chart options to represent data density.

import { useHeatMap } from '@tanstack/react-charts';
import React from 'react';

Import necessary React and TanStack React Charts functions for creating a heat map.

const data = [
  { id: 'New York', value: 67 },
  { id: 'Los Angeles', value: 52 },
  { id: 'Chicago', value: 48 }
];

Define the data structure. This contains geographic IDs and corresponding values indicating the data density or magnitude.

const MyHeatMapChart = () => {
  const series = React.useMemo(() => [
    {
      datums: data.map(d => ({
        x: d.id,
        y: d.value
      }))
    }
  ], [data]);
  
  const options = React.useMemo(() => ({
    data: series
    // Additional configuration for the heat map can be placed here
  }), [series]);
  
  const [chart] = useHeatMap(options);
  
  return <div>{chart}</div>;
};

Create a React component for the heatmap chart. Use useMemo for data and options to optimize performance. Data is passed into options. useHeatMap hook is called with these options.