Google Charts -- radar -- image in area?

[John Freebury]

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! 

[Daniel LaLiberte]

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.

--
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.

--

Daniel LaLiberte

dlaliberte@Google.com   Cambridge MA

[John Freebury]

That does look like an interesting challenge indeed.  I'll post my progress here. 

Much Thanks!