Hack faceted vega specs to build fake faceted view in a single plot

[giorgi-ghviniashvili]

@jhofman that's the new issue we talked about

[jhofman]

Ideally this could take as input a vegalite spec with a facet specification, then convert it on the javascript side to a vegalite spec with only one set of axes that fakes the facets. this could be done by reading off pixel locations from the original spec that never gets shown to the user, just gets used to read off pixel coordinates and create new x/y data for the gemini-compatible spec.

There's the issue of how to label the facets---either by making the axes continuous and the labels as annotations on top of them, or as a discrete scale with the facet labels as axis labels and the x/y points made to fit in the right way.

[giorgi-ghviniashvili]

@jhofman I think @sharlagelfand has done it on R side to fake the facets, can we ask her to either show the code or describe what exact was done?

[jhofman]

sure, although i think the way this is done in R is very R-specific, by reading off of a ggplot object.

i imagine this would be different in vegalite. my best guess would be this, unless there's a cleaner way: create an invisible div, use vegalite to render the faceted spec there. then select that div and pull out the x/y coordinates of all of the points that were rendered. make a new dataset out of that, and a new non-faceted spec containing that dataset. then render that using gemini.

make sense?

[giorgi-ghviniashvili]

Yes, that makes sense.

Couple of issues:

• div thing is irrelevant here, because everything is drawn either on svg (parsable) or canvas (non-parsable)
• new version of vega-lite draws everything on rather than on
• parsing svg will involve to parse path and g elements properties, so I am first trying to access its internal data where data is saved rather than parsing svg.

[giorgi-ghviniashvili]

vegaEmbed("#vis", spec, {renderer: "svg"}) - draws on svg.

[giorgi-ghviniashvili]

https://github.com/vega/vega-view#view_data - interesting method

[giorgi-ghviniashvili]

Accessing internal scale:

[giorgi-ghviniashvili]

hey @jhofman , I managed to hack faceted view and create non faceted view.

Demo

Some notes:

• I managed to get coordinates from its own internal functions instead of parsing svg
• I needed to traverse coords, so coordinate 0 will become height - 0, otherwise it would be flipped vertically
• I still need to manage to add annotations

[giorgi-ghviniashvili]

@jhofman then I applied same code to colored facet and got this. Pretty impressed. I am going to add annotations and then try to animation it with gemini!

[giorgi-ghviniashvili]

Perfect! added labels as well with some extra padding around groups:

Used same technique from @sharlagelfand 's comment in #25 .

[giorgi-ghviniashvili]

Hi @jhofman , here is the original work-degree animation with fake facets: https://rawcdn.githack.com/jhofman/datamations/gio/d3/sandbox/vega-gemini/work-degree/facets.html?version=0.2

[giorgi-ghviniashvili]

Even with gemini recommendations it has some weird errors... Or does not correctly show axis on animation while drawing with vega is ok with axis and stuff.

[jhofman]

Just linking to #33. Next up is to debug the axis annotations not showing up for the last two frames of the work-degree animation (distribution and mean).

[jhofman]

Also linking this to #23, see there for more.

[jhofman]

@giorgi-ghviniashvili: noticed that when we have a nominal or ordinal variable on the x axis with fake facets, the x axis isn't "centered".

so for instance, with the penguins data and sex on the x axis, the x axis goes from 0 to 3, and since the x data goes from 1 to 3, everything looks like it's shifted to the right a bit in the facet instead of centered in the facet.

can you adjust this so that things are centered horizontally within the facets? for instance in this case, maybe the x axis goes from 0.5 to 3.5?