tdhock / animint

animated and interactive web graphics
146 stars 37 forks source link

stat_smooth is animint #15

Open manamiCE opened 10 years ago

manamiCE commented 10 years ago

Hi there,

I am using animint library as I need interactive graphs over ggplot2 graphs. I find animint very useful for this.

However I have a requirement where I need to use stat_smooth with method = "loess".

Like the following code in R draws a nice line. Is it possible to do the same in animint? c <- ggplot(mtcars, aes(qsec, wt)) c + stat_smooth(method = "loess")+geom_point()

Please let me know if this is possible and if yes then how I should structure the code.

Many Thanks, Manami.

tdhock commented 10 years ago

In the short term, yes it is currently possible to make an animint with a smooth line and error bands, but you have to use geom_line and geom_ribbon.

There is no conceptual reason why animint would be incapable of rendering the stat_smooth, but we haven't got around to writing that code yet, since the same plot can already be accomplished using geom_line and geom_ribbon.

Implementing geom_smooth should not be so difficult. Already I checked your example https://github.com/tdhock/animint/blob/geom_smooth/inst/examples/smooth.R and animint does generate a geom1_smooth_smooth_chunk1.tsv file:

x    y    ymin    ymax    se    group
0.0454545454545454    0.53012810882453    0.252862798701174
0.807393418947886    0.5820726076878    1
0.0569620253164557    0.507671596740831    0.257091411581039
0.758251781900623    0.526051606477422    1
0.0684695051783659    0.486751729865519    0.259519525273761
0.713983934457276    0.477036387345128    1
0.0799769850402762    0.467403711079403    0.260135611721813
0.674671810436992    0.435125054158023    1

You would have to add "smooth" to the JavaScript code https://github.com/tdhock/animint/blob/geom_smooth/inst/htmljs/animint.js#L495

I would be more than happy to accept a pull request!

On Fri, Aug 1, 2014 at 7:00 AM, manamiCE notifications@github.com wrote:

Hi there,

I am using animint library as I need interactive graphs over ggplot2 graphs. I find animint very useful for this.

However I have a requirement where I need to use stat_smooth with method = "loess".

Like the following code in R draws a nice line. Is it possible to do the same in animint? c <- ggplot(mtcars, aes(qsec, wt)) c + stat_smooth(method = "loess")+geom_point()

Please let me know if this is possible and if yes then how I should structure the code.

Many Thanks, Manami.

— Reply to this email directly or view it on GitHub https://github.com/tdhock/animint/issues/15.

manamiCE commented 10 years ago

Hi there,

Thanks for your quick response. That was very helpful. Yes , I tried geom_line and geom_ribbon but I needed the loess method. I will try to implement the stat_smooth with the loess method and other methods if possible.

Thanks a lot, Manami.

tdhock commented 10 years ago

Great to hear that you will try to implement stat_smooth! In fact all the stat_smooth methods should be supported after you just add support in the JavaScript code. The main part you will have to change is here

https://github.com/tdhock/animint/blob/geom_smooth/inst/htmljs/animint.js#L582-593

where the code assumes that the geom wants to draw either a line OR a ribbon. For the case of stat_smooth you will want to draw both. So then you will have to store two of these D3 lineThing objects, and then have two different eActions functions (first for the ribbon paths, then for the line paths).

Finally you will have to change the code at the end of draw_geom. Instead of calling eActions once, you will have to call it twice (once for the line paths, one for the ribbon paths).

https://github.com/tdhock/animint/blob/geom_smooth/inst/htmljs/animint.js#L994

https://github.com/tdhock/animint/blob/geom_smooth/inst/htmljs/animint.js#L998

The major reason why this is so complicated is because the JavaScript code assumes that each geom only needs to draw 1 thing (circle, path, rect, etc) but to render the geom_smooth we need 2 things (the line path and the ribbon path).

manamiCE commented 10 years ago

Hi, After adding the g_info.geom == "smooth" , it was giving the curve that I wanted for the loess. So for my work I just wanted the fill to be transparent (i.e in R stat_smooth if you give stat_smooth(method = "loess",fill=NA)), it works nice.I have attached a screenshot that I got from animint library after the change(in javascript making it transparent for smooth). screen shot 2014-08-05 at 1 56 04 pm But I will try it in a proper way like you have explained.

tdhock commented 10 years ago

That is great work! Even if you do not implement the ribbon drawing, please submit a pull request!

manamiCE commented 10 years ago

Thanks. Yes I will do. But I am trying to get the different methods and after that I will push the code.

tdhock commented 10 years ago

Great thanks! And before you submit your PR please run the tests to make sure they still render properly:

https://github.com/tdhock/animint/wiki/Testing#running-tests

cpsievert commented 9 years ago

This would be nice to have. Since I recently did something similar for plotly, I'll put this on my todo list.