From d2699a10dff8e6d59fee9ee219a03b0a2a89cfc7 Mon Sep 17 00:00:00 2001 From: Dominik Moritz Date: Thu, 11 Aug 2022 19:21:56 -0400 Subject: [PATCH] docs: add heat lane example (#8353) * Added heat lane example * Add "as" key to aggregate op * Remove "color": "black" as it's not used * Empty-Commit for CI * chore: update TOC [CI] * chore: update examples [CI] Co-authored-by: Jon Mease Co-authored-by: Jon Mease Co-authored-by: GitHub Actions Bot --- examples/compiled/bar_heatlane.png | Bin 0 -> 10810 bytes examples/compiled/bar_heatlane.svg | 1 + examples/compiled/bar_heatlane.vg.json | 150 ++++++++++++++++++ examples/specs/bar_heatlane.vl.json | 68 ++++++++ .../bar_heatlane_normalized.vl.json | 70 ++++++++ site/_data/examples.json | 4 + 6 files changed, 293 insertions(+) create mode 100644 examples/compiled/bar_heatlane.png create mode 100644 examples/compiled/bar_heatlane.svg create mode 100644 examples/compiled/bar_heatlane.vg.json create mode 100644 examples/specs/bar_heatlane.vl.json create mode 100644 examples/specs/normalized/bar_heatlane_normalized.vl.json diff --git a/examples/compiled/bar_heatlane.png b/examples/compiled/bar_heatlane.png new file mode 100644 index 0000000000000000000000000000000000000000..779a28f8d2d0bb633bb2cb84f3c767ff823132e5 GIT binary patch literal 10810 zcmbVyby!v1xAmrxE&=Hj5G6!X+9M&2pa{|>DAL^_Ap(MeC<4+U2%>~^gHqBdT}n$z z-g$iQ{oVZM`}BFl=dkzLYpp%!9Al0#BQ(_&i3#Wk5CkDsRzhhb2u3gbzZV}D{(bQ| zoF9JRnyDzFkTdk(cQrXL5QGI$M#<@Tyj}a@eP74*5O1^R!unlPGAitwa(t75E^=CO z*Hm8&T)ol|lrUgC$*p#`e{C_;;LYnQ&WEv;R*SX-HhDaYQasynqVwr&_~|Txn3&rq zCo_?~%D7<>;zS3Ybw;%=wa$x@J+G}Ld)^8OO|hS2#SRY-&uySmOGe1awVYcn-a?@= zxkR+s*w~~#Mo^HG|BO(3sf1Vl_(!92j}%^(_BrJ^0h9WGZ1srnXGqcmLNYQkL^+O( zk+D#aiJBT0e(SZftPmsaG_Rx-7h=<&{WICv`S(|@)amy{wLuXP=O(>3q*PNR@2!-m zX_2zo(q+S=wVWN+C&ZEZcXGi3?&}j5yKyU=mq%`)q#P5+*hx!S`tV~Ntv3PW6{&oyZr3KVfNX?(7ALTdFQ>q zey}%gkAd*sDG1%8dP2`s;#X}_u0<%i`yEV zk=IX74{z_Lu`xPnX=#sz_`90-?-Nb0lh0eH`r;xZpKT~PlpA02+}@d-3~jFUA3r=kuK7obTZd210fId_!|HHo+6jCr_Rr0n^hau*evhQ@x^z^{K~f8EmEn)p+kyJ1=&U+t;1!-Pn$N z`ZRz0G^~YEKD^9soB(O;>{L}vl{O3s3nN4t8ye&$DqU5U?2atjp?% zR`pJwO1fc{8)m>khw&+!t*veIw|L&0`|Ce&keQ7Q{>9GM>>~D)6WqHVdaFm}hH0AN z&!3Z#GcsP8^x0O!kQKXrJ@Sk5(o-Bl>hRtS#Ympp+1GN1N>|E0ek8ZA-U;~ud80H%+4l2(5E-suOV|@F`9uK-V^Dg;iiSLB zvX7=}4Lje8--d%Dw6?b1`o>!nzEO8(gpjSTuX`=How-q7pik+xlS@xeXIZZm3?jo! zOG~5MhikEr{P*u?78Y=_v?E|o6o}@%dl3Z%mtn`%N9$F~-_x*ERaM{VT>9v?rjN+V z$;o9bO?>x|^4dWVF)^{+wr}6Qxr~)n4oG(o4N)^nxFCqj%FtTi(Qev9DVHcIi*~Zz zIy@4F@QMmCDr#!8-}7Jb2?*p@h6+ELG+;)x{W|nPhs?=_da?ut!e?At;2eD;j06Wc zKA4LcsdDGXg?r_Kaao0h&&!-1WGI{xcdebSUA!uCY}U)3>85D&_;GYsl4uhY2Vdix zH*qE=CZ4~2`|M^Ubpxa>@7)imwrIw!UPb0S8LUD}Gc(NTbsDKtBEz}CtHL!$ak|{s zrp|tr*tzEU-oJP60xaO!-rD%w&d+|*3446vC_78bEXV7Dg5=Ep$AaB&#e;uTxts5; zj(Y6>a2I?yRDdhP+!n)(=diEV6+y{`AWTe55=&yR>jM2!g0Ek{ius>PnwgukDpQEq zjfMRBWxIQIUq)eg;s%9c0NZVwe|W&buc-*!ZfVlV6A-0VQcp0 zTM5@&HBDISBKd?gd?r)1zN7^m{r!|kvFEl`;+r?KAKRF2JbLt~W~ScUV42$ZT&2s;AR+5+mdlrkOifJ>PLDP)5Z|M{o3gU9!Ok{H-G{BxUOU{g zv$JG$bWb72^XZe4lNk#N3+a!23hsZQ`19vah1c$-?i49PN=nM+*4Dgo`vh|3dSJ|$kYd|Kf+7wUDvSDJD#i>b2tbgqn$6?NxM0`4?F!`H8wtjAt1#osfH-}WN!;Y*u_+!B zufoHXG$biF|MRmER780APNr)Kj$MByIXStM>e^216~h`KYN<;anB?TbDG5$wWo9h| zP<;uDYWCiEee0F!J6xN9yhTH|ZE-@Mj4c;C4?llcR+eRQ$EFZ`dR6~ue?#%X18xQe z1`})RFi6N<-zv8?c?So9M|O5I>+8|VFD~ZsQ>Vtpra68*fLK+E!v>T@>UUR$;mu08 zt%m2_&T0Jm^<1)qYh#L(H-aQzcUSQ9lMbk&k$cXO*L^I8Aw^DpA!}#Hg@|5+2odl< z^{J?=WaHw(Lmc*2?>%D>rvNn6t90RsW)Kf*Zbm`PHJxjX`sF%c6+9v-^88GUZp_c~fyaL%1O2Y?IFtDvBO zi%dswrD&!$G74Ee8|we^C_VF4^{h5WRtjpbG)Z6}^KKkRT1F(6S)*5dS8q3qV0f=iIy*IQ-|l}W_9%V81c$SHa|bU;)2XU&`XfnlU65Vd)y=L| z>+jj|Q4MqCv0Jo)X4s28sWE5AOEQ|5;vWouV03bF+8i>lH$B*#Nffnbii?Yz{`oT^ zLop`3q=ceJa+^q1O>Jgz5%=N4hi}E56?{X+G}YDB+k1N2!kGQS0|JoUyoIB!$eRNu z#*C8eDp-ZC+jnq87$n#YB-yT#0Dl3@xQ>a1wKWsQ%qA_(%tO}j1@iyO_ZrI%3ZVEX^S!~%seemZGD+dR5FfOq?&?Ne5KapOm?9Ki0#M3|O zZ!2_6Hua)K67(2^X<7Z4aAR(w21X<$C8uW`-OmAW(8u(ZWR)A>Q~WcE&T4$M4<)}(SQO;i;aWB%Fj=_HdcCj zYH4OBaAM+q%}@t>uhpW76%*Cs@A$%kO58BMdA4*##ZfZ~a^dXRSu@G~3Fm|Tx-((} zgK-5z(WD1Lx6SP^oF5Y2Gf(+e)c~j3rS0h{t`J4{3lw<_2TU(Eox$AADc_t;=S5u|9bNj%(S1V%v4PUG(>>xL5pOb} zws?4X<#Xw2=IOi*NO@q@r=FQo%b`*L>G)iLl?W~^X=YDv)zZ`qD5^aq*r+|?JKZa< z!$6{$WxCHT|Lk>>-Uxj}{CVh`VWr{l^YCYF1@}Iov$SDgXHwAo@ngP;A3p}m#WAF$ zocua#309)*ETcTth901Hth2JS<fSU@!Z^>AB^Ojt)V`S(Li026S#}nwrlKMbiwo1RyqHq5o0jL>+xg|A@*Vw9r-~N|&Or)mj_K1`oSCaZf$H$+>-a)za92ta{-XNH2K}MLyr1IX%Y({LafstzzdlDw zN?Ls|8+ouhY)no?6$0nR&d;x5{ze9V!65CUS40cJ)ips(dEN(0qMd#_`qq#K>M-}i zht`kgZRly=UC(MDa2wC~|HeIi&bTRQdEA3qpBeE6_DRVM>+4zxRXt}Uji zt1F7~J0&^!U>g)rU?Z(xUvOa{*WK4q&@BIj!C1bbf_uRLv(T5kgRV^P^8@m~FQ)Hi z43pF*(0eHX2sFU@H?%QmFneH=6w$8tKQkd+#^!94f#d9Lbb5(Xa7*zup_}hs@uuUt zg}sh&tlcln*P5w2QlDAse4m?}FQUhgRd}8a%U7U&s>wvK-2>ZquSUIt(bGmRc`nuO zkOvK=Z{E7S)UXBeCc8Jz!V?b ziEV6wpsVA*Qt7w!{=hLlD@%wh)Fz-$4o7=-6<@wMLPDF*jJI5nHhgOt^~b=E)#rYE zNvls{Kh7{Y`PjXo#JGaqTygD7@g5sB`_prCSSl(iAt50qt0Nyr%IxU>KGp86on_3u ztgE$Or{3#a`fL}p6qG9s-ILO-TaD09elN2#kUTry*8Aeb38_ne<=^X*3q-bP!rL_l^Yt zI*nwjCAI#&%SF(-o1ycy&{Ck|-?SWP_TYfpsh~0ri5T=xBF@G>z|y@l%p$dc`|VOb zz|~+cHKTrcP_yw1O5sGZ`m7bs3jO<5#k6G!R-2B_K~M4`hAf|cyYxKPID{@b^v7`hr;Stg=7&qy9cQ%z z8_dPW^voOwOhOK%#K=$oBa10QZQhkq#f8w|y0)$61Tj|>Wvv!@)$PYa{2YxRNVH|7 zr=w5cv)wp#j(W0o%)_LB+BC}kZI=(xeszWs!$Zd`9fTA}wDIM7nObpfmCNY~X1$BS zCD$|&?poczdk@_+J|9Q79_+UX#eUw;Y@p{xazkYMCSQy=N~)N@J$mnbdN^EXcC@!f zXMQQ3fbybh{Ttzj4!`G>AN{CA*M$KIBW9+EU&|Ki821^j%*^JV3@Dp-)Og-5(?ea6 zGy1CL@ny7wZo7HGC*+{)?$qh7cFL+aL)FX3aHHgb@-KCjT-UBqUAS<8&U{}(mQ+>> zqb5FHH+gQ?@W&H19Yss`Z-ShCMS1-!>0Z@hod$b}mhRVz*vE%jh;ARx|F}yvkvmY) zb)tLXja~7K&ikD9x1hyJPjz0>LGe z?ddV=nf`eZ=Jo{PFhA*aI@o<2DctB)W*^y@6n}8yw$McLn4`(d^DA{^F6V=#>CO6P ztWXPkyTFvSaocA&E)Gp&HP#j#7)UmWU5;ZF=UUO{E|kUPgV(vys|B4~axP*FcJqI> zocMc04#t=LN}Abhc^0GAV~kSlEFu;jm`9MNH*segLycrfisu2i3DrNPL1m3m1;Tp zbCQbm;+6;q%kA&+sU_o*+psDJFHSgNq|6HP@|Zx% zGT>u06&Wyl5*mu`3e7vA5MbevU?UY374Io-VT zir;uh>}nz5-wU(>KL!1cJ{Zm+6QY$aMn<}?w2HmpQcJPvirze_}0oE)4 zK0EPpUk*0)yH#Ykw5N7-)K;0uL)FfIZDJnR)f44Eu0fn>hv^l6OLs{Os%Kp9AE77h zwQjeE5^o!Aa6XhYbg}EFvo9Fseb}kaM^b;gB$UGoN#gEJ6|i}LEPhalzha~(s&P

%bvzE^3U(@iW^T^W7zD3$S)9zXr;>lXyDy4;N{54np3#2Q| zMT-Jxx!-)zWOnCZmgaicDZt$Q9fb|_SnHGMe+2J^(^->$q8GLE%VJXx)rA3|tsn63 zk!mqdlcr#q$ouvUH;0RxZewq2AIl1tZ8UtbK7Ljq=b=}Xuqz$pKblkgtNZ__)BkTB z(7#l7^fr!@fiadXUd*l4<$0*u)PsjYbrGXkWUxe~+2|R`H@Z(RB7+OI!rKqFT=;}l zY9FiPuPpLB?0gl5+fEk~{){;Wl{c!tH>-Kudc4`Ke{?$K|Lb2^u=gs`rcbwEjd&&gc<~lvGuqp z!FiSt$N2_^b-_@{#3rfM=XlN)ZM44yLK)^8|BnZ#g1+7*TKZ$O*4JCyS#XR2nQIRg zpD-u#6bSQv#!9;A5F>L~%WTCGlrmL&2W&j%6y8fdIW5W9`*Ig-O8mt1K@%#?+?d0fM+uKVXFtY+J zWgtlVCQIGP=+?4A!+@BsN(8M3MKfMU>%FkN_rsnihps*+yTcrjcixU^%oUDa=_=$*P@p0kBfaT_8Qoy!wX1H zXS-}%%K)l7Y!PAE@cTM4aP)c^$ftl=Gk)Uh*QQ_NI6?i&YoNGS{+JPT9urg3z?Uzn zB)6I=5rh>xl$1FdfQpr!9ZN%UE2M$1M)!R|0TFrMlY+}FmQh)#N7fyP0MG@Tgt-iZOV$_(rRv~zds)~)9W3AnP8UT`%N$j_)G z5j%(F@2qJ3FTnIy?|0vqtiM3BeF};JTEuK=X#vNIw4|iub2JulQCQiqM7;VNo%^ivy)_<+}1=`dP549UpIkVth~8;byu1>72Nk<36x!i}s0Jr(+xX1vyg zf;RUlUoM4bv}v^`1GhCI;QicNF}1PDJ1sAxqpcLt($X@6z@YOS7^`wGg1)ehtg*Os zw8S!!R`l`PRy|M8FSG(C0eU4C5sBAq;>hG_t3~#QZ{V}y64P-2R9|bI|DgEjQ33QN z6d+ySyT=21`xCOzJjEOPTA{gNAR=9gzvX)rf7ghd+3z52$kF##+L|z52w4~jBL#o; zW)Q8&qr{QYhp))wCr{!8^Y@i@=D)rGc>o*v{P+i*h=>SCgQ7}8ce&TI;CVsNmCEMn z*v=zp>AwXe7@{~V2lpf)A)&#I2Z2>Nq8!RWNlEm`JB?In&|51SoRrkmZlX}wXwPDP z-a_Z@-S^Hf-ZKRT2BIUM`m$a?9S9O+@+P37l?-Pjl+m>tCLI~)fYF5lNf~K3phuLH zlw|MUXV5RT&0>1-NkmsyS4lY@Xoksp~qtGnuR;BeWfnpWi%-%Yrfn(sb- zy}<5+Wpt8(LL0}CXK!5XK@JI}-?p2Fjtf^;;l=Lc$dC~1sD%Z;HTop4qz8_Ug5ZJ< zl&`I=InK2b2Vdj}sRw6Pzu#WZ(N%%Xgm2lD7!v3aEY6{ z-oU;lOS*-}+K%sjML;kfDchw>x6JQ%kAcU9R(`Y>o zMlHNa*Px{=bY8-Ach9UlJFPn01DlTo+>+pnI!EeGKtK@$j685@cTYGuIlU()9c$zP)&x7{Tb!)fkQ%LPgpWEw^CHs z3eH+=Vj?~Q{s}?t@o$xTD~@%QWrh$;jG~z(C0Ef24Op~1RG2h$Or)EHw%xkAh|$tE z*qvy((FE#!$xthlaZ5|fgZUR4-}7#B5iv>9IyyRrKYRAFlnE52CJ5gxF#IyIvvI*e zgZ+let)#6;f9ve*G}%4)nUg92;{NJnjls!6c4h1C$=O!haK){xM(>T9u-8J?W?Qo@ z?ccsNf`<7W)SQbyDO)oq*?Zx{r@=SCb=bew1riOD2Tfn%>28t#OnWT5-Y2W5!K&3&@!>Kox2h^x||P4bFCacQJHYj0QLrXqMWT7m;8LAT*W*AEi+CP45UM06{S zu@449D`Z84OGFz0!cS+46#d1E7b{#>sO4|mAdU;JtCIm=3uEGhdZNU#V{`0b5e8!9 zy(WxSur*{(uAv1Zhyr>JJS03avMHRL-2@z0Kps%Qh+(e@rA$p>q;2UpBfoeVhqzwE31nXl$3%1r&0axslIy` z`uh6N;EK;mq)l(Pn+Pt2k;e=UTIf0G@jpfDZ=)+)okBe(;0U1wDiQ`U#NXc^Y$>`- zro+_?x+*46?Bt=^fpzJ)IW5N^=|NWGwJQ&$YK38Ayxcx`1*)%+_dM}L&9`9)j_HL3 z&K19}w1Y?2wZK9L9>)TB4UR-}a|9)Ef)W^F;IW~VEh-wCjEV|csGG&*1@+hHI?XB^4 zkGgFsEG!I_B(ScouE92=kO>0=V|nBwd&#FyFtSl79m#Gj6%-siv$7Hi_FcMlPYPP- z1jCA0J0^5JgGeg|hC?Q*Jt@n|%6>6`gM>v&8Y9tGQ&U5KpVY2s>*&W9XFMtIy%6oZ zm#%dd&&15Z@{CRSM?(GYocO=aCFM;{MNnLbgsq!`W3&9DN;H&&kzjf~E49pi3azF{ zZg&c)y=5hrdJ5`W7uv3b*`oU#TwL$l{QfM^bS7V?0qXg&CSg$yu5_; zqK{E}dbEdoYmtDqyHt-sZYJ%TIbDm0iLsAcN?wi~w4gC%w+(Qg^i)L18X6kdSXt#b zI5@(g*byMJFkS`oB_Hj^MNIANu3Wx+84beNNNnTSBNBYYG)-;@?+{SQ?-X?m4(jf#3~P*x zj-CVc6>SJ4J8kXmo=-?f0CQU&a9j@|>+S7@u^BjmkS|}pKu-7bgdLTKh0nuiS(m&W zW#Nj39px_Egfyq!2t%9aU~fKyIix~;&X9^>6b!uZez|s~NEzU>HbXOjgX})(WKQTfJDEB= zhnT_Ogc+Et>0lS9L&(hj8hkGw$06u2Et~9I;qM);WOS_h@=ZM0+wv2>+hNcj>{gIr zLTQI&Ko2ot!i*ag754P{uIPrSRVOWsUckf=)kgI;2~2^3RZ0SH6ZB{nko)BEEi5c# z<2W*Na^_wc`vt;WS!*=od&jLgD9pCU$;ruuxA|sfW{`EiA#bQRoo|E*VQ8okv`&!4 zJv=J9#V6{dP#pXsTDIiC%;0{QWb-@x$%W7A0NoT407G4^CHoqf0F}`|W2va9ror`S zgVh(CHsMC?)_`w*00^)JpR$XHP{&B^B_3{}$7fon0O0y~UKJM$K*z=cb1k5c!#q`B zQc}`k&?c-(Vu@uK=R)|hoX^UwE3I*yDgth+dQdFTw*TECqnmYpCuHZ(XYC5!2qlsO z*9vV3gHP22Lu)68yI6?N!AzLP;m;g$m?wdpLtFoF+n`v9l*2TFzIbK0sHv}y0=k?* z9vUE7JL^B_p%TLQ1m4SAoIsI7Kx}X7?j`}QIw+3EW-9?b`eg__QkYAVb8sm3Du9{3 zL?LSu2r^`%2KN`VSD*c^ySG1Qg}Fd2Vd(og^i;}3ISWtvmU$V%n5`@XObu>M5ElsWDN!ay^uWU(lbAQ z=GA_8@f9B^MZX{;f+!_YG<|t`p0^kp-)GD+wR!!l=@%Q>wb-OKxu1t4|2UmdQ~z7_ b**Saq#Obn{+|e`)gCfc|)lnbhO@jUn$!x9M literal 0 HcmV?d00001 diff --git a/examples/compiled/bar_heatlane.svg b/examples/compiled/bar_heatlane.svg new file mode 100644 index 0000000000..b72c127fcb --- /dev/null +++ b/examples/compiled/bar_heatlane.svg @@ -0,0 +1 @@ +020406080100120140160180200220240Horsepower20406080100120countHeat Lane of Horsepower \ No newline at end of file diff --git a/examples/compiled/bar_heatlane.vg.json b/examples/compiled/bar_heatlane.vg.json new file mode 100644 index 0000000000..910871071b --- /dev/null +++ b/examples/compiled/bar_heatlane.vg.json @@ -0,0 +1,150 @@ +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "Heat lane chart based on https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/", + "background": "white", + "padding": 5, + "width": 400, + "height": 150, + "title": {"text": "Heat Lane of Horsepower", "frame": "group"}, + "style": "cell", + "data": [ + { + "name": "source_0", + "url": "data/cars.json", + "format": {"type": "json"}, + "transform": [ + { + "type": "extent", + "field": "Horsepower", + "signal": "bin_maxbins_10_Horsepower_extent" + }, + { + "type": "bin", + "field": "Horsepower", + "as": ["bin_Horsepower_start", "bin_Horsepower_end"], + "signal": "bin_maxbins_10_Horsepower_bins", + "extent": {"signal": "bin_maxbins_10_Horsepower_extent"}, + "maxbins": 10 + }, + { + "type": "aggregate", + "groupby": ["bin_Horsepower_start", "bin_Horsepower_end"], + "ops": ["count"], + "fields": [null], + "as": ["count"] + }, + { + "type": "extent", + "field": "count", + "signal": "bin_maxbins_10_count_extent" + }, + { + "type": "bin", + "field": "count", + "as": ["bin_count_start", "bin_count_end"], + "signal": "bin_maxbins_10_count_bins", + "extent": {"signal": "bin_maxbins_10_count_extent"}, + "maxbins": 10 + }, + {"type": "formula", "expr": "-datum.bin_count_end/2", "as": "y2"}, + {"type": "formula", "expr": "datum.bin_count_end/2", "as": "y"}, + { + "type": "joinaggregate", + "as": ["max_bin_count_end"], + "ops": ["max"], + "fields": ["bin_count_end"] + }, + { + "type": "filter", + "expr": "isValid(datum[\"bin_Horsepower_start\"]) && isFinite(+datum[\"bin_Horsepower_start\"])" + } + ] + } + ], + "marks": [ + { + "name": "layer_0_marks", + "type": "rect", + "style": ["bar"], + "from": {"data": "source_0"}, + "encode": { + "update": { + "cornerRadius": {"value": 3}, + "fill": {"scale": "color", "field": "max_bin_count_end"}, + "ariaRoleDescription": {"value": "bar"}, + "description": { + "signal": "\"Horsepower: \" + (format(datum[\"bin_Horsepower_start\"], \"\")) + \"; y: \" + (isValid(datum[\"y\"]) ? datum[\"y\"] : \"\"+datum[\"y\"]) + \"; bin_Horsepower_end: \" + (format(datum[\"bin_Horsepower_end\"], \"\")) + \"; y2: \" + (isValid(datum[\"y2\"]) ? datum[\"y2\"] : \"\"+datum[\"y2\"]) + \"; count: \" + (isValid(datum[\"max_bin_count_end\"]) ? datum[\"max_bin_count_end\"] : \"\"+datum[\"max_bin_count_end\"])" + }, + "x": {"scale": "x", "field": "bin_Horsepower_start", "offset": 2}, + "x2": {"scale": "x", "field": "bin_Horsepower_end", "offset": -2}, + "y": {"scale": "y", "field": "y", "band": 0.5}, + "y2": {"scale": "y", "field": "y2", "band": 0.5} + } + } + }, + { + "name": "layer_1_marks", + "type": "rect", + "style": ["bar"], + "from": {"data": "source_0"}, + "encode": { + "update": { + "fill": {"scale": "color", "field": "bin_count_end"}, + "ariaRoleDescription": {"value": "bar"}, + "description": { + "signal": "\"Horsepower: \" + (format(datum[\"bin_Horsepower_start\"], \"\")) + \"; y: \" + (isValid(datum[\"y\"]) ? datum[\"y\"] : \"\"+datum[\"y\"]) + \"; bin_Horsepower_end: \" + (format(datum[\"bin_Horsepower_end\"], \"\")) + \"; y2: \" + (isValid(datum[\"y2\"]) ? datum[\"y2\"] : \"\"+datum[\"y2\"]) + \"; count: \" + (isValid(datum[\"bin_count_end\"]) ? datum[\"bin_count_end\"] : \"\"+datum[\"bin_count_end\"])" + }, + "x": {"scale": "x", "field": "bin_Horsepower_start", "offset": 2}, + "x2": {"scale": "x", "field": "bin_Horsepower_end", "offset": -2}, + "y": {"scale": "y", "field": "y", "offset": -3, "band": 0.5}, + "y2": {"scale": "y", "field": "y2", "offset": 3, "band": 0.5} + } + } + } + ], + "scales": [ + { + "name": "x", + "type": "linear", + "domain": { + "data": "source_0", + "fields": ["bin_Horsepower_start", "bin_Horsepower_end"] + }, + "range": [0, {"signal": "width"}], + "nice": true, + "zero": true + }, + { + "name": "y", + "type": "band", + "domain": {"data": "source_0", "fields": ["y", "y2"], "sort": true}, + "range": [0, {"signal": "height"}], + "paddingInner": 0.1, + "paddingOuter": 0.05 + }, + { + "name": "color", + "type": "ordinal", + "domain": { + "data": "source_0", + "fields": ["max_bin_count_end", "bin_count_end"], + "sort": true + }, + "range": {"scheme": "lighttealblue"}, + "interpolate": "hcl" + } + ], + "axes": [ + { + "scale": "x", + "orient": "bottom", + "grid": false, + "title": "Horsepower", + "labelFlush": true, + "labelOverlap": true, + "tickCount": {"signal": "ceil(width/40)"}, + "zindex": 0 + } + ], + "legends": [{"title": "count", "fill": "color", "symbolType": "square"}] +} diff --git a/examples/specs/bar_heatlane.vl.json b/examples/specs/bar_heatlane.vl.json new file mode 100644 index 0000000000..6ed9fb5a0f --- /dev/null +++ b/examples/specs/bar_heatlane.vl.json @@ -0,0 +1,68 @@ +{ + "$schema": "https://vega.github.io/schema/vega-lite/v5.json", + "description": "Heat lane chart based on https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/", + "data": {"url": "data/cars.json"}, + "height": 150, + "width": 400, + "title": "Heat Lane of Horsepower", + "transform": [ + { + "bin": true, + "field": "Horsepower", + "as": ["bin_Horsepower_start", "bin_Horsepower_end"] + }, + { + "aggregate": [{"op": "count", "as": "count"}], + "groupby": ["bin_Horsepower_start", "bin_Horsepower_end"] + }, + {"bin": true, "field": "count", "as": ["bin_count_start", "bin_count_end"]}, + {"calculate": "-datum.bin_count_end/2", "as": "y2"}, + {"calculate": "datum.bin_count_end/2", "as": "y"}, + { + "joinaggregate": [ + {"field": "bin_count_end", "op": "max", "as": "max_bin_count_end"} + ] + } + ], + "encoding": { + "x": { + "field": "bin_Horsepower_start", + "type": "quantitative", + "title": "Horsepower", + "axis": {"grid": false} + }, + "x2": {"field": "bin_Horsepower_end"}, + "y": {"field": "y", "axis": null}, + "y2": {"field": "y2"} + }, + "layer": [ + { + "mark": { + "type": "bar", + "xOffset": 2, + "x2Offset": -2, + "cornerRadius": 3 + }, + "encoding": { + "color": { + "field": "max_bin_count_end", + "type": "ordinal", + "title": "count", + "scale": {"scheme": "lighttealblue"} + } + } + }, + { + "mark": { + "type": "bar", + "xOffset": 2, + "x2Offset": -2, + "yOffset": -3, + "y2Offset": 3 + }, + "encoding": { + "color": {"field": "bin_count_end", "type": "ordinal", "title": "count"} + } + } + ] +} diff --git a/examples/specs/normalized/bar_heatlane_normalized.vl.json b/examples/specs/normalized/bar_heatlane_normalized.vl.json new file mode 100644 index 0000000000..0aa01abbdf --- /dev/null +++ b/examples/specs/normalized/bar_heatlane_normalized.vl.json @@ -0,0 +1,70 @@ +{ + "$schema": "https://vega.github.io/schema/vega-lite/v5.json", + "description": "Heat lane chart based on https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/", + "data": {"url": "data/cars.json"}, + "height": 150, + "width": 400, + "title": "Heat Lane of Horsepower", + "layer": [ + { + "mark": {"type": "bar", "xOffset": 2, "x2Offset": -2, "cornerRadius": 3}, + "encoding": { + "x": { + "field": "bin_Horsepower_start", + "type": "quantitative", + "title": "Horsepower", + "axis": {"grid": false} + }, + "x2": {"field": "bin_Horsepower_end"}, + "y": {"field": "y", "axis": null}, + "y2": {"field": "y2"}, + "color": { + "field": "max_bin_count_end", + "type": "ordinal", + "title": "count", + "scale": {"scheme": "lighttealblue"} + } + } + }, + { + "mark": { + "type": "bar", + "xOffset": 2, + "x2Offset": -2, + "yOffset": -3, + "y2Offset": 3 + }, + "encoding": { + "x": { + "field": "bin_Horsepower_start", + "type": "quantitative", + "title": "Horsepower", + "axis": {"grid": false} + }, + "x2": {"field": "bin_Horsepower_end"}, + "y": {"field": "y", "axis": null}, + "y2": {"field": "y2"}, + "color": {"field": "bin_count_end", "type": "ordinal", "title": "count"} + } + } + ], + "transform": [ + { + "bin": true, + "field": "Horsepower", + "as": ["bin_Horsepower_start", "bin_Horsepower_end"] + }, + { + "aggregate": [{"op": "count", "as": "count"}], + "groupby": ["bin_Horsepower_start", "bin_Horsepower_end"] + }, + {"bin": true, "field": "count", "as": ["bin_count_start", "bin_count_end"]}, + {"calculate": "-datum.bin_count_end/2", "as": "y2"}, + {"calculate": "datum.bin_count_end/2", "as": "y"}, + { + "joinaggregate": [ + {"field": "bin_count_end", "op": "max", "as": "max_bin_count_end"} + ] + } + ] +} \ No newline at end of file diff --git a/site/_data/examples.json b/site/_data/examples.json index 543c8f69df..b51498fe1e 100644 --- a/site/_data/examples.json +++ b/site/_data/examples.json @@ -95,6 +95,10 @@ { "name": "bar_axis_space_saving", "title": "Bar Chart with a Spacing-Saving Y-Axis" + }, + { + "name": "bar_heatlane", + "title": "Heat Lane Chart" } ], "Histograms, Density Plots, and Dot Plots": [