6. Specify Visual Encodings
Visual encodings specify how the values in a data field map to the properties of a visual channel. To specify a visual encoding, we need an example mark/glyph/collection, a data field, and a visual channel:
scene.encode(rect, {field: "Percentage", channel: "width"});
Mascot will automatically create a scale based on the provided parameters, the type and value distribution of the data field, and the type and current values of the visual channel.
Scale Type
The following describes the heuristics for automatically choosing the scale type based on an encoding specification:
| field type | channel | scale type |
|---|---|---|
| integer or number | “width”, “height”, “x”, “y”, “angle”, “radialDistance”, “radius” | linear |
| date | “width”, “height”, “x”, “y”, “radialDistance”, “radius” | time |
| string | “x”, “y” | point |
| integer or number | “fillColor”, “strokeColor” | sequentialColor |
| string | “fillColor”, “strokeColor” | ordinalColor |
For “log” and “power” scale types, you can specify them as the “scaleType” parameter in the encode method.