Choosing the Best Tech Stack for an Analytics Dashboard: LiveView + D3 or React?

Integrating D3 with LiveView is pretty straight forward.

I’m sure you can do it any tech stack. Follow your heart, i.e. use LiveView.

Not sure you noticed, but in the end it’s d3.js after all

So just for the graph features, using React seems to me like an additional layer and most React chart libs are just abstractions over d3.

There is one benefit though: these abstractions give you the 80% for 20% effort. Unless you want something the abstraction does not support; then you have rewrite straight to d3 (my previous employee had to do so)

Advice 1
I would skip all the extra work, layers and extra deployment concerns and just go with straight d3 in LiveView. Integration is easy and you are not limited by whatever abstraction.

——

About React vs LiveView for a dashboard: not sure as I haven’t done anything remotely close to the use case with LiveView. (edit) But the Phoenix Analytics project chose React, maybe they can enlighten you on their decision:

Phoenix.LiveDashboard with Phoenix.LiveDashboard.PageBuilder seems to be a LiveView solution.

Advice 2
Please do notice there is a project for “Analytics ala Google” already. Might be better to work together than to start and alternative on your own.

We recently made some protoypes for a reporting dashboard and were comparing different charting options:

• VegaLite — VegaLite v0.1.11
• https://www.chartjs.org/
• Apache ECharts
• https://contex-charts.org/

I personally liked the dev experience for VegaLite because the Elixir package gives you a nice way to build the JSON spec and it’s just a simple hook for every chart, because it gets configured via the spec. But it’s missing some interactions/animations and that’s why we settled on ECharts in the end for a nicer user experience. You can push the serialized data as JSON to the hook and have it render the chart.

Let me know if you’re interested in more!

@BartOtten isn’t the Phoenix Analytics project a React frontend?

@kevinschweikert I’ve used echarts for some dashboard and animation work but have migrated the complex stuff to d3 to get more control. echarts was great until I hit that wall. Having to define your formatters on the JS side when the rest was done on the Elixir side was a bit unfortunate too.

D3 is rather confusing to learn at first, though D3 in Action and observablehq are good resources. It is rather verbose on account of being so low level, but you can create exactly what you want.

I can’t imagine a response which causes me to dodge the bullet. Auch. Fixed my post

Thank you all for your valuable suggestions and useful resource—they’ve been incredibly helpful!

Once you made the decision, please let us know the outcome and the key factors leading you to it in return.

Charts.js is very simple and pragmatic and used by my favourite website monitoring tool uptime.com I don’t know if there’s any pre existing integration with livebook but I agree it should be straightforward to integrate.

An option I’m currently evaluating, because it seems reasonable and someone (@staxx) kindly wrote a liveview plugin, is Apexcharts

https://github.com/Stax3/live_charts
https://github.com/Stax3/live_charts_demo

Seems pretty well implemented, don’t know the author, but kudos.

As an alternative, I’d like to point out that this type of analytics app is very amenable to simple bar charts rendered entirely as a series of <div style="height: XX%;" />.

Obviously if you want more complex charts then you can go with D3 or similar, but for a prototype rectangles really are hard to beat.

I was trying out different libraries for charts too. My main concern was the final performance and latency.

I chose eCharts out of uPlot, chart.js and eCharts.

uPlot Is by far the fastest and has the smallest memory footprint, but it’s also quite limited in the types of charge you can use. It’s mostly time series. chart.js Is the second in terms of performance, But I could not find the functionality of brush or linked charts, so it’s not an option for me.

All these three libraries use canvas. eCharts can switch between canvas and SVG.

If you go with the pure D3, be ready for it to be slower than the rest because it can only use SVG.

Now I’m trying to battle and figure out whether to use SQLite with indexed tables or DuckDB for charts.
It’s a big mind bend for me in understanding whether to connect to the databases through a direct connection or if I need to use GenServers. AI seems to suggest that GenServers are part of best practices, But with me anticipating no more than 10,000 users for my app, I really don’t want to add any overhead to the app that is not needed.
I’m pretty new to Phoenix and it’s quite a lot of headache and hustle. But I hope it’s only in the beginning until my mind wraps around it.