# What tools to use to create a dashboard? **URL:** \ **Category:** Help\ **Created:** [June 19, 2022, 9:24am UTC](https://talk.observablehq.com/t/what-tools-to-use-to-create-a-dashboard/6715 "2022-06-19T09:24:06Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![Oliver](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/oliver/32/6546_2.png) [@Oliver](https://talk.observablehq.com/u/Oliver)\ **Post date:** [June 19, 2022, 9:24am UTC](https://talk.observablehq.com/t/what-tools-to-use-to-create-a-dashboard/6715/1 "2022-06-19T09:24:06Z")
Hi Oservable Community! 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! ---
**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\ **Post date:** [June 19, 2022, 10:11am UTC](https://talk.observablehq.com/t/what-tools-to-use-to-create-a-dashboard/6715/2 "2022-06-19T10:11:44Z")
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](https://observablehq.com/@observablehq/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](https://observablehq.com/@observablehq/advanced-embeds) 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](https://covid-nma.com/vaccines/mapping/). 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. ---
**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\ **Post date:** [June 19, 2022, 3:09pm UTC](https://talk.observablehq.com/t/what-tools-to-use-to-create-a-dashboard/6715/4 "2022-06-19T15:09:34Z")
Here’s an example where various charts are assembled into a dashboard with a certain grid layout: [Dashboard / Mike Bostock / Observable](https://observablehq.com/@mbostock/dashboard/2) ---
**Author:** ![Oliver](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/oliver/32/6546_2.png) [@Oliver](https://talk.observablehq.com/u/Oliver)\ **Post date:** [June 19, 2022, 4:21pm UTC](https://talk.observablehq.com/t/what-tools-to-use-to-create-a-dashboard/6715/5 "2022-06-19T16:21:23Z")
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. ---
**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [June 20, 2022, 9:00am UTC](https://talk.observablehq.com/t/what-tools-to-use-to-create-a-dashboard/6715/6 "2022-06-20T09:00:37Z")
> [@Oliver](#): > > I likely need react or a framework like it to provide the interactivity 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: 1. **Reparenting elements.** You take the DOM output of several cells and attach them to a different cell: 2. **Rendering with side effects.** Check out [“Dashboard with Inputs”](https://observablehq.com/@mootari/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](https://observablehq.com/@observablehq/introduction-to-mutable-state). 3. **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](https://observablehq.com/@mootari/environment) and the elements arranged into areas e.g. via CSS grids. For example, the notebook [“Fullscreen Layout Demo”](https://observablehq.com/@mootari/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. ---
**Author:** ![Oliver](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/oliver/32/6546_2.png) [@Oliver](https://talk.observablehq.com/u/Oliver)\ **Post date:** [June 20, 2022, 9:37am UTC](https://talk.observablehq.com/t/what-tools-to-use-to-create-a-dashboard/6715/7 "2022-06-20T09:37:32Z")
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. [https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/3/3bac524107b5e122a242e784240018785bd6c878.mp4](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/3/3bac524107b5e122a242e784240018785bd6c878.mp4) 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. ---
**Author:** ![tomlarkworthy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tomlarkworthy/32/5940_2.png) [@tomlarkworthy](https://talk.observablehq.com/u/tomlarkworthy)\ **Post date:** [June 20, 2022, 3:01pm UTC](https://talk.observablehq.com/t/what-tools-to-use-to-create-a-dashboard/6715/8 "2022-06-20T15:01:51Z")
I wrote this interactive website on Observable:- [Tarot Reader](https://thetarot.online/index.html) (link to source notebook is at the bottom), it calls out to OpenAI. Vanity domain was added with Netlify (see [https://twitter.com/tomlarkworthy/status/1504402375473340423](https://twitter.com/tomlarkworthy/status/1504402375473340423)) Though probably you would want to have a normal website skin with Observable cells embedded inside, which is also possible with the embed feature [Introduction to Embedding / Observable / Observable](https://observablehq.com/@observablehq/embeds) 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. ---
**Author:** ![Oliver](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/oliver/32/6546_2.png) [@Oliver](https://talk.observablehq.com/u/Oliver)\ **Post date:** [June 20, 2022, 5:30pm UTC](https://talk.observablehq.com/t/what-tools-to-use-to-create-a-dashboard/6715/9 "2022-06-20T17:30:39Z")
Thanks a lot, really cool website!!! 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.