daattali / timevis

📅 Create interactive timeline visualizations in R
http://daattali.com/shiny/timevis-demo/
Other
652 stars 157 forks source link

Support for brushing, crosstalk or similar #95

Closed mayeulk closed 1 year ago

mayeulk commented 4 years ago

Is there a way to have interaction among plots (including one timevis) such as brushing (with crosstalk or other mechanism)? For instance such as the third example (earthquake map + plot) at https://rstudio.github.io/crosstalk/using.html ?

daattali commented 4 years ago

Crosstalk is not supported. There was some work a while ago to try to do that https://github.com/daattali/timevis/pull/19 but it never went to completion

daattali commented 3 years ago

If you have any crosstalk or just javascript experience, it would be a very welcomed addition

daattali commented 1 year ago

@mayeulk do you have a specific use case in mind, of a dataset that would work well with timevis and with another crosstalk widget?

mayeulk commented 1 year ago

Yes. Please see attached file with screenshots, of an app that could benefit from brushing / crosstalk: gnad_irnc.pdf Slides 4, 5, 6, 7, 29, 30 and 34 are made with timevis. They show events that are all related to a single non-violent action campaign (for instance: end of Milosevic's regime in Serbia, slide 4; the Orange Revolution in Ukraine in 2004, slide 34) Most of the other slides show widgets that could become use cases, for instance: slide 8, data.table of the events shown in the timeline. Use case 1: The user searches (slide 10: "police") or selects rows in datatable of slide 8 => they become highlighted in the timeline (slide 5) Use case 2: The user brushes events in timeline of slide 5 => they become highlighted or filtered (selected) in the datatable (slide 8) Use case 3: The user selects a category of nonviolent method (e.g. "Protestation et Persusasion", left side of timeline, slide 5) => they become highlighted or filtered in the datatable (slide 8) Use case 4: see list of images used in the timevis pop-ups (slide 14). The user brushes events in timeline of slide 5 => images got filtered in the list of slide 14 Use case 5: see pins on map (related to events in the timevis) on slide 19. The user brushes events in timeline of slide 5 => pins got highlighted or filtered on the map (this allows to compare the location of the events in the beginning of the period, with the location near the end) Use case 6: barplots of methods and of groups of action methods (slide 20) related to the events of the timevis: The user brushes events in timeline of slide 5 => the barplots got adjusted Use case 7: hierarchical graph (with size of nodes and leaves proportional to the number of events). The leaves on the right of slide 25 (or 32) are the events of the timevis. The user brushes events in timeline of slide 5 => the tree plot got adjusted In most use cases, the interaction could go both ways: from timevis to other widgets; from another widget to timevis.

The application is developed and released under Affero GPL. The source code repository is https://gricad-gitlab.univ-grenoble-alpes.fr/kauffmma/gnad_irnc Note that, at the moment, there is only documentation, no source code there. I'm working on it. The reason is that the raw data contains private information (name and email addresses of students); emails cannot be shared; the name of some students should not be shared (some want to contribute anonymously. I need to clean these private data before being able to share them; the code without the data is of little use.

daattali commented 1 year ago

If you could provide me with some sample csv data that can be used for timevis and other widgets, that would help. I'm currently trying to implement crosstalk support, but I don't have any data to test with.

mayeulk commented 1 year ago

Sure. Will do tomorrow (I m in France). I could not find a way to send a private message on github though. (Myself I can be reached at the email at the bottom of page www.irnc.org)

mayeulk commented 1 year ago

Here is a csv with the events I used in the timevis: Fiches_GNAD_Ref_15_20_v12MK__2022_10_09_event_id.ods_withoutEmails_sheet_2.csv

These data are licensed under an Attribution-NonCommercial-ShareAlike 4.0 International license (CC BY-NC-SA 4.0, https://creativecommons.org/licenses/by-nc-sa/4.0/). Each row contains the name of the authors, see fields ref_contributor_name_firstname and ref_proofreader_name_firstname (when NAs, assume: Simon, Marie ; Vandriessche, Thibaut; Kauffmann, Mayeul)

mayeulk commented 1 year ago

I've commited the full gnad_irnc Shiny app (which uses the data above) at https://gricad-gitlab.univ-grenoble-alpes.fr/kauffmma/gnad_irnc/ Among other things, in contains source code and data for the 7 use cases I listed earlier.

daattali commented 1 year ago

Thanks for the file

With this csv, what code would you use to create the timevis? (because I don't know which columns here are "id", "start", "end", "content", etc). And what code would you use to create the other crosstalk widget that you want to link to timevis?

I'm essentially trying to get a reproducible example I can test for a crosstalk-enabled timevis.

mayeulk commented 1 year ago

The code is in the folder https://gricad-gitlab.univ-grenoble-alpes.fr/kauffmma/gnad_irnc/-/tree/main/app in file: timevis_gnad_irnc.R You need the full folder (including subfolders /R , /ods and /www ) and you need to change line 5 of the R code (starting with "base_path <- "/home...."") to adjust it to your local folder

daattali commented 1 year ago

I tried looking at that file but it's huge and very difficult to pull out demo code to test with. Are you able to provide a code sample?

I'm looking for a clear simple example of using a dataset with timevis and another widget. Something like:

basketball_games <- data.frame(id = 1:3, start = c("2023-02-01", "2023-02-02", "2023-02-03"), content = c("team 1 vs 2", "team 2 vs 3", "team 3 vs 4"), home_score = c(50, 60, 70), away_score = c(65, 55, 75))

shared_df <- crosstalk::SharedData$new(basketball_games)

crosstalk::bscols(
    timevis::timevis(shared_df, width = "100%"),
    d3scatter::d3scatter(shared_df, ~home_score, ~away_score, width = "100%"),
    DT::datatable(shared_df)
)

I cannot use the file you sent me for testing

mayeulk commented 1 year ago

Sure, I'll come up with something ASAP.

mayeulk commented 1 year ago

I made a much simpler version, committed at: https://gricad-gitlab.univ-grenoble-alpes.fr/kauffmma/gnad_irnc/-/commit/3e334d5dae91521d1ade5b2da19612fbfee60fc7 Source code is about 4 times shorter; same for data size. Also attached below (.ods files need to go in a ./ods/ subfolder).

timevis_gnad_irnc_v25_data_path_simplified_o.R.zip

Fiches_GNAD_Ref_15_20_v12MK__2022_10_09_event_id_withoutEmails_simplified.ods

Sharp_198_methods_table1_en_es_fr_v3_simplified.ods

It is certainly not perfect; I still hope it will help.

daattali commented 1 year ago

Thanks for all your time! I got your app to run, but I'm still not sure how to use this for a crosstalk test, because there is no crosstalk used in this app and it's not super clear how to modify the data so that different widgets use the same dataframe. I'm trying to come up with a short example of using timevis crosstalking with another widget, a code sample that can be fully contained within a small app of 20-30 lines. I'll try to come up with my own data, but I do appreciate you spending your resources on this.

mayeulk commented 1 year ago

Sure, I understand and I appreciate all you say in your last comment. The reason why there is no crosstalk yet in this app is that integrating timevis was at the core of my development. I'll be happy to try and test your dev, though; if it can help.

For crosstalk-ing to leaflet, a draft dataset could use this:

data.frame(long = rnorm(20) * .3 + 20.45, lat =rnorm(20)*.3 + 44.8,
           start_date = paste0("2020-01-",round(runif(20,1,31) )),
           end_date = paste0("2020-02-",round(runif(20,1,28) ))
           )
daattali commented 1 year ago

Ah nice, yes that's what I'm looking for! Ideally something with this structure but that also holds some data that makes sense so that the example would be practical rather than just theoretical :)

daattali commented 1 year ago

crosstalk is now supported

mayeulk commented 1 year ago

I understand you committed crosstalk support; thanks a lot for this!

Ah nice, yes that's what I'm looking for! Ideally something with this structure but that also holds some data that makes sense so that the example would be practical rather than just theoretical :)

OK, it would require more work from me (reorganizing the data + searching for latitude and longitude of events) but I think this is something I can come up with. Do I understand well that a csv file I could create would go into inst/example/ ? When I have such a csv file, should I open a pull request and add a few lines of R code as an example using that csv file?

daattali commented 1 year ago

I found a tiny dataset online of earthquakes and I was able to test with that (you can see it by installing the github version and running timevis::runExample() and go to the "Crosstalk" tab).

But I think I'm going to change that example into one that doesn't require leaflet and use a different widget instead, probably a plot instead of a map, because it's a bit simpler.