From a92259eb45b3d4a9ca0002e55c8dd2e38bc1ddb8 Mon Sep 17 00:00:00 2001 From: Joel Ostblom Date: Sun, 10 Apr 2022 06:15:53 -0700 Subject: [PATCH] docs: add example of rendering images in tooltips (#8048) * docs: add example of rendering images in tooltips * docs: add link to vega-tooltip plugin in the image tooltip section * chore: update TOC [CI] * chore: update examples [CI] * style: auto-formatting [CI] * Improve wording Co-authored-by: Dominik Moritz * Remove stroke outline * chore: update examples [CI] Co-authored-by: GitHub Actions Bot Co-authored-by: Dominik Moritz --- examples/compiled/text_tooltip_image.png | Bin 0 -> 1921 bytes examples/compiled/text_tooltip_image.svg | 1 + examples/compiled/text_tooltip_image.vg.json | 61 +++++++++++++++++++ examples/specs/text_tooltip_image.vl.json | 18 ++++++ site/_includes/docs_toc.md | 1 + site/docs/tooltip.md | 8 +++ 6 files changed, 89 insertions(+) create mode 100644 examples/compiled/text_tooltip_image.png create mode 100644 examples/compiled/text_tooltip_image.svg create mode 100644 examples/compiled/text_tooltip_image.vg.json create mode 100644 examples/specs/text_tooltip_image.vl.json diff --git a/examples/compiled/text_tooltip_image.png b/examples/compiled/text_tooltip_image.png new file mode 100644 index 0000000000000000000000000000000000000000..6899736a6dcd3019ef0736d09ff8149e470b3f09 GIT binary patch literal 1921 zcmZ{lc{tnI8pkuYLn@lFOjRtU2-S=&getd!DpKn(wu+^y5n4M#)Y7rmQbr81jD4q; zinX=3(prMrDb-YBDWMfbNV&iMbDw*k``mM$bKd9t^S@_N5j36QJVJL;0uQ)2%a(Dx zhC)g(n|9aVXwkp^=RqXnGtbX*@-^C#9L@NI1feuXE34?{W>j-q+l_`<6Lh{g7>!2n z?e7om&*D+*o150*I&Hnk4@_oVyN|1@?w5A4t3LFuhX>*dYHDg71Qw3;O%feBQd}%G zuoehTiX~-cA{7);hDpk6=`uzSVttpMXQrp8r#ycA;ppoooAwe+bPo&D>gw!-NlIFf z=SLb`dbH|f2fMpFH@W2FPxI ze?Kx0)(d1UclolKoLoGE!I0tov-(W$)29k@va)YoRp!KhQB=HVZx4fVpCOaULd&sA zaXpdWa`p7|!uPjCFuQZl?rOyJM4dV>=!EUb^NDL-V!m6Z1+)M$7CQnfU$T9dyQ$;j z;{rR2TU!q(0|U=`dJ4-*KNE?9M0X=2@C|+a!|f&Q1SI_vsIjCZ8qVgh14nbz65#VQ zGn9?VN^(m}CYoOopM&@O4S4~Y4jYi`fekq;8DRWqBV-wF_y)v-1vAG5T#Ol^gBQEA? z`b!@lA3NCEQlMfQ#?1Wu{2@v5tpXOh2Obd~UdA*^laSKZ7K1{e<6bRQH8uJ^KHHD) zzM1}sk8fqB&hgFQ;Ioa%rKKlHNf4B}`h4?M4Gp)Q_g(D-mR$4gy2(um7!2nB5EYCb z3t4RUhlz>?Xr&5bPfQXM6aN@+)3dV^1{F0mS!vD8&+`E6)YKrVxa>@k+L0E|Y@NxAdF!T@!{&JXqUegGAfmvdc6<}xf5 z09iUZCbza~kb*}ar>0V3zQry`_~!xRxUzg;>84u`vLFLr2Tq$DT5 z>$5h^S!?9cRcsg`>?q3@H?9>MQ%imR68-qocpQ{ui zoPxmq_u=k^lNW(zpmsmnKUT*I`C|GW)z>R+z3&p^6;^tcdQqDaM3v~v?q0Mst@l*T z2|d_$A};Ifg1Nc14E&-*lj4#`)vc|qMfmx9tE%L4sW^bf381}jL#gItPyXp%Q z6#VFCW>Kgki&%-?Cb{dQ_9wzpTeGve5`)z-a$N1j9aIEtMV0cZl4qEe}#M;uPLf@ABs zlarIVo+z}mjEw&Z1-dm)1~)i&5sy05#(q5Sp8M!wpqa;yU~p+w)mg{Z2YtQ0py-$w z{}T@3FA}M=zW%50orFhe2CefGi9|~~JFu^>@4;%$BM7X$+0m$kV+&c)bsebJK|*h%6*M|NQhA?yOvNa{@ssf#YU<)i^S3w`6rHA zF`4iLWH^M3l2s0hpYTkzd5y1k_|@z5Md&U)@rI+VZPpFv^^KI(+-Xy5l}~Nw{~y`F brEt#Zu-4;t7w}NvPX%Fanj6&XyGH*DvCF~5 literal 0 HcmV?d00001 diff --git a/examples/compiled/text_tooltip_image.svg b/examples/compiled/text_tooltip_image.svg new file mode 100644 index 0000000000..2b0a6c1059 --- /dev/null +++ b/examples/compiled/text_tooltip_image.svg @@ -0,0 +1 @@ +data/ffox.pngdata/gimp.pngdata/7zip.png \ No newline at end of file diff --git a/examples/compiled/text_tooltip_image.vg.json b/examples/compiled/text_tooltip_image.vg.json new file mode 100644 index 0000000000..dc2bdf8265 --- /dev/null +++ b/examples/compiled/text_tooltip_image.vg.json @@ -0,0 +1,61 @@ +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "A simple chart with an image tooltip.", + "background": "white", + "padding": 5, + "width": 20, + "style": "cell", + "encode": {"update": {"stroke": {"value": null}}}, + "data": [ + { + "name": "source_0", + "values": [ + {"image": "data/ffox.png"}, + {"image": "data/gimp.png"}, + {"image": "data/7zip.png"} + ] + } + ], + "signals": [ + {"name": "y_step", "value": 20}, + { + "name": "height", + "update": "bandspace(domain('y').length, 1, 0.5) * y_step" + } + ], + "marks": [ + { + "name": "marks", + "type": "text", + "style": ["text"], + "from": {"data": "source_0"}, + "encode": { + "update": { + "fill": {"value": "black"}, + "tooltip": { + "signal": "{\"image\": isValid(datum[\"image\"]) ? datum[\"image\"] : \"\"+datum[\"image\"]}" + }, + "description": { + "signal": "\"image: \" + (isValid(datum[\"image\"]) ? datum[\"image\"] : \"\"+datum[\"image\"])" + }, + "x": {"signal": "width", "mult": 0.5}, + "y": {"scale": "y", "field": "image"}, + "text": { + "signal": "isValid(datum[\"image\"]) ? datum[\"image\"] : \"\"+datum[\"image\"]" + }, + "align": {"value": "center"}, + "baseline": {"value": "middle"} + } + } + } + ], + "scales": [ + { + "name": "y", + "type": "point", + "domain": {"data": "source_0", "field": "image", "sort": true}, + "range": {"step": {"signal": "y_step"}}, + "padding": 0.5 + } + ] +} diff --git a/examples/specs/text_tooltip_image.vl.json b/examples/specs/text_tooltip_image.vl.json new file mode 100644 index 0000000000..8cc8d163a0 --- /dev/null +++ b/examples/specs/text_tooltip_image.vl.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://vega.github.io/schema/vega-lite/v5.json", + "view": {"stroke": null}, + "description": "A simple chart with an image tooltip.", + "data": { + "values": [ + {"image": "data/ffox.png"}, + {"image": "data/gimp.png"}, + {"image": "data/7zip.png"} + ] + }, + "mark": "text", + "encoding": { + "text": {"field": "image"}, + "y": {"field": "image", "axis": null}, + "tooltip": [{"field": "image"}] + } +} diff --git a/site/_includes/docs_toc.md b/site/_includes/docs_toc.md index e658f7baf1..a71657fc06 100644 --- a/site/_includes/docs_toc.md +++ b/site/_includes/docs_toc.md @@ -374,5 +374,6 @@ - [Tooltip Based on Encoding]({{site.baseurl}}/docs/tooltip.html#encoding) - [Tooltip Based on Underlying Data Point]({{site.baseurl}}/docs/tooltip.html#data) - [Tooltip channel]({{site.baseurl}}/docs/tooltip.html#channel) + - [Tooltip image]({{site.baseurl}}/docs/tooltip.html#tooltip-image) - [Disable tooltips]({{site.baseurl}}/docs/tooltip.html#disable-tooltips) - [Vega Tooltip plugin]({{site.baseurl}}/docs/tooltip.html#plugin) diff --git a/site/docs/tooltip.md b/site/docs/tooltip.md index 8be56a8f4f..56ea9a255a 100644 --- a/site/docs/tooltip.md +++ b/site/docs/tooltip.md @@ -64,6 +64,14 @@ To avoid that the tooltips groups the data, add an aggregate to the tooltip enco
+## Tooltip image + +To display an image in a tooltip you can use the [Vega Tooltip plugin](#plugin). Vega Tooltip requires the special field name `image` to indicate that the field values should be rendered as images instead of displayed as text. The image tooltip can be specified either by setting the `tooltip` property of the mark definition (as detailed above) or by passing the field _as an array_ to the tooltip encoding channel, as in the example below: + +
+ +In addition to providing the path to an image, the Vega Tooltip plugin can also render base64 encoded images prefixed with `data:image/png;base64,` [similarly to how these are rendered inside HTML image tags](https://www.w3docs.com/snippets/html/how-to-display-base64-images-in-html.html). To change the maximum size of the rendered tooltip images, you can adjust the `max-width` and `max-height` properties of the CSS selector `#vg-tooltip-element img`. + ## Disable tooltips To disable tooltips for a particular single view specification, you can set the `"tooltip"` property of a mark definition block to `null`.