I recently created a dashboard for school with react, fastapi, and d3.
It had several standalone components on a single page (about 10 visualizations) and was interactive.
We’ve run into some problems with the hook and d3’s update functionality (both were dependent on the data, thus the whole component was reloaded and we could never use the update functions).
Now I want to make another project of my own.
Are there better combinations than react + d3? Preferably easier ones?
I looked into svelte.dev and it seems quite appealing and intuitive. Have you had experiences with it?
That dashboard was my very first exposure to HTML, javascript, CSS, typescript.
So I am still quite a beginner.
Thanks a lot for all the insights and tips you can provide!
Since you are asking on the Observable forum, can I advocate that you try out observable to make your project?
The dependency graph (or “minimap”) helps to clarify which visualization depends on which data being loaded and which interactive input being selected—and you also get a “feel” for it when you iterate on the code and observable’s reactivity kicks in.
There are several ways to efficiently embed or export the result in your CMS or static website, so whatever you build is not “trapped” on observable (but beware: using observable makes everything else feels clunky).
Not to claim that this is “better in the absolute” than any other combination of tools (especially if there are tools that you’re already comfortable with); however one clear advantage of using observable is that you can start simple and grow the toolbox only when you need it.
You will also find it much easier to get support when you have a question, by sharing a notebook, allowing anyone can quickly load the page and send suggestions—rather than having to ask people to set up a copy of the project, run it locally, etc.
What is probably missing for now are great examples of dashboards that would convince you to try. (What I can offer is the covid-nma vaccines dashboard, which we developed entirely on observable: COVID-19 NMA. But we made it two years ago, and I would not recommend it as a template to start something today.) Maybe other readers of this forum will have better links to share.
thanks so much. This isn’t really an option for me though for the same reasons I don’t just use a static HTML page with javascript (which I considered though). I likely need react or a framework like it to provide the interactivity, customization and independence of the individual components, responsiveness etc.
We’ve explored it in our last dashboard too and you really can’t build it in plain html without even more overhead (at least from countless SO issues and chatting with our resident experts). We take users input, give out custom visualizations that can per component be customized again, and things like tailwind render the individual components.
You already get that with Observable. The limitation you might perceive is that by default Observable’s cell outputs are arranged in a certain way to accommodate the editing UI.
But there are several strategies to work around that:
Reparenting elements. You take the DOM output of several cells and attach them to a different cell:
To learn more about Observable’s handling of DOM elements, see this notebook.
Note that this strategy falls short if you want to include a reactive input that requires constant focus (like a text or range input) inside the dashboard area, as changing it will cause the dashboard cell to rerender and the input to lose focus.
Rendering with side effects. Check out “Dashboard with Inputs” for an example of a dashboard helper that supports inputs inside the dashboard while preserving Observable’s reactivity. Another more declarative variant of this strategy would be to use Observable’s mutable cells.
Customizing the CSS. You have full control over the CSS inside the notebook sandbox. Observable offers an embed view for notebooks where you only see the cell outputs. This mode can be detected and the elements arranged into areas e.g. via CSS grids. For example, the notebook “Fullscreen Layout Demo” when viewed in fullscreen rearranges the cells to scroll them horizontally.
Of course it’s important to pick the right tool for the job, and without knowing more about your project’s requirements (features, target audience, update workflows, API use etc) it’s difficult to say wether Observable or another combination fits the bill.
Thanks a lot for the input and for taking your time.
I wouldn’t mind using Observable but I would want to host it outside on its own in the end.
I hope there wasn’t confused about that earlier.
I.e. use the export functions and embed them in the website in the end.
Its a simple dashboard, I attached a short video of the one I did for school, the new one will be mainly about Football statistics but similar.
It would have a few ML algorithms (deployed TF Model, Decision Trees, UMAP etc) run in the background on demand.
It would be deployed on its on server and domain.
I will likely use FastAPI again to provide datasets based on input because that has worked quite intuitively, though I have experience with Flask too.
the user would be everyday people without much technical knowledge.
You are not really limited. I would say, if you want to make use of the react ecosystem best not use Observable, but if you are willing to build some of the UI yourself the features are there.
Thanks for the link too, this is actually along with some other examples what I tried originally with the first dashboard and integrating it into react via embedding and that really was quite horrible, though I never did react either it was much more straightforward to use and learn for a beginner imho.