Hack faceted vega specs to build fake faceted view in a single plot about datamations HOT 16 CLOSED

@jhofman that's the new issue we talked about

from datamations.

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.

from datamations.

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 ( might be some field to force to render on svg, otherwise need to switch to old version )
• 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.

from datamations.

@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?

from datamations.

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?

from datamations.

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

from datamations.

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

from datamations.

Accessing internal scale:

from datamations.

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

from datamations.

@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!

from datamations.

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

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

from datamations.

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

from datamations.

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.

from datamations.

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

from datamations.

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

from datamations.

@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?

from datamations.