Complex Encodings: Icons

Concepts

The complex badge encodings section of a create dataset call provides fine-grained controls for placing one or more badges on entities. Badge encodings are similar to the main icon encoding, except badges are placed around the main entity.

Badge encodings control multiple visual attributes:

• Glyphs: Icons, flags, text, and custom images
• Color: Foreground and background
• Border:Width, color, and stroke pattern
• Position: Place the badge around the entity in positions like TopRight, Left, and BottomRight

Multiple badge settings can be bound to different graph data. Data mappings enable categorical encodings for tasks like assigning country name to a flag, and continuous mappings for tasks like assigning different risk value ranges to different colors. The default fallback field other can be used for effects such as constant values.

Glyphs

See the multiple glyphs options in the icons encodings documentation.

Default and current encodings

See the primary discussion of default vs. current encodings.

Badges demo

Top right badge with icon glyph based on categorical mapping

{
    "name": "my graph",
    "metadata": {},
    "edge_encodings": { "bindings": {"source": "s", "destination": "d"} },
    "node_encodings": {
        "bindings": {"node": "n"},
        "complex": {
            "default": {
                "pointBadgeTopRightEncoding": {
                    "graphType": "point",
                    "encodingType": "badgeTopRight",
                    "attribute": "type",
                    "variation": "categorical",
                    "mapping": {
                        "categorical": {
                            "fixed": {
                                "macbook": "laptop",
                                "mac": "server"
                            },
                            "other": "question"
                        }
                    }
                }
            }
        }
    }
}

Bottom flag badge with stylized border from a categorical mapping

{
    "name": "my graph",
    "metadata": {},
    "edge_encodings": { "bindings": {"source": "s", "destination": "d"} },
    "node_encodings": {
        "bindings": {"node": "n"},
        "complex": {
            "default": {
                "pointBadgeBottomEncoding": {
                    "graphType": "point",
                    "encodingType": "badgeBottom",
                    "attribute": "type",
                    "variation": "categorical",
                    "mapping": {
                        "categorical": {
                            "fixed": {
                                "America": "flags-icon-us",
                                "Canada": "flags-icon-ca"
                            },
                            "other": "question"
                        }
                    },
                    "shape": "circle",
                    "border": {
                        "width": 2,
                        "color": "white",
                        "stroke": "solid"
                    }
                }
            }
        }
    }
}

Top badge icon with filled background from continuous mapping

{
    "name": "my graph",
    "metadata": {},
    "edge_encodings": { "bindings": {"source": "s", "destination": "d"} },
    "node_encodings": {
        "bindings": {"node": "n"},
        "complex": {
            "default": {
                "pointBadgeTopEncoding": {
                    "graphType": "point",
                    "encodingType": "badgeTop",
                    "attribute": "score",
                    "variation": "continuous",
                    "mapping": {
                        "continuous": {
                            "bins": [
                                [20, 'info-circle'],
                                [80, 'exclamation-triangle'],
                                [null, 'exclamation-circle']
                            ]
                        }
                    },
                    "color": {
                        "mapping": {
                            "continuous": {
                               "bins": [
                                    [15, "silver"],
                                    [25, "yellow"],
                                    [100, "red"]
                                ]
                            }
                        }
                    },
                    "bg": {
                        "color": {
                            "mapping": {
                                "continuous": {
                                "bins": [
                                    [15, "black"],
                                    [25, "black"],
                                    [100, "white"]
                                ]
                            }
                        }
                    }
                }
            }
        }
    }
}

Top right badge with custom colored text from categorical mapping

{
    "name": "my graph",
    "metadata": {},
    "edge_encodings": { "bindings": {"source": "s", "destination": "d"} },
    "node_encodings": {
        "bindings": {"node": "n"},
        "complex": {
            "default": {
                "pointBadgeTopRightEncoding": {
                    "graphType": "point",
                    "encodingType": "badgeTopRight",
                    "attribute": "type",
                    "variation": "categorical",
                    "as_text": true,
                    "mapping": {
                        "categorical": {
                            "fixed": {
                                "America": "US",
                                "Canada": "CA"
                            }
                        }
                    },
                    "color": {
                        "mapping": {
                            "categorical": {
                                "fixed": {},
                                "other": "black"
                            }
                        }
                    },
                    "bg": {
                        "color": {
                            "mapping": {
                                "categorical": {
                                    "fixed": {},
                                    "other": "white"
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Complex badge encodings schema

Structure

{
    ["node_encodings" | "edge_encodings"]: {
        "complex": {
            ["default" | "current"]: {
                `["point"|"edge"]Badge["Top","TopLeft","Left", "BottomLeft", "Bottom", "BottomRight", "Right", "TopRight", "Cover"]Encoding`: {
                    "graphType": "point" | "edge",
                    "encodingType": `badge["Top", "TopLeft", ...]`,
                    "attribute": String,
                    ...( FixedMapping<Glyph> | ContinuousMapping<Glyph> ),
                    ?"asText": Boolean,
                    ?"color": FixedMapping<Color> | ContinuousMapping<Color>,
                    ?"bg": {
                        ?"color": FixedMapping<Color> | ContinuousMapping<Color>,
                        ?"image": FixedMapping<Glyph> | ContinuousMapping<Glyph>
                    },
                    ?"border": {
                        "width": Integer,
                        "color": Color,
                        "stroke": ["dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset', "none"]
                    }
                    
                }
            }
        }
    }
}

Further reading

• Type mapping Categorical<T>
• Type mapping continuous<T>
• Type Glyph