Heatmaps with CSS Grid

Heatmap with static scale

The colors are static, and set in the ng-class of the cell, with a simple condition and static thresholds. The code is therefore much simpler than dynamic RGB computation.

But keep in mind that if the order of size of the aggregation changes, you’ll then need to adapt your thresholds, and therefore the page.

Dataset in use: comptage-velo-donnees-compteurs (See it on userclub domain)

Fields in use:

nom_compteur	date (datetime)	sum_counts (numeric)
97 avenue Denfert Rochereau SO-NE	2020-10-01T04:00:00+02:00	70
100 rue La Fayette O-E	2021-01-30T06:00:00+02:00	15
10 avenue de la Grande Armée SE-NO	2020-12-01T13:00:00+02:00	22
87 avenue de Flandre NE-SO	2021-04-22T22:00:00+02:00	3

<div class="container">
    <ods-dataset-context context="datum"
                         datum-dataset="comptage-velo-donnees-compteurs"
                         datum-parameters="{'q':'totem'}">
        <div ng-init="variables = {};
                      xaxis = 'nom_compteur';
                      yaxis = 'year';
                      yLegendWidth = 1">
            <h3>Average number of cyclists by counting totem</h3>

            <div ods-adv-analysis="results"
                 ods-adv-analysis-context="datum"
                 ods-adv-analysis-select="avg(sum_counts) as count"
                 ods-adv-analysis-group-by="year(date) as {{ yaxis }}, {{ xaxis }}">
                {{
                variables.numrow = (results | toObject:yaxis | numKeys) ;
                variables.numcol = (results | toObject:xaxis | numKeys) ;
                variables.listrow = (results | toObject:yaxis | keys | orderBy) ;
                variables.listcol = (results | toObject:xaxis | keys | orderBy) ; ""}}

                <!-- the grid -->
                <div class="heatmap"
                     ng-class="{'display-values': variables.displayvalues}">

                    <!-- X axis : (bottom horizontal) list all values and set the correct position -->
                    <div class="x-axis-centered"
                         ng-repeat="(i,e) in variables.listcol"
                         style="grid-column: {{ i + 1 + yLegendWidth }} ;
                                grid-row: {{variables.numrow + 1}};">
                        <strong>{{e}}</strong>
                    </div>

                    <!-- Y axis : (left vertical) list all values and set the correct position -->
                    <div ng-repeat="(i,e) in variables.listrow"
                         class="y-axis"
                         style="grid-column: 1 / span {{ yLegendWidth }};
                                grid-row: {{ i + 1 }};">
                        <strong>{{e}}</strong>
                    </div>

                    <!-- Grid content -->
                    <div class="cell"
                         ng-repeat="(i,e) in results"
                         ng-class="{'orange': e.count > 150, 'lightgreen': e.count > 100 && e.count <= 150,'darkgreen': e.count < 100}"
                         style="grid-column: {{variables.listcol.indexOf(e[xaxis]) + 1 + yLegendWidth}};
                                grid-row: {{variables.listrow.indexOf(e[yaxis]) + 1}};">
                        {{e.count | number : 0}}
                    </div>
                </div>

                <div class="heatmap-sub row">
                    <div class="col-sm-6">
                        <div class="heatmap-switch">
                            <p>Display values: </p>
                            <label class="switch">
                                <input class="switch-input"
                                       ng-model="variables.displayvalues"
                                       type="checkbox">
                                <div class="switch-button">
                                    <span class="switch-button-left">OFF</span>
                                    <span class="switch-button-right">ON</span>
                                </div>
                            </label>
                        </div>
                    </div>
                    <div class="col-sm-6">
                    </div>
                </div>
            </div>
        </div>
    </ods-dataset-context>
</div>

/* cells colors */
.orange {
    background-color: orange;
}

.darkgreen {
    background-color: #6ca474;
}

.mediumgreen {
    background-color: #9ab932;
}

.lightgreen {
    background-color: #b0c313;
}

:root {
    --values-color: white;
}

