I thought long about the pros and cons of letting time flow vertically rather than horizontally. In the end, I wanted to have the code editor to the right and the visualizer to the left (code lines are usually short but there are many of them), which then forced me to render the events vertically. What do you think?
I also posted a link to the playground yesterday noon CEST on HN, but the post didn't get much traction and went pretty much unnoticed into the eternal archives of HN. As I still think this playground could be of great help to many RxJS beginners and I put quite much effort into it, I posted it again to see whether a repost would share the same fate.
I've worked on a product does exactly this for displaying a geospatial view over time, and I find it relatively intuitive once you start playing with it. Here's a quick view in case it sparks any ideas https://youtu.be/Nq57d6zSrkQ?t=249
It's also how sequence diagrams are normally drawn, and is how I'd normally think about running through them, so I think it's a great idea to show Rx streams. However, I was kind of confused from playing with the interface a bit and trying to track what was happening, but I think it's an excellent first start to see how everything interacts!
One suggestion for trying to help visualize the interactions between different streams, I'd like to see onion skinned lines attaching events between streams. ie as the timeline hits the moment an event triggers between two streams you draw a horizontal line between the events and then as time goes on the line fades (to a controllable limit). Then you'll be able to see all the actual interaction lines between streams without cluttering the view.
I think the most confusing part is trying to figure out the connection between the different streams/columns cause it's not obvious the effect that events from each individual bar has on any other bar (part of what the horizontal lines in a sequence diagram show). It's also not obvious which columns are Rx streams and which are inputs cause they're visualized the same way. Example 'window, window count, window time' demo has an 'openings' column that's interactive but you wouldn't know it unless you clicked on it, and I'm not exactly sure what it's an input to without having the time bar directly on an event and seeing other events that line up.
The fading doesn't have to work based on wall clock time. I'd probably start off with trying to make it fade over a distance of 10% of the screen height along the vertical time axis. But you could come up with a bunch of different ways to model your 0-1 fade boundaries.
Nice work! It would be cool if the playground supported bringing IxJS into the mix. I've found it difficult to explain to my team members how Ix and Rx can complement one another.
Here are some gists where I used them together to explore the interactions; I was particularly interested in Ix's `batch`:
I'm still digging in and playing around, but I think this could be really useful in explaining RxJS operators to new team members. I think the pros outweigh the cons for the vertical bar, but maybe you could add an option to render horizontally?
I thought long about the pros and cons of letting time flow vertically rather than horizontally. In the end, I wanted to have the code editor to the right and the visualizer to the left (code lines are usually short but there are many of them), which then forced me to render the events vertically. What do you think?
I also posted a link to the playground yesterday noon CEST on HN, but the post didn't get much traction and went pretty much unnoticed into the eternal archives of HN. As I still think this playground could be of great help to many RxJS beginners and I put quite much effort into it, I posted it again to see whether a repost would share the same fate.
I've worked on a product does exactly this for displaying a geospatial view over time, and I find it relatively intuitive once you start playing with it. Here's a quick view in case it sparks any ideas https://youtu.be/Nq57d6zSrkQ?t=249
It's also how sequence diagrams are normally drawn, and is how I'd normally think about running through them, so I think it's a great idea to show Rx streams. However, I was kind of confused from playing with the interface a bit and trying to track what was happening, but I think it's an excellent first start to see how everything interacts!
One suggestion for trying to help visualize the interactions between different streams, I'd like to see onion skinned lines attaching events between streams. ie as the timeline hits the moment an event triggers between two streams you draw a horizontal line between the events and then as time goes on the line fades (to a controllable limit). Then you'll be able to see all the actual interaction lines between streams without cluttering the view.
What exactly did confuse you?
I don't understand how the fading should work, as the visualization is not realtime but rather abstracts time away.
I think the most confusing part is trying to figure out the connection between the different streams/columns cause it's not obvious the effect that events from each individual bar has on any other bar (part of what the horizontal lines in a sequence diagram show). It's also not obvious which columns are Rx streams and which are inputs cause they're visualized the same way. Example 'window, window count, window time' demo has an 'openings' column that's interactive but you wouldn't know it unless you clicked on it, and I'm not exactly sure what it's an input to without having the time bar directly on an event and seeing other events that line up.
The fading doesn't have to work based on wall clock time. I'd probably start off with trying to make it fade over a distance of 10% of the screen height along the vertical time axis. But you could come up with a bunch of different ways to model your 0-1 fade boundaries.
Nice work! It would be cool if the playground supported bringing IxJS into the mix. I've found it difficult to explain to my team members how Ix and Rx can complement one another.
Here are some gists where I used them together to explore the interactions; I was particularly interested in Ix's `batch`:
https://gist.github.com/michaelsbradleyjr/5abf097e9c2b99d101...
https://gist.github.com/michaelsbradleyjr/62d16f63a3ac318b42...
https://gist.github.com/michaelsbradleyjr/271c3dabdabf68412e...
Note that Ix is undergoing a rewrite that brings more parity with Rx re: how the operators are organized:
https://github.com/ReactiveX/IxJS/pull/264
I'm still digging in and playing around, but I think this could be really useful in explaining RxJS operators to new team members. I think the pros outweigh the cons for the vertical bar, but maybe you could add an option to render horizontally?
Thanks ;) I'll keep it in mind! Which operators do you miss most in the demos?