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.

More technical and mathematical information on ods-color-gradient algorithm here

Simple usage with legend on top of the map

ods-color-gradient: Power exponent

The power exponent is used to create a power based scale. The transform applied to value is of the type y = x^k where k, the exponent, can be any real number.

  • For k = 0.3 : it approximates log scale.
  • For k = 1 : it is a linear scale.
  • For k >= 2 : it approximates square scale.

ods-color-gradient-pow-exponent optional parameter defines the scale. If not defined, it will be set to 1 that correspond to a linear scale.

ods-color-gradient: Number of classes

ods-color-gradient-nb-classes optional parameter defines the number of groups of values. If not defined, colors will then NOT be grouped, and the corresponding legend will be a linear gradient.

Note: without classes, it’s a simple linear or pow color gradient

Note 2: the more classes you have, the more it looks like a linear color gradient

ods-legend: Display mode

display optional parameter can be linear or steps.

Note: ods-color-gradient-nb-classes parameter is mandatory in order to use ods-legend widget in steps mode

ods-legend: CSS tricks

With some CSS, ods-legend can be horizontal. It can also be positioned on top of the map, to save space.