Astarno
Recommendations for real-time visualizations
Hi there,
I am looking to build a web-based application that will be responsible to visualize other (Elixir) applications in real-time for research purposes. I have already landed on using Elixir together with Phoenix and LiveView to fulfill the “web-based” and “real-time” aspects, but I have yet to find the best approach to actually draw and animate objects on the screen in combination with these technologies. I have no experience in this latter department.
An example most often says more than a 1000 words, I am basically looking to create something very similar to this: https://netflixtechblog.com/vizceral-open-source-acc0c32113fe. I should be able to draw different objects on the screen, make them interactable (e.g. clickable) to show more details and animate them. Any additional fancy functionality to make my life easier and visualizations cleaner/better is a great surplus.
If you could help me with some pointers to relevant articles, guides and/or technologies, that would be greatly appreciated!
Most Liked
100phlecs
The general gold standard (and what your Netflix example uses as well, shown in its package.json) is three.js and some animation library – in Netflix’s case, tween.js which I’ve never heard of before. Usually people pair gsap with three.js from my research.
It’s the gold standard because it’s so popular.
If your animation is strictly 2D you could instead use pixi.js, as it is pretty popular too. Even inspecting the pixi.js website, they’re using gsap to animate their fade ins/outs.
It comes down to personal preference.
Advanced animations on a webpage, or using canvas in general I wouldn’t think to be a good fit for LiveView depending on the implementation. I could see how you would be able to “fire” off multiple events which then trigger a bubble moving from one endpoint to another without changes to the DOM. I would just be prepared to write a lot of javascript and possibly pulling in another rendering engine, like React which is what your Netflix example uses – which may defeat the purpose of choosing LiveView! It really depends on how much UI state you have to handle, how much you have to keep track of on the page.
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #javascript
- #code-sync
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance








