Unleashing the Power of Heatmaps in React JS: A Step-by-Step Guide

Choosing the Right Library

There are several libraries available for creating heatmaps in React JS. For this article, we’ll use the popular d3.js library, which provides a wide range of features and customization options. However, you can also explore other libraries like react-heatmap-grid, heatmap.js, and echarts.

Setting Up the Project

Before we start creating our heatmap, let’s set up a new React JS project. Create a new React app using create-react-app and install the required dependencies:

npx create-react-app react-heatmap
cd react-heatmap
npm install d3

Creating the Heatmap Component

Now, let’s create a new React component for our heatmap. Create a new file called Heatmap.js and add the following code:

import React, { useState, useEffect } from 'react';
import * as d3 from 'd3-array';
import * as d3Scale from 'd3-scale';
import * as d3Shape from 'd3-shape';

const Heatmap = () => {
  const [data, setData] = useState([
    [10, 20, 30, 40, 50],
    [60, 70, 80, 90, 100],
    [110, 120, 130, 140, 150],
    [160, 170, 180, 190, 200],
  ]);

  const margin = { top: 20, right: 20, bottom: 30, left: 40 };
  const width = 500 - margin.left - margin.right;
  const height = 300 - margin.top - margin.bottom;

  useEffect(() => {
    const xScale = d3Scale.scaleBand()
      .domain(data[0].map((d, i) => i))
      .range([0, width])
      .padding(0.2);

    const yScale = d3Scale.scaleBand()
      .domain(data.map((d, i) => i))
      .range([0, height])
      .padding(0.2);

    const colorScale = d3Scale.scaleSequential()
      .domain([0, 200])
      .range(['#ff69b4', '#33b5e5']);

    const svg = d3.select('#heatmap')
      .append('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
      .append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`);

    svg.selectAll('rect')
      .data(data.flat())
      .enter()
      .append('rect')
      .attr('x', (d, i) => xScale(i % data[0].length))
      .attr('y', (d, i) => yScale(Math.floor(i / data[0].length)))
      .attr('width', xScale.bandwidth())
      .attr('height', yScale.bandwidth())
      .attr('fill', (d) => colorScale(d));
  }, [data]);

  return (
    

  );
};

export default Heatmap;

Understanding the Code

Let’s break down the code and understand what’s happening:

• Data**: We define a 2D array of data, which will be used to generate the heatmap.
• Scales**: We define three scales: xScale, yScale, and colorScale. These scales will be used to map the data to the SVG coordinates and colors.
• SVG**: We create an SVG element and append it to the #heatmap div. We then append a g element to the SVG and set its transform attribute to define the origin and scale of the heatmap.
• Rects**: We create rectangles for each data point using the svg.selectAll method. We set the x, y, width, and height attributes of each rectangle using the scales we defined earlier.
• Color**: We set the fill color of each rectangle using the colorScale function, which maps the data value to a color.

import React from 'react';
import Heatmap from './Heatmap';

function App() {
  return (
    

      
    
  );
}

export default App;

const colorScale = d3Scale.scaleSequential()
  .domain([-100, 0, 100])
  .range(['#ff69b4', '#fffff', '#33b5e5']);

svg.selectAll('rect')
  .on('mouseover', function(d) {
    // Display tooltip with data value
  })
  .on('mouseout', function() {
    // Hide tooltip
  });

const legend = svg.append('g')
  .attr('transform', `translate(${width + 20}, 20)`);

legend.append('text')
  .text('Legend')
  .attr('x', 0)
  .attr('y', 10);

legend.selectAll('rect')
  .data(colorScale.domain())
  .enter()
  .append('rect')
  .attr('x', 0)
  .attr('y', (d, i) => i * 20)
  .attr('width', 20)
  .attr('height', 20)
  .attr('fill', (d) => colorScale(d));

legend.selectAll('text')
  .data(colorScale.domain())
  .enter()
  .append('text')
  .attr('x', 30)
  .attr('y', (d, i) => i * 20 + 15)
  .text((d) => d);