From 8cbaed56e466c2160dd1f77b5ac1221b55f60251 Mon Sep 17 00:00:00 2001 From: Kanit Wongsuphasawat Date: Tue, 21 Jun 2022 22:14:23 -0700 Subject: [PATCH] docs(examples): Bar Chart with Full-Height Hover Targets for Tooltip (#8225) * docs(examples): Bar Chart with Full-Height Hover Targets for Tooltip * fix names * chore: update TOC [CI] * chore: update examples [CI] Co-authored-by: GitHub Actions Bot --- ...nteractive_histogram_full_height_hover.png | Bin 0 -> 9863 bytes ...nteractive_histogram_full_height_hover.svg | 1 + ...active_histogram_full_height_hover.vg.json | 228 ++++++++++++++++++ ...active_histogram_full_height_hover.vl.json | 30 +++ site/_data/examples.json | 4 + 5 files changed, 263 insertions(+) create mode 100644 examples/compiled/interactive_histogram_full_height_hover.png create mode 100644 examples/compiled/interactive_histogram_full_height_hover.svg create mode 100644 examples/compiled/interactive_histogram_full_height_hover.vg.json create mode 100644 examples/specs/interactive_histogram_full_height_hover.vl.json diff --git a/examples/compiled/interactive_histogram_full_height_hover.png b/examples/compiled/interactive_histogram_full_height_hover.png new file mode 100644 index 0000000000000000000000000000000000000000..d4760769df89e74ab3261b17fe0606ec395ba58d GIT binary patch literal 9863 zcmch7cRbbq`}f;EnTI4Z4w6(xijXa2Wfc+OWMz|`*+EwLNMw&PQlzZx5eku!aqJW! zBUzdEb?Wo^e(&G?``&;2?mzBFJ@7c=JzlTtdammouC1j)L&-{sAPCK6RV7^nAtHsp zH&Nv9bH`iY5d0#yP*+hx4ha7;YxCj}gbTT>B(Lw4x;W;iukXH3v9j4I92}K>@euK^ zz)Aim%mVyotY*xolPDh@e^h?bF(S(z?^xeIZN(6DCB!z@xYA2sUsoP&5bUg^NVP&l zA1h4r<#L0(yj5Mj?1fPWoVoULC%>QR?48>(ZhPb18e20`o=bbCMA)bxv;u-!A44!- z=H!FqP*d7mXoU-mC>;7hkQjNb+br!_QBjxm`KuZkG90=ErG1ML5fQP;$&>~9l(Mq* zZAFI_wz3jfn!*pCKyz}&Y;AclGBVz&(lj^65EBz~F-6iJK74OzXsGSkVFj019zkNF*G?aYFMNyHY^TP+u zH?+v`@bCq{?b7zGM~@yQowba3bdwCzE$HjJLwi1rTtQu(%E-v*W8M|csAJNsZ{ECF zSy_>DcR&BdRpR-J7liMdnwqYxuIdgO=P4A3l2IVKk`5HCp3+`2G9$l^%<% zTImg_mqsNFjf}W?c}ZJaTam!*Z0;wyxe5Xa zP2JrwBc>)$0d%z=&>Kr*k+7Vc*REZQeSZr@O-+h0GBI&;aUm8Z%pxKp_oJg1UlG=G zoOtTX`*;)`or;YOf4SpWL~1HKB6s5kdsB0BiPsMcUS3`^fUIy6j{1+p5{QSakbno;xhfrbjCQ?F` zs6A!S)YQx`E~Y^GKYhw_ny4G~;N#=VFDTG4K7m_NaT3KnRZrwTeVSURe)lXRC0V-f zlEi7_a_ZdNTpJsk$#Odzn?NWvyd-kV+Io6zu8(6w$H?f}-cg0p?6R_iO_5WlPU#4E zH|$hOhmR9yy?Vs}_lt0$QSd)gUqHlX&F0I@4BQ*Zr%#_^JHEawFTZ9?fd~l+d3k#m zL~$NDLgwr1n^rH_L`QNj64~18u(Pxz^WB;C;`n*}=~Cj;abnDc3(QkfQ-me+@DNje zz#bk%LP5A>d3kv>Wr(Vpnu3xNsSE&r%a&<-p;0uwss($%oYMWaKU~4q2M+gCAL-0#?dh}D2Qlv zbrnH65{1I_1ukK+IRh#1?xWTiYQ-?xmJq6=D+9((jjgTZP+|GcpT7+xBDvGUiK%&( zUmIDyxg|~VDu7eba7}c^UBj=383k*DLZReLO^*${Fb-oAca-Boo9%A>sQMOzHr?Ct zlF_|C%^)wr`L3Kv&%wJnC%=fbiaxGP*-2y>t?b` zxLE5HyxaxvRo;Ojlfn(UBGcMr;-J`L$_`vx+uPZm%i~DkShZ*KzyQ;+W5@VUpH{kd zjp?qRpZfqWMoGM%Tw#ZmHQ0lQk7o4<=d^_aQ|bJKL4^uA}2#P>|`M9tLOgxRs?TQ~sW| zsVQx1lHfK5_bsmV=C2129tewzw{<=irDtdF91G}q|2|wWfbU5dtY&z4c%}cIWYNv~ z2iUd;F6*BP4fMFsz0Ee%xDsre#Z*&B8eo}pWUCx>{+Fdr4b1mfm z{P_!#lHBLcF@}bQ;+LY)*;rN*`7G^*krB4DkE03~$7|VOVeZWGD)=x*-;~OI@2EaJv}H|+E5KXMK!gEzw3oX0odyM_wO$Q4*XH1#KNs+c6O0XO$w6buqHV!p=MTA zq0gQPeEISPK>#D}B`32cJ$`IkE1_`T(KZ#c_3M{BFGFK<^SweAHn!&O?kk1Su)?&jYL_px!$@&$UrIF&w6&b#{bVt9%Z_CSc z0RaIHn+oY7o5`G9i+Q@^ZGK~6U4fsDMz^6^Sy`P|zg!07Awq83*}1^q=gytG_@iri ztU4@B%9C4C(#TSN5Fpil_!XJ0t*yXFVIhH`MbNaIGEoLM{f;OrDdb@XA2ntP34tZ-KVqsx{W@8(%BmieLCyV1)RR|FYxieLf z8ZSdqO3E~}!j;l#lWGt1t(B>vI=^Z)X+c3+z!t+AFA)U=g~`vKgDpEA6};$suLIyX zO-<-GAiWEBw}b&384e%*G2&DYFV2K}q{hV&$;!&IU-Uw&JYbi%vpa=w$;xt0w?>m7 zhK7c6+;N%N*?%xRI%slvIi}8U$6}`Qv9PePoT@5{m*G&ZX3B<=R8f9@gLQ^qXyj2L zZVZMfC@9D*Dyyi7)^BIyYq_Y1h`gp|^lxBel|2hQ^!a0!qG7o`3&@(uZ{O}ibvL)S z&xd>1gPO?9=7-dIC!HX9!YMYqQytzSZXJ=RDJ{hnXyOool&p$LWBI}Z&R6D=T zhj`b-NZEYkVrFI}n%orpKp;u|awPw&`>6lkwzQk9-8``dmWw|@jg*v>>&zLN#>Pgk z*)-3U_EW`^pIaiYlv?ywFV{r|1|n3sn^{y%~^_J!Y-ec z?kjOu;p1YDsY37J@t-Ff?=efb@+xuDr>3SlfBT3@#-MviY^g~z9UeLVTD2@KEuHLr zsxEx~d`ldUO6eFIMyaie8VCDe0jP(fp=oJ}JnAyr#nG82b#!TIsnU5WxX6bW_w7F3 zi3Pwqg3wT)2oUG_{*wei5*0mcWo5-I>tEBA3?B={vosaxxMZ11D9Wp9&Yy;hF^bTzKf(%{DJO8i^$ z;lL;JuY?rtAIqm9EQJaOWL{m{!GS^c>CnxL&kTv&XQ74@W9eS8-SQpy?nXnQUDIk(R)D= zNEMfs#<8(HK^G*4v@+W}IOrG}s!p6GkWnfIa6aqVGfD{w2?WoiR!~q7^!V}Pzl8)# za7G3v)E4w>WpYW0$XI>|R32blR~Ib>EqlX#dLA<~vp{+tWiAmBdMI^*RLE8Y0fPX1 z{SEV|9?`1Z$LOXWU#|Xv0d4^SN`S{3FY@zI#^v_%Mn=i)<@56(p}t9@_kY9$nEjmj zz%M9B{&C~H^?!iqpxCsuXyAco{knR3APJtH82|NH)Y|!A->j)soQ4K9BW1`REF>X_==5IYZuIdJ|3-f`7iny zh^6mq1$E)I7Yd*wL9)HP{Ye0k)6+W)yiUu*lXC+9~zJgUFp`YHn#ED=I32TYmTMoz}vC#^KDLDeX#^ zE;Wvi?}z*FniLi}5y!UeRNf<}2@aB{52UDhKoHuOEvW*HOxqR*izh@kU*`%o0G@!> zZ0hSfEbchkP-@%fWv9%~Xz{f@VRV|)e~YNNc7rvPhAs5vOJPznGI@SR?vp1E(bLnT z!sY0PB>NgP#rqd7>iLvN?-IoOihg{Ej_2Ctn4cP zq=;aOTIIk&hoz*jC8wlZoi8*fo;ibNI&GM_3QiHMmdB9RZ=V$%6q}w-`&2jlYeyos zA&}@s+S0y;YB#8Kc6N5I1U0GDNIBG;_c`*Wm*&mddV2Tj_ZFR2*4C7YO>2=-zg$lb zj{%>1(6fIe-4^UuiNlDP{YZIqA$;VIn8k8MaY!*y9Togus)d@nevVwh%#79-a5g*Pd0^6 zt!!-k>v|{rHci5?C_r0BM@J*O2y`~*SQTD`mlx-2Z)+P4*j%&qInu}>3Z3oCN`m3# zRXUDFVWbTzmPY$WN29>z->CMW0g($l5t5aaRqp%S!pMQ7hSPw;oW2dQfHEld7luj% zEUIq)f5W1|3;!L9mdf?@^hiWSMPG;mJ)8li1TqBn^YZd?K99v>L6h2+i74D(0nqEqTajTr#aM>Dg@M5b`}_M~ zlLtM7l+*=oFLN)R@LxWC%dt0wIEzBpmpUsqmmKc=x8m~~DR*$bb4SVDz3dM#;^kD; z)fHV_T*4m914e=Jb=lo=`E#LVLC({yH20OVX*~_fOG<*Y`QN@Ut|%R6$0$_*k$?yR zS=f~(m8UD~yKx#6guT7}-|rsNx4(I8v24(^Ir+RD)FvU6dVc*iIcy+k#J=nCP=?xU zC`eI~WCLV8mdD4Y#v`eiPB*-Z<0<=nf~sBokA>p;P>jB zaVD+Ce)uee2+bcqq9d8kG=VZ8%Uqmqhcdd~V)6FvTP`uN@{ZqrItBB#t<6pSO$_UK z%7fimS%T*JH!!0P9SVw!qypT`E!T=HCB$JL(EDCD!(P2QyF{A5yL)%(l;-~yQV`Ow z3KoUx_I9=BCe=(Jor(UHO#J*OnF!d@P*Yf&3cKllsW-;Jo5Ss0!@ifSVMT@1M?0?3 zTHm9fl0o8K%$1JAD$WYzcK*KfAJ z_2k5*q)^e((ZLEU3MMu~9^=4aQ+@EIc{4dGA|kl9wpQzAU*G(r8`PP&K@l2iYGKg4 zpnV@uA^#nA5r2|bH|za{mj~GzXiVGApF7u&?|xa8*<;KFoR^cGO$=TU_K`wELt|xo zp_u3Y8hB9QM6j)y0SEgxbjz+Bq@||D{tI6%@TImUgp`eN)R2$@KdnD_S`DB}G1dpF zHA{{Q=gbdC!A?o4fC?iH`k%j4EA&cj-`aXrXiFw#B1BR;BY@U4Cu7=Oqt~s6`hRx3 zZ~b4}Vw1edj-2=O=IFCq<1%gI`QoC@bul!xL)@jTCUj6_kvwTd@)#!Op3FZ{VVCF; zLdG)m%95(Lw|8xf5+mI!dKeWF5&{WGpy6p{5Dpet?D`mpye@bHS{<^aHt-d3v9WKlzjP@iy_)-pwYOEB$MeEM#fdtef7FSefhd=9p!geUv2 z7DGF`Lj0n*{ZM9tOnRA1nS@w$;a-Wm^pfb$ILv>jkGc`=Co0}nv;vY65*P^y7SR51 zZb-oTJ=Jk*7rHyCiI69R+^e8&gzHHg!;9;$t)lBvK0cDaSL#MK^;)b*tS#52OtxIG z&CjaNk_%@uA-Wznr8D-%jRJ&arO&!R?v;$9jcH{a9eR*(pu(qSXY)R#gO-W=>#txS z@}{97=GRsqg3HR>!xkY+i%m+p-`c9&nJRG@LT;nQ!c%adckka%9it#4Gyn1~j-$Mz zqobKlb~g}`m8Omk^~5vJK=r;rT3lnc%sjL_i}Krp{*DQHBshFwhE4Sj2r^ z|AK^sd)3%nUmo;o4j=mh?o5?ic%cmZ2Lb_|LCIPxJu9EW4(QS=JxhcU}-?- zPi-uYaFqKlyr_tciwoM`_NiIxRkyi)yZ81@lgpZ#mmqrqTTKY>O>2GJhxnwV*qmy9 zkVi#Dp;=hM{dTrwPd=}PEMm~^V1KW~W6=mAngj=CEYOn*d>82D2e?|fjQFp=e$GyV zoBuXg%&DNL=(4~2i*|&UkB^`t!{XxTXFjBab#`j(v-Pwmre1mc#%=Z$2?gz)?NP9R z!+^KU*fFX4ASWUsA}~={filn!R!&acKtkB45;*p2r~18X*3#1UpPpT{-&`6qaTJA! z(gSQI%rMBv$m~0lM5=5wbH0DKpP8S>XQd}3wD4&rzm?utU$@NDO6#?>OU=#Y8-RJk z!02cvGxqe!li{_$W>PrHAx>o90l~|Rje7dz$;*ZYxpCjQ9#P!V$F}nf&=x?nQou^# zrwoc3#>Py({t6Bzh8)4Q{?q8_Xl!C4RLD8V{HZ+_@gaox+hW=vyKV{) zs)^Z(((#POm5a1GFON%aZEZEYRdWATipS$=r9TY}+^#+0PDqa-5}MpzUr3U47l1@Z z%Kqodjty)-Y_&=GFd@hxjG$Ni$H#(EgQ$ZLvRO9UyW(sp0uu4eQ z%f;g7<=cxr6i2F?`}-N;qodO>(t)VS&OL*ioE$|(MS`3*tzka+)g2%luzz>S8#K^4 zF)`N|(D&w6R=J)XhlixXX`;2tec|QZU#B@L-&7OX64&4r**(&uM~|kh z_a7-S9Gz1MlC6t@YGD?$Pa3~+2EsQX2(kL++;WtoKW~$*9UP+~CHC_5on9ZjsbXct zXX-Qel(rk>+BE1_B+zZP%Qo-kc#PV`Oa42H;^kmwW|o$^n9dlzIY70(QLIZcq^F9xC@1j1q4} zi9CAz_`Pxzb7S4^s`|{#Oe+He!`grlHtPLXS1U)yE{H4N7+G2#|GBXN_?xRQ@Hi}t zA~GuK7S!~u!zZ-9(0-mL1OeB9Tq5t^H`6V6I9BBzDKg+8w+TuiN~9HVqzx)`IPs?c z`_#0wGFNn|N=AX#&W6M8X8l16cp-={aiF;^+8>^T2~8MyawyM3>gwtshqEdxnL*_U z^kE%dmX?xYsUf6$Sy9mjs9+Ah4S|7N2#hX3{s96%*x6iGguw&YaWI?&Pz8#rbYEbi zrlwwjlW~ANM({FW#zsaK-#%tBU-S~Lsi}c73a*&&X9EQBSvZQccXWt&t(a*fp9?QM z$w&zn#BBA;dr13|V2Qyko0*#jtuG8Vzk8?Zv5b{}P6V4#sE zncz!}xXpAtMjOvcBE|B+I$54oyR-!rMZTGm2O&&*#sd31cyh^o!T0W!!t>B^Q^M)rD$F#l^*U zx29ttX@MBnC9JPML$W4gSWeQg!jXfd0SYO5l^FruH(O39G=qss7i^fr!B%$^i>RTV zUVOV4EVlj1WTOTbS{V7>AyohU6(?jp129b?4?Gm2;PK@heRQ!U_zr5sxa{^31LIe> z4v{p##BgV5IgXFhZ;hU$!PV8Zs_cr%+7qpvoe}@Pj3HPhX#fl@_-T6Vh~KS`Ilwkk z69@a^V5xPkUJZe1hey=_f}FnoiWCMfg!m1tlJnMzIb^!`Bu3a} z?pAi})$c4-1CKRD961Hy96cu|9kK;Y`vV5Sgd8VD%z+U8Aqb?agz-3nfOmz>C1fSR z!NFjt$(Qu;5U4_^Ftz%%V{3nBdD?U9Cp;V=On4T69)fps>4?|X-4=bhn(x}%VLKHe z3;}mEXqy52qX>BbG|b>syEX!Y<5q~j387}uM!vLr-Yn=Gi@_ojh;-y#U0=0tAA+-w zE_e?CwTZx{fkmf*+r0WSVESa%veLGwwzy)Flqakaj8NNUetkL2#}Gc0D&Z!XhABO` z-pVZHzk7kCVS96#K!_F5uV0JqEZjV3hbWE(*$6n;3>cfAEiA6HKn!6F3y1;}o!92g zp&~Gt6ub2f?Z_AZ@ZsCjr%zY>L~{4;?zB!O!UN%Lg=LH{xukeDQ@%Xr>B`6v3#s zf~E-q`$d?C+@qiy*qX&B4pzC%K4@1{g9j6~e$8g+7#mZ8r%qVdlZpokLq^3k2{YqR zFsm|KlO#w(d%`J@R2u=ZJkrt}$V-qkAef&#eL4k_Yc-WBx!uj9?$|Fd}t^#sU`$?cem&AOddQf zI-%LEqNJ2rP;dw$mA7`qwdBAq@NEnn>|lGa9%?b}(W6jEV!_?I4>|cR;|-ewuP~x~ z%HffV8?`=1#GS_9{&ifvYTa7Uv<8*Ah~&T}8)N_~xw^Tzd~H86S|7j(iH41>t&Wt| z)vHH5-@nMo;n}>mJCown)YeAfyYYRhs3^YUD@Rd#|67Q*kjkH{BZDgZr%v6I<7#+v zIUd-&!68q}_uKl?nDL?v{=jcb=$@FfC6%odQIjm(5x90}anb$q@4&i|3n=wMQ z$@py(29+%>ElDC+<*>OQo)dl)K&es8BE(T5uo`#lj!$*V9VcXEn>b4#z<0i2yDke9~eV3?6)*VM2h{Y4qV-mA9|2MTV^4R8Pr zcs%QJ%}-ib4oP;KuN?p$m^f8o%XY@f>gr~g%oW$HQo;i|_hMwWQ6LdzWMqt%c!ioQsu8-XL)c;Is%6y1;2&>%qdz} zaL>=ro7vb9SPLF2fUzx9B2l;WCOZti;c_dNcR2ko0)izBO8ITyA$UG$JZ4cV>bkAZ zRPacF+1vZ{X&XB*acCYJ;{W4FeL*?AS^0+4}=LoKj8@*7%RcZ!yJw%eD*8>#3yHF$TJsty5R|)srmT`XnT+K zoa_J}snpB+rC@s=CnOw6IcLiNnK?5_11O0uLc%WV27_91x#GervPH%9`^iLRZ84mK zo~KxQd{9cWKtOTH$q|t6zyN3}~2Ru`2R+ jpl}b^|KCsV?8+A6#ZNN56+aD6mLZofX(<&cm<9hY3_waa literal 0 HcmV?d00001 diff --git a/examples/compiled/interactive_histogram_full_height_hover.svg b/examples/compiled/interactive_histogram_full_height_hover.svg new file mode 100644 index 0000000000..99094db2a7 --- /dev/null +++ b/examples/compiled/interactive_histogram_full_height_hover.svg @@ -0,0 +1 @@ +1.02.03.04.05.06.07.08.09.010.0IMDB Rating (binned)02004006008001,000Count of Records \ No newline at end of file diff --git a/examples/compiled/interactive_histogram_full_height_hover.vg.json b/examples/compiled/interactive_histogram_full_height_hover.vg.json new file mode 100644 index 0000000000..0f2bab4cdd --- /dev/null +++ b/examples/compiled/interactive_histogram_full_height_hover.vg.json @@ -0,0 +1,228 @@ +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "background": "white", + "padding": 5, + "width": 200, + "height": 200, + "style": "cell", + "data": [ + { + "name": "hover_store", + "transform": [{"type": "collect", "sort": {"field": "_vgsid_"}}] + }, + { + "name": "source_0", + "url": "data/movies.json", + "format": {"type": "json"}, + "transform": [ + {"type": "identifier", "as": "_vgsid_"}, + { + "type": "extent", + "field": "IMDB Rating", + "signal": "layer_1_bin_maxbins_10_IMDB_Rating_extent" + }, + { + "type": "bin", + "field": "IMDB Rating", + "as": [ + "bin_maxbins_10_IMDB Rating", + "bin_maxbins_10_IMDB Rating_end" + ], + "signal": "layer_1_bin_maxbins_10_IMDB_Rating_bins", + "extent": {"signal": "layer_1_bin_maxbins_10_IMDB_Rating_extent"}, + "maxbins": 10 + }, + { + "type": "aggregate", + "groupby": [ + "bin_maxbins_10_IMDB Rating", + "bin_maxbins_10_IMDB Rating_end" + ], + "ops": ["count"], + "fields": [null], + "as": ["__count"] + } + ] + }, + { + "name": "data_0", + "source": "source_0", + "transform": [ + {"type": "identifier", "as": "_vgsid_"}, + { + "type": "filter", + "expr": "isValid(datum[\"bin_maxbins_10_IMDB Rating\"]) && isFinite(+datum[\"bin_maxbins_10_IMDB Rating\"])" + } + ] + }, + { + "name": "data_1", + "source": "source_0", + "transform": [ + { + "type": "filter", + "expr": "isValid(datum[\"bin_maxbins_10_IMDB Rating\"]) && isFinite(+datum[\"bin_maxbins_10_IMDB Rating\"])" + } + ] + } + ], + "signals": [ + { + "name": "unit", + "value": {}, + "on": [ + {"events": "mousemove", "update": "isTuple(group()) ? group() : unit"} + ] + }, + { + "name": "hover", + "update": "vlSelectionResolve(\"hover_store\", \"union\", true, true)" + }, + { + "name": "hover_tuple", + "on": [ + { + "events": [{"source": "scope", "type": "mouseover"}], + "update": "datum && item().mark.marktype !== 'group' ? {unit: \"layer_0\", _vgsid_: (item().isVoronoi ? datum.datum : datum)[\"_vgsid_\"]} : null", + "force": true + }, + {"events": [{"source": "view", "type": "mouseout"}], "update": "null"} + ] + }, + { + "name": "hover_toggle", + "value": false, + "on": [ + { + "events": [{"source": "scope", "type": "mouseover"}], + "update": "event.shiftKey" + }, + {"events": [{"source": "view", "type": "mouseout"}], "update": "false"} + ] + }, + { + "name": "hover_modify", + "on": [ + { + "events": {"signal": "hover_tuple"}, + "update": "modify(\"hover_store\", hover_toggle ? null : hover_tuple, hover_toggle ? null : true, hover_toggle ? hover_tuple : null)" + } + ] + } + ], + "marks": [ + { + "name": "layer_0_marks", + "type": "rect", + "style": ["bar"], + "interactive": true, + "from": {"data": "data_0"}, + "encode": { + "update": { + "tooltip": { + "signal": "{\"IMDB Rating (binned)\": !isValid(datum[\"bin_maxbins_10_IMDB Rating\"]) || !isFinite(+datum[\"bin_maxbins_10_IMDB Rating\"]) ? \"null\" : format(datum[\"bin_maxbins_10_IMDB Rating\"], \"\") + \" – \" + format(datum[\"bin_maxbins_10_IMDB Rating_end\"], \"\"), \"Count of Records\": format(datum[\"__count\"], \"\")}" + }, + "fill": {"value": "#eee"}, + "opacity": [ + { + "test": "length(data(\"hover_store\")) && vlSelectionIdTest(\"hover_store\", datum)", + "value": 0.5 + }, + {"value": 0} + ], + "ariaRoleDescription": {"value": "bar"}, + "description": { + "signal": "\"IMDB Rating (binned): \" + (!isValid(datum[\"bin_maxbins_10_IMDB Rating\"]) || !isFinite(+datum[\"bin_maxbins_10_IMDB Rating\"]) ? \"null\" : format(datum[\"bin_maxbins_10_IMDB Rating\"], \"\") + \" – \" + format(datum[\"bin_maxbins_10_IMDB Rating_end\"], \"\")) + \"; Count of Records: \" + (format(datum[\"__count\"], \"\"))" + }, + "x2": { + "scale": "x", + "field": "bin_maxbins_10_IMDB Rating", + "offset": 1 + }, + "x": {"scale": "x", "field": "bin_maxbins_10_IMDB Rating_end"}, + "y": {"value": 0}, + "y2": {"field": {"group": "height"}} + } + } + }, + { + "name": "layer_1_marks", + "type": "rect", + "style": ["bar"], + "interactive": false, + "from": {"data": "data_1"}, + "encode": { + "update": { + "fill": {"value": "#4c78a8"}, + "ariaRoleDescription": {"value": "bar"}, + "description": { + "signal": "\"IMDB Rating (binned): \" + (!isValid(datum[\"bin_maxbins_10_IMDB Rating\"]) || !isFinite(+datum[\"bin_maxbins_10_IMDB Rating\"]) ? \"null\" : format(datum[\"bin_maxbins_10_IMDB Rating\"], \"\") + \" – \" + format(datum[\"bin_maxbins_10_IMDB Rating_end\"], \"\")) + \"; Count of Records: \" + (format(datum[\"__count\"], \"\"))" + }, + "x2": { + "scale": "x", + "field": "bin_maxbins_10_IMDB Rating", + "offset": 1 + }, + "x": {"scale": "x", "field": "bin_maxbins_10_IMDB Rating_end"}, + "y": {"scale": "y", "field": "__count"}, + "y2": {"scale": "y", "value": 0} + } + } + } + ], + "scales": [ + { + "name": "x", + "type": "linear", + "domain": { + "signal": "[layer_1_bin_maxbins_10_IMDB_Rating_bins.start, layer_1_bin_maxbins_10_IMDB_Rating_bins.stop]" + }, + "range": [0, {"signal": "width"}], + "bins": {"signal": "layer_1_bin_maxbins_10_IMDB_Rating_bins"}, + "zero": false + }, + { + "name": "y", + "type": "linear", + "domain": {"data": "data_1", "field": "__count"}, + "range": [{"signal": "height"}, 0], + "nice": true, + "zero": true + } + ], + "axes": [ + { + "scale": "y", + "orient": "left", + "gridScale": "x", + "grid": true, + "tickCount": {"signal": "ceil(height/40)"}, + "domain": false, + "labels": false, + "aria": false, + "maxExtent": 0, + "minExtent": 0, + "ticks": false, + "zindex": 0 + }, + { + "scale": "x", + "orient": "bottom", + "grid": false, + "title": "IMDB Rating (binned)", + "labelFlush": true, + "labelOverlap": true, + "tickCount": {"signal": "ceil(width/10)"}, + "zindex": 0 + }, + { + "scale": "y", + "orient": "left", + "grid": false, + "title": "Count of Records", + "labelOverlap": true, + "tickCount": {"signal": "ceil(height/40)"}, + "zindex": 0 + } + ] +} diff --git a/examples/specs/interactive_histogram_full_height_hover.vl.json b/examples/specs/interactive_histogram_full_height_hover.vl.json new file mode 100644 index 0000000000..4f09a40f56 --- /dev/null +++ b/examples/specs/interactive_histogram_full_height_hover.vl.json @@ -0,0 +1,30 @@ +{ + "$schema": "https://vega.github.io/schema/vega-lite/v5.json", + "data": {"url": "data/movies.json"}, + "layer": [ + { + "params": [ + { + "name": "hover", + "select": {"type": "point", "on": "mouseover", "clear": "mouseout"} + } + ], + "mark": {"type": "bar", "color": "#eee", "tooltip": true}, + "encoding": { + "x": {"bin": true, "field": "IMDB Rating"}, + "opacity": { + "condition": {"test": {"param": "hover", "empty": false}, "value": 0.5}, + "value": 0 + }, + "detail": [{"aggregate": "count"}] + } + }, + { + "mark": "bar", + "encoding": { + "x": {"bin": true, "field": "IMDB Rating"}, + "y": {"aggregate": "count"} + } + } + ] +} diff --git a/site/_data/examples.json b/site/_data/examples.json index dd8a0d65d5..093515eaca 100644 --- a/site/_data/examples.json +++ b/site/_data/examples.json @@ -791,6 +791,10 @@ "name": "interactive_bar_select_highlight", "title": "Bar Chart with Highlighting on Hover and Selection on Click" }, + { + "name": "interactive_histogram_full_height_hover", + "title": "Histogram with Full-Height Hover Targets for Tooltip" + }, { "name": "interactive_legend", "title": "Interactive Legend"