Skip to content

Gridviz styling

Jump to bottom
gaffuri edited this page Oct 25, 2021 · 2 revisions

This page presents how Gridviz styles are defined.

Generic style

A typical visualisation tool would simply go through the list of cells to display, and for each of them, select the color corresponding to the cell value, and then fill a square with this color at the location of the grid cell. GridViz is designed to allow more advanced visualisation techniques such as the ones presented on this page.

For this purpose, GridViz allows defining several visualisation styles. Each style is designed at the level of a group of cells (and not at the level of each individual cell) through a generic function draw(cells, style) where cells is a list of cells to display (typically the ones within the viewer viewport) and style is an object describing all required parameters defining the visualisation style.

Developpers are offered the possiblity to enrich the library of styles by defining new styles with specific draw(cells, style) functions.

Note: Maybe this way of doing is not the most suitable with webGL and some of the rendering operations must be transferred at GPU level.

Below are some examples of implementations:

Some examples

Color

draw(cells, style){

  • for each cell:
  • get cell color: color = style.legend(cell.value)
  • draw cell as a square: drawSquare(toScreenX(cell.x), toScreenY(cell.y), toScreenRes(resolution), color)

}

Color and size

draw(cells, style){

  • for each cell:
  • get cell color: color = style.legendColor(cell.value1)
  • get cell size: size = style.legendSize(cell.value2)
  • compute offset: offset = (toScreenRes(resolution)-size)*0.5
  • draw cell as a square: drawSquare(toScreenX(cell.x)+offset, toScreenY(cell.y)+offset, size, color)

}

Lines/spike/ridge map

draw(cells, style){

  • sort cells by y and x, in ascending order
  • for each cell row
  • for each pair of consecutive cells in the raw, starting from left to right:
  • get height values for both cells: h1 = style.legend(cell1.value); h2 = style.legend(cell2.value);
  • draw line for the cells: drawLine(toScreenX(cell1.x), toScreenY(cell1.y) +h1, toScreenX(cell2.x), toScreenY(cell2.y) +h2, style.color, style.width)

}

Kernel smoothing

draw(cells, style){

  • apply kernel smoothing for the cell values to get new values: The new value of a cell becomes the weighted average of its neighboring cells. This could rely on an external library. See for example https://observablehq.com/@uwdata/fast-kde
  • draw the cells with these new smoothed values, using color by value legend.

}

Requirements

To define styles in such a way, there is a need to expose some basic rendering functions to be used within the draw(cells, style) function. These functions include:

  • Conversion functions from geographical coordinates to screen coordinates
  • A function to draw a triangle
  • A function to draw squares/rectangles (fill color/texture and stroke color)
  • A function to draw lines of a given width and color
  • Etc.
Clone this wiki locally