Heat map chart

[kkalra11]

Feature Description

What would you like to see added to Evidence? The ability to have a heat map chart

Goal of Feature

allows us to visualize higher volumes of data

What would this feature help you accomplish? same as goal

Current Solution / Workarounds

Can't use a heat map, but can find some alternate approaches that are not as clear visually

What do you do today to accomplish the goal you described above?

Alternatives

Describe any alternative solutions or features you've considered

[hughess]

Heatmap Prototype

I've got a prototype spun up for this:

With syntax:

<Heatmap
  data={test_results}
  x=day
  y=name
  value=count  
/>

Where test_results is:

day	name	count
Mon	ABC	14
Tue	ABC	41
Wed	ABC	34
Thu	ABC	22
Fri	ABC	45
Sat	ABC	35
Sun	ABC	16
Mon	DEF	6
...etc..

To add / fix

• Axis lines seem to sit behind the value colors, would need to change the ordering to get those on top
• Number formats
• Tooltip content/format to match other charts
• Title/subtitle control to match other charts
• Error handling

Customization Options

We would need to add some configuration options in addition to the "to add/fix" list above.

@kkalra11 are there other things you would want control over?

Some ideas:

• Color palette
• Manually set min and max for colors (currently takes min and max of dataset)
• "Visual map" (slider under the chart) - include vs. exclude
• Sort order of x and y values (currently takes order from SQL query, which should be enough)
• Customized tooltip content

Other Notes

ECharts has a built in "calendar" type for heatmaps, so that would likely be a different component (to get something like this: https://echarts.apache.org/examples/en/editor.html?c=calendar-heatmap)

[hughess]

Using the prototype

If you want to use the prototype in your project, you can add a file called Heatmap.svelte to the components folder in your project (or create a components folder if you don't have one). Then paste in this code to that file.

You will need to restart the dev server for the change to take effect.

Note: this doesn't include error handling yet, so errors may cause your page to break while developing - once the error is resolved, you might need to refresh your browser or restart the dev server.

<script>
// Heatmap.svelte
    export let data;
    export let x;
    export let y;
    export let value;

    // Data needs to get into format:
    // 1) x-axis: distinct x values in order defined by query
    // 2) y-axis: distinct y values in order defined by query
    // 3) Array of arrays: [x index, y index, value] - nulls or 0 should be "-"?

    function getDistinctValues(data, column) {
        let distinctValues = [];
        const distinctValueSet = new Set();
        data.forEach((d) => {
            distinctValueSet.add(d[column]);
        });
        distinctValues = [...distinctValueSet];
        return distinctValues;
    }

    let xDistinct = getDistinctValues(data, x);
    let yDistinct = getDistinctValues(data, y);

    function mapColumnsToArray(arrayOfObjects, col1, col2, col3) {
        return arrayOfObjects.map((obj) => [obj[col1], obj[col2], obj[col3]]);
    }

    let arrayOfArrays = mapColumnsToArray(data, x, y, value);

    let valueMin = Math.min(...data.map((d) => d[value]));
    let valueMax = Math.max(...data.map((d) => d[value]));
</script>

<ECharts
    config={{
        tooltip: {
            position: "top",
        },
        grid: {
            height: "50%",
            top: "10%",
        },
        xAxis: {
            type: "category",
            data: xDistinct,
            splitArea: {
                show: true,
            },
        },
        yAxis: {
            type: "category",
            data: yDistinct,
            splitArea: {
                show: true,
            },
        },
        visualMap: {
            min: valueMin,
            max: valueMax,
            calculable: true,
            orient: "horizontal",
            left: "center",
            bottom: "15%",
        },
        series: [
            {
                type: "heatmap",
                data: arrayOfArrays,
                label: {
                    show: true,
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                },
            },
        ],
    }}
/>

Using the component on a page

<Heatmap
  data={test_results}
  x=day
  y=name
  value=count  
/>

[mcrascal]

Plan is to add this to legacy first, then onto main w/ the USQL wrapper.

• Error handling,
• Edge cases inputs (e.g. too long text)
• Support the weekly calendar heatmap case (E.g. github commits viz)

[archiewood]

Added in https://github.com/evidence-dev/evidence/pull/1559

Docs:

• https://docs.evidence.dev/components/heatmap/
• https://docs.evidence.dev/components/calendar-heatmap/