Customize tooltip in Altair chart

I’m using Google Colab for learning Python. In this Google Colab notebook I’ve built for demostration, I was able to get some JSON data and visualize it with Altair.

This is the chart image I got so far – you can interact with the data in the linked Google Colab notebook or directly in the vega-editor ready with the sample data:

Below is the explanation of the data I have and what I want to show:

In Yu-Gi-Oh! TCG, cards came from a certain card set. In each card set are Monster, Spell and Trap cards – as well another type of cards like: Link Monsters, XYZ monsters, etc.

A normal JSON structure of a monster card (– for this purpose – has ATK and DEF) has the following JSON structure:

{
   "id":89631139,
   "name":"Blue-Eyes White Dragon",
   "type":"Normal Monster",
   "atk":3000,
   "def":2500,
   "level":8,
   "race":"Dragon",
   "attribute":"LIGHT",
   "archetype":"Blue-Eyes"
}

But, a non-monster card (i.e. a spell card) has no values neither in ATK and DEF attributes:

Example:

{
   "id":35261759,
   "name":"Pot of Desires",
   "type":"Spell Card",
   "race":"Normal",
   "archetype":"Greed"
}

I want to visualize in the chart each card that comes in the card set and – while the cursor is on a point (hover), it will show the details of the card like, (Name, ATK, DEF (if any) and the Type of card).

Example of desired tooltip:

After some trial and error, research and read the documentation, I’m facing the following issues and wondering if the results I’m looking are possible:

• When you hover on a point that does not have ATK and DEF – (see image 1) = how to modify the settings of Altair chart for condition the build of the tooltip? – see image 1:

Image 1:

In “image 1”, the card called “Pot of Desires” is a Spell Card = it doesn’t have ATK or DEF, I’ve configured the chart with the invalid property for shown Nulll / None / NaN values) and Altair sets 0 as default to those missing values.

The expected output in (for a non-monster card) would be:

Name: Pot of Desires

Type: Spell Card

The expected output in (for a monster card) would be:

Name: Blue-Eyes White Dragon

ATK: 3000 – DEF: 2500

Type: Normal Monster

The expected output in (for a link monster card = has ATK, but no DEF) would be:

Name: Proxy Dragon

ATK: 3000

Type: Link Monster

I want to condition how to build the tooltip in these scenarios, it is possible?

Answer

I don’t think this is possible, see https://github.com/vega/vega-tooltip/issues/251. In summary it seems like Vega and VegaTooltip does remove fields with Undefined form the tooltip, but VegaLite forces these to be shown in the tooltip (compare this VegaLite spec with this Vega one). It seems like they are looking for help to implement the feature you want.

Here is an example with your data that illustrates how both null and Undefined values show up in the tooltip:

df = pd.DataFrame([{
   "id":89631139,
   "name":"Blue-Eyes White Dragon",
   "type":"Normal Monster",
   "atk":3000,
   "def":2500,
   "level":8,
   "race":"Dragon",
   "attribute":"LIGHT",
   "archetype":"Blue-Eyes"
},
{
   "id":35261759,
   "name":"Pot of Desires",
   "type":"Spell Card",
   "race":"Normal",
   "archetype":"Greed"
}])

alt.Chart(df).mark_point(tooltip={'content': 'data'}).encode(
    x='name',
    y='type'
).transform_calculate(
   A = "isValid(datum.atk) ? datum.atk : 'Undefined'",
   D = "isValid(datum.def) ? datum.def : 'Undefined'"
)