That does look like an interesting challenge indeed. I'll post my progress here. Much Thanks!
On Saturday, 12 December 2020 at 20:14:25 UTC-7 Daniel LaLiberte wrote: > Hi John, > > There is a potential solution involving use of blends to implement > masking. See the issue that started it: > https://github.com/vega/vega/issues/2311 > > The change that added blends: > https://github.com/vega/vega/pull/2422 > > The mark documentation - look for the blend color property. > https://vega.github.io/vega-lite/docs/mark.html > > How css blend modes might be used to implement masking of an image. > https://codepen.io/jonnyscholes/post/css-blend-modes > > Also, how to draw an image in Vega: > https://vega.github.io/vega/docs/marks/image/ > https://css-tricks.com/almanac/properties/m/mask-image/ > ... > > There is still a lot to figure out to put all this together, but it seems > possible. > > > On Sat, Dec 12, 2020 at 9:03 PM John Freebury <john.f...@gmail.com> wrote: > >> Hi All , >> I am creating a radar chart and need it to have an image in the area of >> the chart, replacing a solid fill. >> Looking at the Radar chart script here -- >> https://developers.google.com/chart/interactive/docs/gallery/vegachart#radar-chart-example >> >> -- I wonder whether it is possible. Can the "marks" properties be adjusted >> to insert an image, perhaps working with the transparency? Attached is a >> sample. >> >> Here's a snippet from that script: >> ... >> "marks": [ >> { >> "type": "group", >> "name": "categories", >> "zindex": 1, >> "from": { >> "facet": {"data": "table", "name": "facet", "groupby": >> ["category"]} >> }, >> "marks": [ >> { >> "type": "line", >> "name": "category-line", >> "from": {"data": "facet"}, >> "encode": { >> "enter": { >> "interpolate": {"value": "linear-closed"}, >> "x": {"signal": "scale('radial', datum.value) * >> cos(scale('angular', datum.key))"}, >> "y": {"signal": "scale('radial', datum.value) * >> sin(scale('angular', datum.key))"}, >> "stroke": {"value": color}, >> "strokeWidth": {"value": 1.5}, >> >> * "fill": {"value": color}, >> "fillOpacity": {"value": 0.1}* >> } >> ... >> >> Any help would be most welcome. Thanks! >> >> -- >> You received this message because you are subscribed to the Google Groups >> "Google Visualization API" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to google-visualizati...@googlegroups.com. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/google-visualization-api/0f5df060-a38f-41a9-bb2f-1f3bc726507fn%40googlegroups.com >> >> <https://groups.google.com/d/msgid/google-visualization-api/0f5df060-a38f-41a9-bb2f-1f3bc726507fn%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> > > > -- > Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> > dlalibe...@google.com Cambridge MA > > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/d4dd73fd-e9f6-471a-a567-41a25ea9e191n%40googlegroups.com.
