search

animint / animint2

Animated interactive grammar of graphics
https://animint.github.io/animint2/
61 stars 20 forks source link

layout ggplots in a table #115

Open tdhock opened 9 months ago

tdhock commented 9 months ago

currently ggplots appear one after another in the rendered HTML code, and the visual layout is determined interactively, by resizing/zooming the window. layout here means how to arrange the ggplots in a grid (is plot 3 to the right of plot 2, or below plot 1?) would be nice if we could implement some simple method for defining the layout. for example below plots are in a 2x2 table, plot1 is on the first/left column, spanning both rows; plot2 is on the second/right column, first row; plot3 is on the second/right column, second row.

animint(
  plot1=ggplot()+theme_animint(row=1, col=1, rowspan=2)),
  plot2=ggplot()+theme_animint(row=1, col=2),
  plot3=ggplot()+theme_animint(row=2, col=2))
Tushar98644 commented 6 months ago

currently ggplots appear one after another in the rendered HTML code, and the visual layout is determined interactively, by resizing/zooming the window. layout here means how to arrange the ggplots in a grid (is plot 3 to the right of plot 2, or below plot 1?) would be nice if we could implement some simple method for defining the layout. for example below plots are in a 2x2 table, plot1 is on the first/left column, spanning both rows; plot2 is on the second/right column, first row; plot3 is on the second/right column, second row.

animint(
  plot1=ggplot()+theme_animint(row=1, col=1, rowspan=2)),
  plot2=ggplot()+theme_animint(row=1, col=2),
  plot3=ggplot()+theme_animint(row=2, col=2))

I would greatly appreciate it if you could guide me on how the output HTML and JavaScript are presently generated, as well as which specific files I should refer to for this information. I intend to include the resolution to this issue in my proposal.

tdhock commented 6 months ago

https://github.com/animint/animint2/blob/master/inst/htmljs/animint.js#L148 selects an element in which the plots will be added

https://github.com/animint/animint2/blob/master/inst/htmljs/animint.js#L221 adds a table which will contain a new plot, one after the other, so this is one of the lines that needs to be modified