Custom icons in grid cells

[jeandav]

For the longest time I've been trying to make it work but I'm failing to find any method in which to include a custom icon (eg, svg) in a grid cell. Similar to how text or emoji could be displayed in the text_emoji.html example. Am I missing something obvious or is just straight-up not doable using gridviz?

[jgaffuri]

Hi Jean,

text_emoji.html example is based on the TextStyle indeed:

const textScale = gridviz.TextStyle.textScale(['👨‍🦲', '🙍‍♂️', '🙍', '👩‍👦', '👨‍👧', '👪', '👨‍👩‍👦‍👦'], ...)

With that style, a grid cell is shown as a character. So if you want to use that for your case, you would need to use images predefined as a character set.

A more suitable way is to use 'ImageStyle', see: https://github.com/eurostat/gridviz/blob/master/src/style/ImageStyle.js

It was not documented yet (shame on me!) but from the code, you can see that it is possible to specify an image from a cell code.

There is an example on how to use it for chernoff faces here: https://github.com/eurostat/gridviz/blob/master/examples/test/c2021_test.html

See around line 895:

                const style = new gridviz.ImageStyle({
                    imageCode: (c) => {
                        const a = +ageClassifier(c)
                        const ageCode = a == 0 ? "y" : a == 1 ? "m" : "o"
                        const sexCode = sexClassifier(c)
                        const empCode = empClassifier(c.sEMP)
                        return sexCode + ageCode + empCode
                    },
                    images: chernoffImages,
                    size: (c, r, z, viewScale) => viewScale(c.T),
                    viewScale: gridviz.viewScaleQuantile({ valueFunction: (c) => +c.T, classNumber: classNumberSize, minSizePix: 30, maxSizeFactor: 0.9 }),
                })

The images are pre-loaded with:

        const chernoffImages = {}
        gridviz.loadChernoffFacesImages(chernoffImages, "https://raw.githubusercontent.com/jgaffuri/chernoff-faces/main/out/v1/", update)

from this images list: https://github.com/jgaffuri/chernoff-faces?tab=readme-ov-file

[jgaffuri]

I would be surprise it it works with SVG images. You may have to convert them into a raster image format such as png.

[jeandav]

Thank you so much Julien for taking the time to reply. I'm loving playing around with gridviz these days. Have a great end of the week

[jgaffuri]

Yes, there's a lot of fun in it ! Legos and more !

[jgaffuri]

Here is the doc with an example: https://github.com/eurostat/gridviz/blob/master/docs/reference.md#image-style With kitten ! There is a little trick to load the images before using them.

[jgaffuri]

I just published version 3.0.12 with an improved version. No need to pre-load the images, just specify the URL if each image from a grid cell.

See the kitten example code: https://github.com/eurostat/gridviz/blob/master/docs/reference.md#image-style