What are the best presentation (e.g. interactive slideshow) options possible in DASH/Plotly?

Dash Python
1

I could use some good solid advice on this one.

My app is finished except for deciding how to present complex data in the most meaningful, user-friendly way.

The code ‘reads’ a cooking recipe and returns a nutritional profile of more than 40 nutrients and other information.

Some of the data are percentages, some are milligrams, some grams, some micrograms, some international units. In addition, the benchmarks, like RDAs and UTLs (tolerable limits), vary depending on gender and age group.

To my knowledge, there is no way to make the complete nutritional profile fit on one or even several graphs without obscuring much of the data.

My current thinking is to 1) ask the user to select the appropriate gender/age group, and 2) permit them to view the applicable slideshow of charts grouped by unit of measurement (grams, milligrams, micrograms, etc…).

  1. What in general do you think about this approach?

  2. How would I best approach the task using DASH and Plotly?

  3. If not possible in DASH/Plotly, can you recommend an alternative?

All sincere feedback is welcome.

Here is a snippet showing what I am currently working with.

Thank you for reviewing my question.

Capture
Capture1817×405 22.2 KB

2

Hi @robertpfaff Robert,
What do you mean by "applicable slideshow of charts grouped by unit of measurement?"

I’m thinking two things. If you want the user to filter through initial values/selection, I think it’s best to use the chained callback. However, if there many different values to choose from, maybe it could be built in this open style where a checkbox can be selected to limit units of measurements viewed. Although not in line with your field here’s an example of what I mean. See left sidebar.

Does that make sense, or are you looking for something else, Robert?

1 Like
3

Hello!

Thank you for your continued assistance.

I was just now watching your video on Bootstrap Collapse.

By “applicable slideshow of charts grouped by unit of measurement,” I mean 1) the user chooses a gender/age-group from a drop-down menu or via a check-box. Then, 2) they can view the nutritional profile - final results - as a series of charts with each nutrient amount compared to those benchmarks relevant to that nutrient and user’s demographic.

But that sounds convoluted. Let me simplify the problem with one small example…

Fiber is reported in grams. Folate is reported in micrograms. One gram is 1,000,000 micrograms. It does not look professional or meaningful to convert both nutrients to milligrams and cram it all on one graph.

Beyond that, different users have different needs. A grown male needs twice the magnesium than a young female. So my initial thought was I need to…

  1. Let the user select a gender and age group, and then
  2. View the results as a series of graphs “grouped by units of measurement.”

By that, I mean one graph for those nutrients reported in micrograms, Another for milligrams. Another for grams. Another for international units…and so on by placing those graphs in a slideshow or carousel.

Or better option if one exists.

Does that make any sense? I hope so.

Different users need to see the results in different contexts and, based on how the data is reported, I cannot place it all on one bar chart. It needs 4-5 bar charts for each demographic.

Or maybe there is a way to keep it on one graph (chained callbacks?) that changes as the user plays with the demographics?

Well, that would be the best solution probably.

Then, there is the three-step process to producing those results.

  1. Paste the recipe in the text area.
  2. Edit the initial analysis.
  3. Generate the final results (nutritional profile).

This process - the code - works great, but it is all crammed on to one page right now. The user has to scroll too much and think too hard to enjoy the experience, which is very important to me. It needs to be fun.

For that reason, I am currently looking at Accordions/Collapses in DASH Plotly, and wondering how would related callbacks and functions work in a format where they are separated by tabs? Do I place the app layout, function and callback inside the AccordionItem tag? As you must know, I could chew you ear off.

There is some documentation out there, but not a lot. I understand the basic mechanics. The challenge is applying that logic to my project’s unique needs without tons of examples to review. I could just generate the final report and be done with it, but I put seven-eight months of work into this project.

If this is overwhelming or difficult to decipher, I apologize. I did not know a single line of Python eight months ago, so it is an overwhelming amount of information to learn and apply. That makes it difficult for me to articulate.

Please feel free just to point me in the right direction with a link to the best video or template.

I’ve just worked so hard on this project. It must be a polished and special project before I publish it.

4

I think you covered it. AnnMarieW walked me through the process of incorporating the three, main elements of the app into an Accordion format this morning,which places me way ahead of the game. So I am thrilled with how its coming together right now. The only hurdle left is figure out how to present the results in a fun, interactive way.

Chained callbacks look like the best starting point.

Thanks again,

Robert

1 Like