Connect Treemap or Sunburst to hierarchicalMenu or refinementList widget to filter results

Hello, I’ve done a cursory search here and on stackoverflow, but I’ve yet to find an example. Has anyone attempted to connect a treemap or sunburst to either the hierarchicalMenu or refinementList widgets?

I’m trying to provide a more graphical way for users to filter on categories and/or keywords in our index.

Basically, my ideal would be a treemap at the top of the page, then when a user clicks on a category.lvl0, the treemap expands to show the category.lvl1 underneath it, and the hits results would filter to show the results in the category that is clicked.

Thank you

Hi @benzio,

That’s a pretty interesting way to visualise the hierarchical data! I assume you are talking about connecting it with D3.js?

I believe this is doable, but you would probably need to create a custom UI and wrap it with the connectHierarchicalMenu connector to achieve this!
I think that combining the following resources would be a great way to get started:

I believe the main idea here is to have a mutable data object that is updated within the render function of the custom widget, whereas the initialisation/instantiation of the d3 sunburst should happen in first render (all the click listener should then be bound to the refine function to navigate through the search). This should allow you to have a two way communication between the two models.

Just a rough first direction, but I hope this will help you move forward a bit!

Thanks for your reply @jonathan.montane! Yes, this is exactly the direction I am wanting to go. I appreciate the links and general explanation. I’ll give it a go here and see what I can make.

Thanks again!