I took a stab and got pretty close. If you were to extrapolate from this vega-lite specification (json), you could turn this into a custom Anvil component (as I did with the progress bar).
Vega-lite spec to get you started:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"values": [{"x": 1, "y": 1, "z": "🔒"}, {"x": 2, "y": 1,"z": "👨"}, {"x": 3, "y": 1, "z": "🏳"}]},
"width": 500,
"height": 200,
"layer": [
{"mark": "line"},
{"mark": {"type": "point", "size": 3000, "opacity": 1, "fill": "white"}},
{"mark": {"type": "text", "size": 20, "color": "black", "dy": 40},
"encoding":
{"text": {"field": "x", "type": "quantitative"}}
},
{"mark": {"type": "text", "size": 20},
"encoding": {
"text": {"field": "z", "type": "nominal"}}
}
],
"encoding": {
"x": {"field": "x", "type": "quantitative", "axis": null, "scale": {"domain": [0, 4]}},
"y": {"field": "y", "type": "quantitative", "axis": null, "scale": {"domain": [0, 2]}}
}
}
