Turning data into nice diagrams

Hi Everyone - I’ve just registered with Bubble as I’m investigating whether it’s the right tool to create a business to business SaaS product I’ve been mulling over for a while.

I’m wondering whether data can be presented in visually interesting ways.

In brief - the product will include the ability to create teams, and these teams will have a relationship attribute - e.g. Team A provide an output to Team B. Team B provide outputs to Teams C and D.

Before I get too bogged down in words, here are some pictures that hopefully explain it!

The question is - is Bubble capable of supporting the UI ideas in steps 3 and 4 below, showing data and data relationships in a diagramatical format.

Step 1 - to create a team, the user is presented with a form:

Step 2 - the user fills out the form with the team details:

Step 3 - when creating teams, the user can visualize their data via a simple view like this:

Step 4 - this is where the ‘cool’ (and more complex) functionality kicks-in. If I select a team and its relationships (I haven’t shown this step here) then something like this would appear, with the relationships prominently highlighted and the other teams pushed to the background:

2 Likes

Hey @stuartwalker78! Welcome to Bubble :slight_smile:

This looks like it’s definitely possible! There are many different ways to structure and query data from fellow Bubblers, but here is one possible way of getting started:

For Steps 1 and 2, the workflow for when ‘Save’ is clicked could create a new Team (using Data --> Create a New Thing). In your Team data type, there could be fields such as Name (type: text, list: no), and Level (type: number, list: no). The “receives data from” and “sends data to” parts of the form could be autocomplete search boxes, or dropdowns, which display Teams within that database that the User is able to select from.

For Steps 3 and 4, one way of doing this would be to have repeating groups whose data source is “Do A Search for Teams”, with search constrains for each corresponding Level. For example the data source for the top group would be: “Do A Search For Teams” and the search constraint is “Level = 1”. This would only display Level 1 teams. Then, repeat that process for the Level 2 and Level 3 repeating groups.

The color changes can be accomplished using conditional formatting which would change the color of the background of those rounded groups, based upon the Team being displayed on the page. To achieve the rounded cell effect, you can place individual groups within each cell and round the borders. Bubble also just added the option to have dynamic background colors, so that could be something that really adds to the design there!

2 Likes

Great - many thanks for the detailed response!

I’m pretty happy that Bubble would meet the basic requirements of my app - forms, data, workflows (the usual!) - but the key is the visualisation of teams, their levels and relationships, so it’s cool to know Bubble could get this done! I guess the best way of describing it is creating simple and clean diagrams, the kind you might produce in Visio or Omnigraffle, but that are interactive.

To be honest, I’m inclined to find a dev partner to create a proof of concept. Due to time and skills (or lack thereof!), it would take me too long to figure it out for myself. I’m currently putting together the wireframes and data model, but I’ve still a bit more work to do.

Once again - thanks for the post, it was really helpful

2 Likes

fayewatson’s approach is nice … I would do the same way …

post your dev partner request here again once you are done with your leg work (wireframes and data model)
you’ll definitely find a great dev partner here … ATB with your App :slight_smile:

Awesome! :slight_smile: No problem at all!

Yes, there are a number of different ways to structure the data, depending upon the complexity of your app and what predict you will need it to do in the future. I’m on mobile at the moment or I’d post a link, but there’s a great thread called “Are many-to-many relationships supported?” In the forum which has great tips on how to think about structuring data on Bubble. Just incase you’re interested!

here’s the link fayewatson mentioned in his post …

2 Likes

Excellent - thanks! I’ll check out the thread.

Really interested in whatever technique will work here. I’m also trying to:

  1. Generate a diagram after some data change (json will be sent to front end from a service). This isn’t really a repeating pattern like repeating images so I’m not sure how to do that. Plus the diagram will need to be kind of prettier at some later point.
  2. The block on the diagram would be interactive, for example, for re-running what just happened but with some twist, or forking some path on the diagram to do other stuff, or have some if/then condition.

I prefer to do this with no or low code, but I ended up writing a little code. Now, not too sure if I could integrate that with Bubble. I would like to try to only provide the back-end code (the service) and do as much of the front end in Bubble, but not sure how easy/feasible that will be.

all the best … just start with bubble and let us know if u feel stuck at some point …