JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js" defer></script>
<div id="heatmap" style="margin-bottom: 2em;">
</div>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var xValues = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
        var yValues = ['W', 'X', 'Y', 'Z', 'O', 'P', 'Q', 'R'];

        var zValues = [
            [0, 1, 25, 50, 0, 0, 1, 25, 50, 0],
            [0, 0, 75, 75, 0, 0, 0, 75, 75, 0],
            [75, 10, 90, 20, 75, 75, 10, 90, 20, 75],
            [0, 0, 0, 40, 0, 75, 10, 90, 20, 75],
            [0, 0, 75, 75, 0, 0, 0, 75, 75, 0],
            [0, 1, 25, 50, 0, 0, 1, 25, 50, 0],
            [75, 10, 90, 20, 75, 75, 10, 90, 20, 0],
            [0, 0, 75, 75, 0, 0, 0, 75, 75, 0]

        ];

        var colorscaleValue = [
            [0, '#C3E0A6'],
            [1, '#FFC4A7']
        ];

        var data = [{
            x: xValues,
            y: yValues,
            z: zValues,
            type: 'heatmap',
            colorscale: colorscaleValue,
            showscale: true
        }];

        var layout = {
            title: 'Mapa de calor',
            font: {
                family: '"Work Sans",sans-serif',
                size: 11,
                color: '#212529'
            },
            titlefont: {
                size: 16,
                color: '#212529'
            },
            annotations: [],
            xaxis: {
                ticks: '',
                side: 'bottom',
                title: 'Variable A'
            },
            yaxis: {
                ticks: '',
                ticksuffix: ' ',
                title: 'Variable B',
                autosize: false
            },
            margin: {
                r: 10,
                t: 35,
                b: 40,
                l: 40
            },
            paper_bgcolor: '#f6f6f5',
            plot_bgcolor: '#f6f6f5'
        };

        for (var i = 0; i < yValues.length; i++) {
            for (var j = 0;...