Thematic multivariate visualization (2D)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const colorVariable = {
  type: "color",
  // attribute field to visualize
  field: "TEMP",
  // map data values to colors
  // all other values are linearly interpolated
  stops: [
    { value: 20, color: "#2b83ba" },
    { value: 35, color: "#abdda4" },
    { value: 50, color: "#ffffbf" },
    { value: 65, color: "#fdae61" },
    { value: 80, color: "#d7191c" }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const referenceScale = 9244650;

const sizeVariable = {
  type: "size",
  // attribute value to visualize
  field: "WIND_SPEED",
  // features with the minDataValue are bounded to the minSize
  minDataValue: 0,
  // features with the maxDataValue are bounded to the maxSize
  maxDataValue: 60,
  minSize: {
    type: "size",
    valueExpression: "$view.scale",
    // adjust the minSize of the features by scale
    stops: [
      { value: referenceScale, size: 8 },
      { value: referenceScale*2, size: 6 },
      { value: referenceScale*4, size: 4 },
      { value: referenceScale*8, size: 2 }
    ]
  },
  maxSize: {
    type: "size",
    valueExpression: "$view.scale",
    // adjust the max size by scale
    stops: [
      { value: referenceScale, size: 40 },
      { value: referenceScale*2, size: 30 },
      { value: referenceScale*4, size: 20 },
      { value: referenceScale*8, size: 10 }
    ]
  }
};

1
2
3
4
5
const rotationVariable = {
  type: "rotation",
  field: "WIND_DIRECT",
  rotationType: "geographic"
};