Widget Tricks - ods-color-gradient + ods-map : a choropleth alternative

This map rendering technique allows to display on a map colored shaped based on the aggregation of a different dataset.

One dataset contains the data to make some statistical computation (Avg, sum, counting of numerical fields) and one dataset contains geographical information (geo shapes).

The technique is very similar to a join at processing time, to enrich statistical data with geographical data. The only prerequisit is, like for a regular join, having a shared key between datasets to make the numerical aggregation match its geo shape.

Big advantages are mainly to not overweight the statistical dataset by a processing join and storing multiple times the same geo shape in the data. and secondly to choose the geographical granularity or administrative level only when you render the map. A same statistical dataset can now be rendered with several geographical referentials as long as it contains all the needed keys, codes or names to match the geographical shapes.

For example: inhabitant dataset of a country can be rendered by region, departement, cities and so on as long as you have the geographical dataset of each administrative layers.

How it works: the technique is to aggregate the data with the ods-color-gradient to obtain the color gradient as a color object. Then feed an ods-map with this color object.

Color departments by number of carpool location

<ods-dataset-context context="dep,carpool"
                     dep-dataset="departements-et-collectivites-doutre-mer-france"
                     dep-domain="userclub"
                     carpool-dataset="base-nationale-des-lieux-de-covoiturage-en-france"
                     carpool-domain="userclub">

    <div ods-color-gradient="colorgradient"
         ods-color-gradient-context="carpool"
         ods-color-gradient-x="dep_code"
         ods-color-gradient-serie="COUNT()"
         ods-color-gradient-high="rgb(20, 33, 96)"
         ods-color-gradient-low="rgb(180, 197, 241)">

        <div class="map-container">
            <ods-map>
                <ods-map-layer context="dep"
                               color-categories="colorgradient['colors']"
                               color-by-field="dep_code"
                               color-categories-other="lightgrey"
                               display="categories"
                               shape-opacity="0.95"
                               title="# of carpool parking">
                </ods-map-layer>
            </ods-map>

            <ods-legend title="# of carpool parking"
                        color-gradient="colorgradient"
                        display="linear"
                        no-value-color="lightgrey"
                        decimal-precision="0"></ods-legend>
            </div>
        </div>
    </div>
</ods-dataset-context>
.map-container {
    position: relative;
}

.odswidget.odswidget-legend {
    position: absolute;
    top: 20px;
    left: 57px;
}