6. Specify Visual Encodings
Visual encodings specify how the values in a data attribute map to the properties of a visual channel. To specify a visual encoding, we need an example mark/glyph/collection, a data attribute, and a visual channel:
scene.encode(rect, {attribute: "Percentage", channel: "width"});
Mascot will automatically create a scale based on the provided parameters, the type and value distribution of the data attribute, 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:
| attribute 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.