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: Vizceral Open Source. our traffic intuition tool | by Netflix Technology Blog | Netflix TechBlog. 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!
Technically you could use Vizceral as-is - it’s just Javascript! I didn’t dig far enough in to see if the API you’d get would be good / easy / etc but it’s possible.
A good place to start looking at complete Phoenix + LV + visualization solutions would be to try out Livebook. It may not be the UI you ultimately want, but the demos for process visualization and Vega should offer some inspiration.
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.
1 Like
Here are a few examples that I have found useful. All three provide different approaches for visualization. Once you have have your data flowing through pubsub channels, I would likely start with js hooks. There are many mature javascript Force-Directed Graph (3D and 2D) libs out there that you could incorporate into your app.
Examples:
Phoenix + three.js : GitHub - fly-apps/globe-request-mapper
live link
Poeticoding paid course: realtime dashboard using JS hooks with charts libraries, etc.
Phoenix backend + html canvas with Fabric.js
