Today at Flourish, we’re adding a powerful new way to reveal information on a visualization: panels! The new feature is available right now in our Projection map, Radar and Cards templates, and will be coming to other templates soon.
Displaying custom content in “popups” or “tooltips” has always been possible in Flourish, but with panels this becomes more flexible than ever. The new modes are especially useful when you have a lot of additional data, text or images that you’d like to incorporate into your visual, allowing you to tell richer data stories.
This post gives some examples of the kinds of things you can do with panels.
The example below was originally created by ONE for their COVID-19 Tracker. Each country has lots of information associated with it: far too much to be shown in a conventional popup. But with panels all this rich data can be nicely laid out, even with scrolling where necessary.
Popup panels are also handy when you can’t visually encode all of your data and other information within the same visualization. In the radar example below it wouldn’t be possible to compare all the categories in the raw data in the main chart because their values have different magnitudes. There’s also lots of text and even an album cover to make available to the viewer. Panels solve both problems.
The settings panel allow you to choose popups, panels or both. And when panels are enabled, you can choose from five different layout options, configure height, width and styles, and set how and when they should appear. In our example above, we’ve configured our panels to slide in from the right side. To learn more about the settings available, head over to our help doc.
Our Cards template is a popular choice to display content in an effective and structured way. But to avoid showing too much text in an initial view and offer the option to dive deeper, panels are the perfect addition.
- None: No popups and panels will display
- Popup: Popups will display on hover and “lock” on click
- Panel: Panels will display on click
- Both: Popups will display on hover and panels will display on click
When using “Both”, the popup will display “Click to see more” by default, but you can change this to whatever you like.
Alongside the new panels features, we’ve improved the existing popups by making them cleaner and easier to use without having to resort to custom HTML.
New features include being able to choose between a list and a table view of content, as well as different customizable header block styles. You can find out more in the help doc.
For more customized results in popups and panels, for example to rearrange content, add images, links or other HTML, you can enable the custom content mode in the popup settings by selecting “Popup content” > “Custom” or “Panel content” > “Custom”. You can then add dynamic content from your data sheet (by using curly brackets around column names) and apply formatting in HTML. To learn more about customizing your popups, see this help doc.