JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Heatmap Visualization</title>
    <style>
        body { font-family: Arial, sans-serif; }
        #heatmap { margin: 20px auto; }
        .cell { stroke: #ccc; }
        .axis-label { font-size: 12px; text-anchor: middle; }
    </style>
</head>
<body>
    <div>
        <label for="configSelect">Select Configuration:</label>
        <select id="configSelect">
            <option value="k=ma">Moz1</option>
            <option value="pMku">Moz2</option>
            <option value="P259">Moz3</option>
            <option value="lAhn1">Moz4</option>
        </select>

        <label for="viewSelect">View:</label>
        <select id="viewSelect">
            <option value="musician">Musician (Scene)</option>
            <option value="attendee">Attendee (Hall)</option>
        </select>
    </div>

    <svg id="heatmap" width="660" height="660"></svg>

    <script type="module">
        import * as d3 from 'https://cdn.jsdelivr.net/npm/d3@7/+esm';

        // Simple Perlin Noise generator in vanilla JavaScript
        class PerlinNoise {
            constructor() {
                this.permutation = [];
                for (let i = 0; i < 256; i++) {
                    this.permutation[i] = Math.floor(Math.random() * 256);
                }
                this.permutation = this.permutation.concat(this.permutation);
            }

            fade(t) {
                return t * t * t * (t * (t * 6 - 15) + 10);
            }

            lerp(t, a, b) {
                return a + t * (b - a);
            }

            grad(hash, x, y) {
                const h = hash & 15;
                const u = h < 8 ? x : y;
                const v = h < 4 ? y : h === 12 || h === 14 ? x : 0;
                return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v);
            }

            noise(x, y) {
                const...