Astarno

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

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.

Where Next?

Popular in Questions Top

sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
New
Kurisu
For example for a current url like http://localhost:4000/cosmetic/products?_utf8=✓&query=perfume&page=2, I would like to get: ...
New
ycv005
I have followed this StackOverflow post to install the specific version of Erlang. And When I am running mix ecto.setup then getting fol...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
beno
I will often find my self writing things similar to: case some_value do nil -> something() "" -> something() _ -> somethi...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
dotdotdotPaul
Okay, I’m having a heck of a time trying to figure out how to best handle the validation of belongs_to associations in Ecto. I’m sure I’...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

Other popular topics Top

vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
AstonJ
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
New
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
Qqwy
Update: How to use the Blogs & Podcasts section You can post links to your blog posts or podcasts either in one of the Official Blog...
3271 126479 1222
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" => #BSON.ObjectId<58eb1a7a9ad169198c3dXXXX>, "email" => ...
New

We're in Beta

About us Mission Statement