Streaming live at 10am (PST)

Interactions using styling from collection items? Creating a dynamic heatmap table

Hello! I’m stuck and looking for some help from y’all.

I am trying to create a heat map table, described and shown below:

  1. It’s essentially 4 columns, all of which start out gray with dark gray text.
  2. When you click the radio button at the top of each column, I want just that column’s cells to switch background colors from gray to the dynamic color selected in the collection item and have the text change to white.
  3. And when you switch to another radio button I want the previously-selected column to go back to gray, with dark gray text.

19%20AM

I have a collection built out to feed numbers into various graphical elements.

Option 1 (this is the one I’ve been playing with):
Interaction on each radio button. Column 2 (Industrial) has a dynamic text block and a fixed text block to bring in the %. In the other columns I am playing with using an HTML embed so I could use a single field, but this one doesn’t seem to pick up the interaction change in color.

{One note: it’s been frustrating to test as I have to publish in order to actually test the interaction. Preview doesn’t actually reflect my updates to the interaction.}

Option 2:
When I click radio button, use Javascript to add class to the dynamic cell below. And have that class get dynamic background-color from the collection item. Is this even possible and how would one do it?

Option 3: insert a duplicate gray content cell above the cell with color and have that opacity fade from 0 to 100. This seems like a really cumbersome approach

Recommendations on which approach is best and how to do it?

If I go with Option 1 or 3, will I need to build separate interactions for each column, telling the click to basically switch the color of the previously selected column (all 3 since all 3 are possible to have been selected) cells back to gray and invert the text?

I’m probably overthinking this and would love some outside input and help!

PAGE NAME: (in Drafts folder) “Benefits Landscape Interactive Landing”


Public share link here.

Any help out there on this situation? @Waldo mind taking a look?

Hi @eburnett,

Did you get this interaction working? I think I understand what you’re trying to do. On my portfolio, I have some similar animations. If they’re not the same I could help ya. Go here to see if this is what you’re looking for:

https://www.garymichaeldesign.com/philosophy

If you click the menu at bottom, then click a menu item, the others disable and fade out.

Let me know :slight_smile:

1 Like

@eburnett great question! I would utilize CSS filters for this to have the chart show in grayscale (saturation of 0%), and then set saturation to 100% after clicking the radio button for each respective one.

You’ll find that Filters are available within click interactions and since you have a few columns, I’d recommend targeting it by the parent column associated with each radio button (so that it’s only 2-3 interactions you have to build out and you don’t have to select 100 elements to animate at a time).