.heatmap {
    display: grid;
    gap: 2px;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    grid-auto-rows: auto;
    /* full auto, adapt to the content, ie the font size */
}
.heatmap > * {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-size: 0.8rem;
}
.heatmap.display-values .cell {
    font-size: 0.6rem;
}
.heatmap .cell {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: var(--values-color);
    font-size: 0;
}
.heatmap .cell:hover {
    border: 1px solid var(--values-color);
    transform: scale(1.5);
    font-size: 0.6rem;
    z-index: 1;
}
.heatmap .cell.square:before {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.heatmap .cell .round {
    border-radius: 100%;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.x-axis-centered {
    text-align: center;
}
.x-axis-rotate {
    transform: rotate(-60deg);
    padding: 35% 0;
}

.heatmap-sub {
    margin-top: 13px;
}

.heatmap-legend {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.heatmap-legend .heatmap-legend__gradient {
    display: block;
    height: 25px;
    width: 100%;
    margin: 0 6px;
    border: 1px solid darkgray;
}

.heatmap-switch {
    display: flex;
    align-items: baseline;
}
.heatmap-switch .switch {
    margin-left: 6px;
}

/* Button Group Switch
   ========================================================================== */
.switch {
    display: inline-block;
}

.switch-button {
    /* background and border when in "off" state */
    background: var(--highlight);
    border: 2px solid var(--highlight);
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 6px;
    color: #FFFFFF;
    position: relative;
    cursor: pointer;
    outline: 0;
    user-select: none;
}

.switch-input:not(:checked) + .switch-button .switch-button-left {
    /* text color when in "off" state */
    color: var(--highlight);
}

.switch-input {
    display: none;
}

.switch-button span {
    font-size: 0.8rem;
    padding: 0.2rem 0.7rem;
    text-align: center;
    z-index: 2;
    color: #FFFFFF;
    transition: color 0.2s;
}

.switch-button::before {
    content: "";
    position: absolute;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    z-index: 1;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1), padding 0.2s ease, margin 0.2s ease;
}

.switch-button:hover::before {
    will-change: padding;
}

.switch-button:active::before {
    padding-right: 0.4rem;
}

/* "On" state
   ========================== */
.switch-input:checked + .switch-button {
    /* background and border when in "on" state */
    background-color: var(--links);
    border-color: var(--links);
}

.switch-input:checked + .switch-button .switch-button-right {
    /* text color when in "on" state */
    color: var(--links);
}

.switch-input:checked + .switch-button::before {
    left: 50%;
}

.switch-input:checked + .switch-button:active::before {
    margin-left: -0.4rem;
}

/* Checkbox in disabled state
   ========================== */
.switch-input[type=checkbox]:disabled + .switch-button {
    opacity: 0.6;
    cursor: not-allowed;
}

Bubblemap with static scale

X and Y CSS axis might need to be adapted depending on the value and its length.

Dataset in use: comptage-velo-donnees-compteurs (See it on userclub domain)

Fields in use:

nom_compteur	date (datetime)	sum_counts (numeric)
97 avenue Denfert Rochereau SO-NE	2020-10-01T04:00:00+02:00	70
100 rue La Fayette O-E	2021-01-30T06:00:00+02:00	15
10 avenue de la Grande Armée SE-NO	2020-12-01T13:00:00+02:00	22
87 avenue de Flandre NE-SO	2021-04-22T22:00:00+02:00	3

<div class="container">
    <ods-dataset-context context="datum"
                         datum-dataset="comptage-velo-donnees-compteurs"
                         datum-parameters="{'q':'totem'}">
        <div ng-init="variables = {};
                      xaxis = 'nom_compteur';
                      yaxis = 'year';
                      yLegendWidth = 1">
            <h3>Average number of cyclists by counting totem</h3>

            <div ods-adv-analysis="results"
                 ods-adv-analysis-context="datum"
                 ods-adv-analysis-select="avg(sum_counts) as count"
                 ods-adv-analysis-group-by="year(date) as {{ yaxis }}, {{ xaxis }}">
                {{
                variables.numrow = (results | toObject:yaxis | numKeys) ;
                variables.numcol = (results | toObject:xaxis | numKeys) ;
                variables.listrow = (results | toObject:yaxis | keys | orderBy) ;
                variables.listcol = (results | toObject:xaxis | keys | orderBy) ; ""}}

                <!--
                                    To compute color ranges and bubble size lateron, you need to get the min and max values from the analysis
                                    this block list all values, and store the min and max in variables each time it finds a new one.
                                -->
                <span ng-repeat="res in results">
                    {{ variables.min = (!variables.min || res.count < variables.min ? res.count : variables.min); '' }}
                    {{ variables.max = (!variables.max || res.count > variables.max ? res.count : variables.max); '' }}
                </span>

                <!-- the grid -->
                <div class="bubblemap"
                     ng-class="{'display-values': variables.displayvalues}">

                    <!-- X axis : (bottom horizontal) list all values and set the correct position -->
                    <div class="x-axis-centered x-axis-rotate"
                         ng-repeat="(i,e) in variables.listcol"
                         style="grid-column: {{ i + 1 + yLegendWidth }} ;
                                grid-row: {{variables.numrow + 1}};">
                        <strong>{{e}}</strong>
                    </div>

                    <!-- Y axis : (left vertical) list all values and set the correct position -->
                    <div ng-repeat="(i,e) in variables.listrow"
                         class="y-axis"
                         style="grid-column: 1 / span {{ yLegendWidth }};
                                grid-row: {{ i + 1 }};">
                        <strong>{{e}}</strong>
                    </div>

                    <!-- Grid content -->
                    <div class="cell square"
                         ng-repeat="e in results"
                         style="grid-column: {{variables.listcol.indexOf(e[xaxis]) + 1 + yLegendWidth}};
                                grid-row: {{variables.listrow.indexOf(e[yaxis]) + 1}};">
                        <div class="round"
                             ng-class="{'orange': e.count > 150, 'lightgreen': e.count > 100 && e.count <= 150,'darkgreen': e.count < 100}"
                             style="width : {{ ((e.count | math : 'sqrt')/(variables.max|math:'sqrt'))*100 }}%;
                                    height : {{ ((e.count | math : 'sqrt')/(variables.max|math:'sqrt'))*100 }}%;
                             ods-tooltip=" {{e.count | number}}
                        ">
                        {{e.count | number : 0}}
                    </div>
                </div>
            </div>

        </div>
</div>
</ods-dataset-context>
</div>

/* cells colors */
.orange {
    background-color: orange;
}

.darkgreen {
    background-color: #6ca474;
}

.mediumgreen {
    background-color: #9ab932;
}

.lightgreen {
    background-color: #b0c313;
}

:root {
    --values-color: white;
}

.bubblemap {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    grid-auto-rows: auto;
    /* full auto, adapt to the content, ie the font size */
}
.bubblemap > * {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-size: 0.8rem;
}
.bubblemap.display-values .cell {
    font-size: 0.6rem;
}
.bubblemap .cell {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: var(--values-color);
    font-size: 0;
}
.bubblemap .cell:hover {
    transform: scale(1.2);
    font-size: 0.6rem;
    z-index: 1;
}
.bubblemap .cell.square:before {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.bubblemap .cell .round {
    border-radius: 100%;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.x-axis-centered {
    text-align: center;
}
.x-axis-rotate {
    transform: rotate(-60deg);
    padding: 35% 0;
}

.bubblemap-sub {
    margin-top: 13px;
}

.bubblemap-legend {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.bubblemap-legend .bubblemap-legend__gradient {
    display: block;
    height: 25px;
    width: 100%;
    margin: 0 6px;
    border: 1px solid darkgray;
}

.bubblemap-switch {
    display: flex;
    align-items: baseline;
}
.bubblemap-switch .switch {
    margin-left: 6px;
}

/* Button Group Switch
   ========================================================================== */
.switch {
    display: inline-block;
}

.switch-button {
    /* background and border when in "off" state */
    background: var(--highlight);
    border: 2px solid var(--highlight);
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 6px;
    color: #FFFFFF;
    position: relative;
    cursor: pointer;
    outline: 0;
    user-select: none;
}

.switch-input:not(:checked) + .switch-button .switch-button-left {
    /* text color when in "off" state */
    color: var(--highlight);
}

.switch-input {
    display: none;
}

.switch-button span {
    font-size: 0.8rem;
    padding: 0.2rem 0.7rem;
    text-align: center;
    z-index: 2;
    color: #FFFFFF;
    transition: color 0.2s;
}

.switch-button::before {
    content: "";
    position: absolute;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    z-index: 1;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1), padding 0.2s ease, margin 0.2s ease;
}

.switch-button:hover::before {
    will-change: padding;
}

.switch-button:active::before {
    padding-right: 0.4rem;
}

/* "On" state
   ========================== */
.switch-input:checked + .switch-button {
    /* background and border when in "on" state */
    background-color: var(--links);
    border-color: var(--links);
}

.switch-input:checked + .switch-button .switch-button-right {
    /* text color when in "on" state */
    color: var(--links);
}

.switch-input:checked + .switch-button::before {
    left: 50%;
}

.switch-input:checked + .switch-button:active::before {
    margin-left: -0.4rem;
}

/* Checkbox in disabled state
   ========================== */
.switch-input[type=checkbox]:disabled + .switch-button {
    opacity: 0.6;
    cursor: not-allowed;
}

Heatmap with dynamic color scale

Custom heatmaps or bubblemaps are made of a CSS grid, an ods-adv-analysis and several computations to get the colors and the axis.

ods-adv-analysis returns the list of values for each axis. You need to adapt the axis id in toObject filter.
The min and max of all aggregation are computed to get the boundaries and will be useful for colors computations.
To display the grid, three computations are needed: the x-axis value positions, the y-axis value positions and the color values.

Colors are RGB codes, computed of the aggregation value within the range of all values. Low and high colors values are set into variables object at the beginning of the code.

The toggle button, and the legend are independent of the grid and can be removed.

Dataset in use: comptage-velo-donnees-compteurs (See it on userclub domain)

Fields in use:

date (datetime)	sum_counts (numeric)
2020-10-01T04:00:00+02:00	70
2021-01-30T06:00:00+02:00	15
2020-12-01T13:00:00+02:00	22
2021-04-22T22:00:00+02:00	3

<div class="container">
    <ods-dataset-context context="datum"
                         datum-dataset="comptage-velo-donnees-compteurs">

        <div ng-init="variables = {'min':undefined, 'max':undefined};
                                  rgbstart = [0,55,237];
                                  rgbend = [180,197,241];
                                  xaxis = 'day';
                                  yaxis = 'month';
                                  yLegendWidth = 1">

            <h3># of cyclists, by month and day</h3>
            <!--
                group-by month and day, then for each group by dimension, with toObject and keys filter we get the list of all values.
                it constructs the x and y axis by listing all different values for each axis.

                xaxis and yaxis variables are here to avoid using specific id at several places in the code.
                therefore, be sure to name your adv-analysis group-by accordingly.
            -->
            <div ods-adv-analysis="results"
                 ods-adv-analysis-context="datum"
                 ods-adv-analysis-select="sum(sum_counts) as count"
                 ods-adv-analysis-group-by="month(date) as {{ yaxis }}, day(date) as {{ xaxis }}"
                 ods-adv-analysis-order-by="month asc, day asc">
                {{
                variables.numrow = (results | toObject:yaxis | numKeys) ;
                variables.numcol = (results | toObject:xaxis | numKeys) ;
                variables.listrow = (results | toObject:yaxis | keys | orderBy) ;
                variables.listcol = (results | toObject:xaxis | keys | orderBy) ;
                ""
                }}

                <!--
                    To compute color ranges lateron, you need to get the min and max values from the analysis
                    this block list all values, and store the min and max in variables each time it finds a new one.
                -->
                <span ng-repeat="res in results">
                    {{ variables.min = (!variables.min || res.count < variables.min ? res.count : variables.min); '' }}
                    {{ variables.max = (!variables.max || res.count > variables.max ? res.count : variables.max); '' }}
                </span>

                <!-- The grid -->
                <div class="heatmap"
                     ng-class="{'display-values': variables.displayvalues}"
                     ng-if="variables.min && variables.max">

                    <!-- X axis : (bottom horizontal) list all values and set the correct position -->
                    <div ng-repeat="(i,e) in variables.listcol"
                         style="grid-column: {{ i + 1 + yLegendWidth }} ;
                                grid-row: {{variables.numrow + 1}};">
                        <strong>{{e}}</strong>
                    </div>

                    <!-- Y axis : (left vertical) list all values and set the correct position -->
                    <div ng-repeat="(i,e) in variables.listrow"
                         class="y-axis"
                         style="grid-column: 1 / span {{ yLegendWidth }};
                                grid-row: {{ i + 1 }};">
                        <strong>{{e}}</strong>
                    </div>

                    <!-- Grid content -->
                    <div class="cell square"
                         ng-repeat="e in results"
                         ng-init="val = ((e.count - variables.min) / (variables.max - variables.min))"
                         style="background-color: {{ 'rgb(' +
                                                                    ((val * rgbstart[0] + (1 - val) * rgbend[0]) | math : 'floor') +
                                                                    ',' +
                                                                    ((val * rgbstart[1] + (1 - val) * rgbend[1]) | math : 'floor') +
                                                                    ',' +
                                                                    ((val * rgbstart[2] + (1 - val) * rgbend[2]) | math : 'floor') +
                                                                    ')' }};
                                               grid-column: {{variables.listcol.indexOf(e[xaxis]) + 1 + yLegendWidth}};
                                               grid-row: {{variables.listrow.indexOf(e[yaxis]) + 1}};">
                        {{e.count | number}}
                    </div>
                </div>

                <div class="heatmap-sub row">
                    <div class="col-xs-6">
                        <div class="heatmap-switch">
                            <p>Display values: </p>
                            <label class="switch">
                                <input class="switch-input"
                                       ng-model="variables.displayvalues"
                                       type="checkbox">
                                <div class="switch-button">
                                    <span class="switch-button-left">OFF</span>
                                    <span class="switch-button-right">ON</span>
                                </div>
                            </label>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="heatmap-legend">
                            <div class="heatmap-legend__min-value">{{ variables.min | number }}</div>
                            <div class="heatmap-legend__gradient"
                                 style="background: linear-gradient(270deg,
                                                                        {{ 'rgb('+rgbstart[0]+','+rgbstart[1]+','+rgbstart[2]+')' }},
                                                                        {{ 'rgb('+rgbend[0]+','+rgbend[1]+','+rgbend[2]+')' }}
                                     )"></div>
                            <div class="heatmap-legend__max-value">{{ variables.max | number }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ods-dataset-context>
</div>

:root {
    --values-color: white;
}

.heatmap {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    grid-auto-rows: auto;
    /* full auto, adapt to the content, ie the font size */
}
.heatmap > * {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-size: 0.7rem;
}
.heatmap.display-values .cell {
    font-size: 0.5rem;
}
.heatmap .cell {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: var(--values-color);
    font-size: 0;
}
.heatmap .cell:hover {
    border: 1px solid var(--values-color);
    transform: scale(2);
    font-size: 0.4rem;
    z-index: 1;
}
.heatmap .cell.square:before {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.heatmap .cell .round {
    border-radius: 100%;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.x-axis-centered {
    text-align: center;
}
.x-axis-rotate {
    transform: rotate(-60deg);
    padding: 35% 0;
}

.heatmap-sub {
    margin-top: 13px;
}

.heatmap-legend {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.heatmap-legend .heatmap-legend__gradient {
    display: block;
    height: 25px;
    width: 100%;
    margin: 0 6px;
    border: 1px solid darkgray;
}

.heatmap-switch {
    display: flex;
    align-items: baseline;
}
.heatmap-switch .switch {
    margin-left: 6px;
}

/* Button Group Switch
   ========================================================================== */
.switch {
    display: inline-block;
}

.switch-button {
    /* background and border when in "off" state */
    background: var(--highlight);
    border: 2px solid var(--highlight);
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 6px;
    color: #FFFFFF;
    position: relative;
    cursor: pointer;
    outline: 0;
    user-select: none;
}

.switch-input:not(:checked) + .switch-button .switch-button-left {
    /* text color when in "off" state */
    color: var(--highlight);
}

.switch-input {
    display: none;
}

.switch-button span {
    font-size: 0.8rem;
    padding: 0.2rem 0.7rem;
    text-align: center;
    z-index: 2;
    color: #FFFFFF;
    transition: color 0.2s;
}

.switch-button::before {
    content: "";
    position: absolute;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    z-index: 1;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1), padding 0.2s ease, margin 0.2s ease;
}

.switch-button:hover::before {
    will-change: padding;
}

.switch-button:active::before {
    padding-right: 0.4rem;
}

/* "On" state
   ========================== */
.switch-input:checked + .switch-button {
    /* background and border when in "on" state */
    background-color: var(--links);
    border-color: var(--links);
}

.switch-input:checked + .switch-button .switch-button-right {
    /* text color when in "on" state */
    color: var(--links);
}

.switch-input:checked + .switch-button::before {
    left: 50%;
}

.switch-input:checked + .switch-button:active::before {
    margin-left: -0.4rem;
}

/* Checkbox in disabled state
   ========================== */
.switch-input[type=checkbox]:disabled + .switch-button {
    opacity: 0.6;
    cursor: not-allowed;
}

Bubblemap with dynamic color scale

Same analysis and display as before. Only cells get an extra style with expression to compute the size of the cells based on the aggregation value within the range of all values.

Dataset in use: comptage-velo-donnees-compteurs (See it on userclub domain)

Fields in use:

date (datetime)	sum_counts (numeric)
2020-10-01T04:00:00+02:00	70
2021-01-30T06:00:00+02:00	15
2020-12-01T13:00:00+02:00	22
2021-04-22T22:00:00+02:00	3

<div class="container">
    <ods-dataset-context context="datum"
                         datum-dataset="comptage-velo-donnees-compteurs">
        <div ng-init="variables = {'min':undefined, 'max':undefined};
                                  rgbstart = [0,55,237];
                                  rgbend = [180,197,241];
                                  xaxis = 'day';
                                  yaxis = 'month';
                                  yLegendWidth = 1">

            <h3># of cyclists, by month and day, with bubbles</h3>

            <div ods-adv-analysis="results"
                 ods-adv-analysis-context="datum"
                 ods-adv-analysis-select="sum(sum_counts) as count"
                 ods-adv-analysis-group-by="month(date) as {{ yaxis }}, day(date) as {{ xaxis }}"
                 ods-adv-analysis-limit="-1"
                 ods-adv-analysis-order-by="month asc, day asc">
                {{
                variables.numrow = (results | toObject:yaxis | numKeys) ;
                variables.numcol = (results | toObject:xaxis | numKeys) ;
                variables.listrow = (results | toObject:yaxis | keys | orderBy) ;
                variables.listcol = (results | toObject:xaxis | keys | orderBy) ; ""}}

                <!--
                    To compute color ranges and bubble size lateron, you need to get the min and max values from the analysis
                    this block list all values, and store the min and max in variables each time it finds a new one.
                -->
                <span ng-repeat="res in results">
                    {{ variables.min = (!variables.min || res.count < variables.min ? res.count : variables.min); '' }}
                    {{ variables.max = (!variables.max || res.count > variables.max ? res.count : variables.max); '' }}
                </span>

                <!-- the grid -->
                <div class="bubblemap"
                     ng-class="{'display-values': variables.displayvalues}"
                     ng-if="variables.min && variables.max">

                    <!-- X axis : (bottom horizontal) list all values and set the correct position -->
                    <div ng-repeat="(i,e) in variables.listcol"
                         style="grid-column: {{ i + 1 + yLegendWidth }} ;
                                grid-row: {{variables.numrow + 1}};">
                        <strong>{{e}}</strong>
                    </div>

                    <!-- Y axis : (left vertical) list all values and set the correct position -->
                    <div ng-repeat="(i,e) in variables.listrow"
                         class="y-axis"
                         style="grid-column: 1 / span {{ yLegendWidth }};
                                grid-row: {{ i + 1 }};">
                        <strong>{{e}}</strong>
                    </div>

                    <!-- Grid content -->
                    <div class="cell square"
                         ng-repeat="e in results"
                         ng-init="val = ((e.count - variables.min) / (variables.max - variables.min))"
                         style="grid-column: {{variables.listcol.indexOf(e[xaxis]) + 1 + yLegendWidth}};
                                grid-row: {{variables.listrow.indexOf(e[yaxis]) + 1}};">
                        <div class="round"
                             style="width : {{ ((e.count | math : 'sqrt')/(variables.max|math:'sqrt'))*100 }}%;
                                    height : {{ ((e.count | math : 'sqrt')/(variables.max|math:'sqrt'))*100 }}%;
                                    background-color: {{ 'rgb(' +
                                                        ((val * rgbstart[0] + (1 - val) * rgbend[0]) | math : 'floor') +
                                                        ',' +
                                                        ((val * rgbstart[1] + (1 - val) * rgbend[1]) | math : 'floor') +
                                                        ',' +
                                                        ((val * rgbstart[2] + (1 - val) * rgbend[2]) | math : 'floor') +
                                                        ')' }};"
                             ods-tooltip="{{e.count | number}}">
                        </div>
                    </div>
                </div>

                <div class="bubblemap-sub row">
                    <div class="col-sm-6">

                    </div>
                    <div class="col-sm-6">
                        <div class="bubblemap-legend">
                            <div class="bubblemap-legend__min-value">{{ variables.min | number }}</div>
                            <div class="bubblemap-legend__gradient"
                                 style="background: linear-gradient(270deg,
                                                                {{ 'rgb('+rgbstart[0]+','+rgbstart[1]+','+rgbstart[2]+')' }},
                                                                {{ 'rgb('+rgbend[0]+','+rgbend[1]+','+rgbend[2]+')' }}
                                     )"></div>
                            <div class="bubblemap-legend__max-value">{{ variables.max | number }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ods-dataset-context>
</div>

:root {
    --values-color: white;
}

.bubblemap {
    display: grid;
    gap: 2px;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    grid-auto-rows: auto;
    /* full auto, adapt to the content, ie the font size */
}
.bubblemap > * {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-size: 0.8rem;
}
.bubblemap.display-values .cell {
    font-size: 0.6rem;
}
.bubblemap .cell {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: var(--values-color);
    font-size: 0;
}
.bubblemap .cell:hover {
    transform: scale(1.5);
    font-size: 0.6rem;
    z-index: 1;
}
.bubblemap .cell.square:before {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.bubblemap .cell .round {
    border-radius: 100%;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.x-axis-centered {
    text-align: center;
}
.x-axis-rotate {
    transform: rotate(-60deg);
    padding: 35% 0;
}

.bubblemap-sub {
    margin-top: 13px;
}

.bubblemap-legend {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.bubblemap-legend .bubblemap-legend__gradient {
    display: block;
    height: 25px;
    width: 100%;
    margin: 0 6px;
    border: 1px solid darkgray;
}

.bubblemap-switch {
    display: flex;
    align-items: baseline;
}
.bubblemap-switch .switch {
    margin-left: 6px;
}

/* Button Group Switch
   ========================================================================== */
.switch {
    display: inline-block;
}

.switch-button {
    /* background and border when in "off" state */
    background: var(--highlight);
    border: 2px solid var(--highlight);
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 6px;
    color: #FFFFFF;
    position: relative;
    cursor: pointer;
    outline: 0;
    user-select: none;
}

.switch-input:not(:checked) + .switch-button .switch-button-left {
    /* text color when in "off" state */
    color: var(--highlight);
}

.switch-input {
    display: none;
}

.switch-button span {
    font-size: 0.8rem;
    padding: 0.2rem 0.7rem;
    text-align: center;
    z-index: 2;
    color: #FFFFFF;
    transition: color 0.2s;
}

.switch-button::before {
    content: "";
    position: absolute;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    z-index: 1;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1), padding 0.2s ease, margin 0.2s ease;
}

.switch-button:hover::before {
    will-change: padding;
}

.switch-button:active::before {
    padding-right: 0.4rem;
}

/* "On" state
   ========================== */
.switch-input:checked + .switch-button {
    /* background and border when in "on" state */
    background-color: var(--links);
    border-color: var(--links);
}

.switch-input:checked + .switch-button .switch-button-right {
    /* text color when in "on" state */
    color: var(--links);
}

.switch-input:checked + .switch-button::before {
    left: 50%;
}

.switch-input:checked + .switch-button:active::before {
    margin-left: -0.4rem;
}

/* Checkbox in disabled state
   ========================== */
.switch-input[type=checkbox]:disabled + .switch-button {
    opacity: 0.6;
    cursor: not-allowed;
}

Heatmap with larger text in legends

Sometimes, the Y legend will need more than 1 column in the grid to display correctly. The yLegendWidth = 2 option in this example set 2 column width for Y legend values.

The X legend can be centered, and a slight rotation can give some space and visibility. Two CSS classes are proposed to achieve this : x-axis-centered and x-axis-rotate to set on the X axis loop (HTML side).

Dataset in use: base-nationale-des-lieux-de-covoiturage-en-france (See it on userclub domain)

Fields in use:

reg_name	spot_size (numeric)	spot_type
Centre-Val de Loire	100	Aire de covoiturage
Occitanie	5	Parking
Nouvelle-Aquitaine	24	Parking relais
Île-de-France	6	Auto-stop

<div class="container">
    <ods-dataset-context context="datum"
                         datum-dataset="base-nationale-des-lieux-de-covoiturage-en-france">

        <div ng-init="variables = {'min':undefined, 'max':undefined};
                                  rgbstart = [0,55,237];
                                  rgbend = [180,197,241];
                                  xaxis = 'type';
                                  yaxis = 'region';
                                  yLegendWidth = 2">

            <h3># of car parks by region and by type</h3>
            <!--
                group-by month and day, then for each group by dimension, with toObject and keys filter we get the list of all values.
                it constructs the x and y axis by listing all different values for each axis.

                xaxis and yaxis variables are here to avoid using specific id at several places in the code.
                therefore, be sure to name your adv-analysis group-by accordingly.
            -->
            <div ods-adv-analysis="results"
                 ods-adv-analysis-context="datum"
                 ods-adv-analysis-select="sum(spot_size) as count"
                 ods-adv-analysis-group-by="reg_name as {{ yaxis }}, spot_type as {{ xaxis }}">
                {{
                variables.numrow = (results | toObject:yaxis | numKeys) ;
                variables.numcol = (results | toObject:xaxis | numKeys) ;
                variables.listrow = (results | toObject:yaxis | keys | orderBy) ;
                variables.listcol = (results | toObject:xaxis | keys | orderBy) ;
                ""
                }}

                <!--
                    To compute color ranges lateron, you need to get the min and max values from the analysis
                    this block list all values, and store the min and max in variables each time it finds a new one.
                -->
                <span ng-repeat="res in results">
                    {{ variables.min = (!variables.min || res.count < variables.min ? res.count : variables.min); '' }}
                    {{ variables.max = (!variables.max || res.count > variables.max ? res.count : variables.max); '' }}
                </span>

                <!-- The grid -->
                <div class="heatmap"
                     ng-class="{'display-values': variables.displayvalues}"
                     ng-if="variables.min && variables.max">

                    <!-- X axis : (bottom horizontal) list all values and set the correct position -->
                    <div ng-repeat="(i,e) in variables.listcol"
                         class="x-axis-centered x-axis-rotate"
                         style="grid-column: {{ i + 1 + yLegendWidth }} ;
                                grid-row: {{variables.numrow + 1}};">
                        <strong>{{e}}</strong>
                    </div>

                    <!-- Y axis : (left vertical) list all values and set the correct position -->
                    <div ng-repeat="(i,e) in variables.listrow"
                         class="y-axis"
                         style="grid-column: 1 / span {{ yLegendWidth }};
                                grid-row: {{ i + 1 }};">
                        <strong>{{e}}</strong>
                    </div>

                    <!-- Grid content -->
                    <div class="cell"
                         ng-repeat="e in results"
                         ng-init="val = ((e.count - variables.min) / (variables.max - variables.min))"
                         style="background-color: {{ 'rgb(' +
                                                    ((val * rgbstart[0] + (1 - val) * rgbend[0]) | math : 'floor') +
                                                    ',' +
                                                    ((val * rgbstart[1] + (1 - val) * rgbend[1]) | math : 'floor') +
                                                    ',' +
                                                    ((val * rgbstart[2] + (1 - val) * rgbend[2]) | math : 'floor') +
                                                    ')' }};
                                               grid-column: {{variables.listcol.indexOf(e[xaxis]) + 1 + yLegendWidth}};
                                               grid-row: {{variables.listrow.indexOf(e[yaxis]) + 1}};">
                        {{e.count | number}}
                    </div>
                </div>

                <div class="heatmap-sub row">
                    <div class="col-xs-6">
                        <div class="heatmap-switch">
                            <p>Display values: </p>
                            <label class="switch">
                                <input class="switch-input"
                                       ng-model="variables.displayvalues"
                                       type="checkbox">
                                <div class="switch-button">
                                    <span class="switch-button-left">OFF</span>
                                    <span class="switch-button-right">ON</span>
                                </div>
                            </label>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="heatmap-legend">
                            <div class="heatmap-legend__min-value">{{ variables.min | number }}</div>
                            <div class="heatmap-legend__gradient"
                                 style="background: linear-gradient(270deg,
                                                                        {{ 'rgb('+rgbstart[0]+','+rgbstart[1]+','+rgbstart[2]+')' }},
                                                                        {{ 'rgb('+rgbend[0]+','+rgbend[1]+','+rgbend[2]+')' }}
                                     )"></div>
                            <div class="heatmap-legend__max-value">{{ variables.max | number }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ods-dataset-context>
</div>

:root {
    --values-color: white;
}

.heatmap {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    grid-auto-rows: auto;
    /* full auto, adapt to the content, ie the font size */
}
.heatmap > * {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-size: 0.7rem;
}
.heatmap.display-values .cell {
    font-size: 0.5rem;
}
.heatmap .cell {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: var(--values-color);
    font-size: 0;
}
.heatmap .cell:hover {
    border: 1px solid var(--values-color);
    transform: scale(1.5);
    font-size: 0.6rem;
    z-index: 1;
}
.heatmap .cell.square:before {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.heatmap .cell .round {
    border-radius: 100%;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.x-axis-centered {
    text-align: center;
}
.x-axis-rotate {
    transform: rotate(-60deg);
    padding: 35% 0;
}

.heatmap-sub {
    margin-top: 13px;
}

.heatmap-legend {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.heatmap-legend .heatmap-legend__gradient {
    display: block;
    height: 25px;
    width: 100%;
    margin: 0 6px;
    border: 1px solid darkgray;
}

.heatmap-switch {
    display: flex;
    align-items: baseline;
}
.heatmap-switch .switch {
    margin-left: 6px;
}

/* Button Group Switch
   ========================================================================== */
.switch {
    display: inline-block;
}

.switch-button {
    /* background and border when in "off" state */
    background: var(--highlight);
    border: 2px solid var(--highlight);
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 6px;
    color: #FFFFFF;
    position: relative;
    cursor: pointer;
    outline: 0;
    user-select: none;
}

.switch-input:not(:checked) + .switch-button .switch-button-left {
    /* text color when in "off" state */
    color: var(--highlight);
}

.switch-input {
    display: none;
}

.switch-button span {
    font-size: 0.8rem;
    padding: 0.2rem 0.7rem;
    text-align: center;
    z-index: 2;
    color: #FFFFFF;
    transition: color 0.2s;
}

.switch-button::before {
    content: "";
    position: absolute;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    z-index: 1;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1), padding 0.2s ease, margin 0.2s ease;
}

.switch-button:hover::before {
    will-change: padding;
}

.switch-button:active::before {
    padding-right: 0.4rem;
}

/* "On" state
   ========================== */
.switch-input:checked + .switch-button {
    /* background and border when in "on" state */
    background-color: var(--links);
    border-color: var(--links);
}

.switch-input:checked + .switch-button .switch-button-right {
    /* text color when in "on" state */
    color: var(--links);
}

.switch-input:checked + .switch-button::before {
    left: 50%;
}

.switch-input:checked + .switch-button:active::before {
    margin-left: -0.4rem;
}

/* Checkbox in disabled state
   ========================== */
.switch-input[type=checkbox]:disabled + .switch-button {
    opacity: 0.6;
    cursor: not-allowed;
}

Widget Tricks - Heatmaps with CSS Grid

Heatmap with static scale

Bubblemap with static scale

Heatmap with dynamic color scale

Bubblemap with dynamic color scale

Heatmap with larger text in legends