• 1 Research
  • 2 In Progress
  • 3 Feedback
  • 4 Done

The Map widget in WebUI can display many different types of data on a map. For example:

  • Icons for the type of asset, like Distribution Center, Production Facility and Stores.
  • Color for stock levels, like green for in stock and red for out of stock.
  • Node sizes for capacity of the asset
  • Arc width for volume of product flow (with optional labels to display the value in text)
  • Heatmap for geographical distribution of demand


While each of these types of data visualization are useful, using them all together would make the map very cluttered. Which data is visualized how therefore needs to be carefully considered in a way that creates the most value.

  • All features used, making it difficult to understand the data
  • Too light colors (especially yellow) making it low contrast with the map
  • Colored arcs don’t add value

Above An example from the Digital Navigator app where the assets in a distribution network are drawn against the demand on a heatmap. Using a


The heatmap is a type of data visualization that shows the magnitude of data as a color value on a map. This gives users an easy way to see the geographical distribution of a phenomenon. The heatmap visualizes data values on grid of lat-lon coordinates and blurs the colors in between. This means that a heatmap is more for getting an overview of how data is clustered and varies than for exact values.

Heatmap coloring

The heatmap uses a default coloring scheme called Viridis, developed for Matplotlib. The advantages of this scheme are:

  • Colorful
  • Pleasant to look at
  • Sequential (as opposed to Diverging or Categorical)
  • Perceptually uniform (It accurately represents data without sudden jumps in perception)
  • Works when printed in black and white
  • Accessible to colorblind users

Below: the same data visualized with different color scheme’s


Rainbow scheme


Viridis scheme