Section 1.1: Installing Necessary Packages

To begin, we need to install several packages. Run the following command in your terminal:

npm install @visx/group @visx/heatmap @visx/mock-data @visx/responsive @visx/scale

Section 1.2: Creating Heat Maps

To implement heat maps, we can start with the following code:

import React from "react";

import { Group } from "@visx/group";

import genBins from "@visx/mock-data/lib/generators/genBins";

import { scaleLinear } from "@visx/scale";

import { HeatmapCircle, HeatmapRect } from "@visx/heatmap";

// Define color codes

const hot1 = "#77312f";

const hot2 = "#f33d15";

const cool1 = "#122549";

const cool2 = "#b4fbde";

const background = "#28272c";

// Generate mock data for heatmap

const binData = genBins(16, 16);

// Utility functions for finding max and min values

function max(data, value) {

return Math.max(...data.map(value));

}

function min(data, value) {

return Math.min(...data.map(value));

}

// Prepare data accessors

const bins = (d) => d.bins;

const count = (d) => d.count;

// Define scales for color and size

const colorMax = max(binData, (d) => max(bins(d), count));

const bucketSizeMax = max(binData, (d) => bins(d).length);

const xScale = scaleLinear({ domain: [0, binData.length] });

const yScale = scaleLinear({ domain: [0, bucketSizeMax] });

const circleColorScale = scaleLinear({ range: [hot1, hot2], domain: [0, colorMax] });

const rectColorScale = scaleLinear({ range: [cool1, cool2], domain: [0, colorMax] });

const opacityScale = scaleLinear({ range: [0.1, 1], domain: [0, colorMax] });

const defaultMargin = { top: 10, left: 20, right: 20, bottom: 110 };

const Example = ({ width, height, events = false, margin = defaultMargin, separation = 20 }) => {

const size = width > margin.left + margin.right ? width - margin.left - margin.right - separation : width;

const xMax = size / 2;

const yMax = height - margin.bottom - margin.top;

const binWidth = xMax / binData.length;

const binHeight = yMax / bucketSizeMax;

const radius = min([binWidth, binHeight], (d) => d) / 2;

xScale.range([0, xMax]);

yScale.range([yMax, 0]);

if (width < 10) return null;

return (

<Group>

<HeatmapCircle

data={binData}

xScale={xScale}

yScale={yScale}

colorScale={circleColorScale}

opacityScale={opacityScale}

radius={radius}

gap={2}

>

{(heatmap) =>

heatmap.map((heatmapBins) =>

heatmapBins.map((bin) => {

if (!events) return null;

const { row, column } = bin;

alert(JSON.stringify({ row, column, bin: bin.bin }));

})

)

}

</HeatmapCircle>

<HeatmapRect

data={binData}

xScale={xScale}

yScale={yScale}

colorScale={rectColorScale}

opacityScale={opacityScale}

binWidth={binWidth}

binHeight={binWidth}

gap={2}

>

{(heatmap) =>

heatmap.map((heatmapBins) =>

heatmapBins.map((bin) => {

if (!events) return null;

const { row, column } = bin;

alert(JSON.stringify({ row, column, bin: bin.bin }));

})

)

}

</HeatmapRect>

</Group>

);

};

export default function App() {

return <Example width={800} height={400} />;

}

In this code snippet, we specify the color codes for the heatmap and generate mock data. The max and min functions help retrieve the maximum and minimum values from the dataset. The bins and count functions are used to access the respective data values.

Next, we calculate the maximum values for color and bucket sizes using colorMax and bucketSizeMax. The scales for the x and y axes, as well as the color and opacity, are then defined.

In the Example component, we determine the dimensions of the heatmap, including the sizes of the bins and their radius. We pass all relevant variables to the HeatmapCircle and HeatmapRect components to create heatmaps with circles and rectangles, respectively.