Diversity In Data – Feb 2021 – Web Pages and Show Hide

One of the three data sets for the February 2021 Diversity in Data initiative was about notable Black Scientific Achievements and Inventions.

The data set included a field which held a wikipedia link for the associated person. When I saw this I decided I wanted to try out including a dynamic web page as part of the visualisation. And it turned out it was quite simple in the end.

The final result looked like this:

The background image and icons were all designed in Figma, along with the initial splash page (which sits inside a show/hide container).

The animation element of moving the Light bulb/Rosette to be next to the person title is very similar to a previous blog post I wrote (Animated Heat Maps) and makes use of several worksheet layers.

I’m going to focus on the Web Page element of this dashboard, and also touch on the Show/Hide button, which I managed to make appear like it changes position to fit in the design.

Web Page

To kick this off, I first started by creating a parameter:

This will hold the specific link I want displayed in the web page.

Handily the data has the URL link in it for me, so I didn’t need to add these in. So in order to get these into the parameter, I just need to set up a parameter action from my chart. This is so when the user selects one of the icons the URL will change.

To do this, I need to add the ‘Link’ field into the detail shelf of my main chart, and then set up a parameter action on the dashboard like this:

This means when I click on the mark on the ‘Interact’ sheet, the Link Parameter will be updated with the new URL.

Now this is set up, I can bring my Web Page element onto the dashboard – drag one from the Objects pane:

And in the ‘Edit URL’ box, there is an arrow to the right you can click and choose what field or parameter to use in the object:

Here you select ‘Parameters.Links Parameter’ and this will be set up! Now when you select the mark on the viz, this web page object will update based on the updated parameter. Simple!

One issue with this data set was a lack of URLs for a couple of the people, so I had to think how to sort this out. By default if there is no URL in the parameter then it will keep with the previous web page loaded, which is a bit confusing to the user if they have selected a different mark. I decided to sort this by having a placeholder image for those URLs:

I decided I would host this image on this blog site, so I can then use the URL from this site to add to my list of URLs in the data – meaning that this image would show via the Web Page when those without a wikipedia page were clicked. I also used this default image for when the user first loads the dashboard and no person is selected.

So that was it for the Web Page part – this turned out really simple to get a dynamic web page opening on the dashboard!

Show/Hide Button

The other quick tip I wanted to share was around the show/hide container button. In my dashboard, the ‘Splash’ screen when you open the dashboard looks like this:

This is an open Show/Hide container, with the close button in the top right. When this is closed the dashboard looks like this:

Here you can see the show/hide button is in the top right of the pink box, but this is actually lower than the button was in the first image. I did this to fit in with the design, but how did I do it?

Again – quite simple. This involved making the Show/Hide button an ‘Image’ and creating two icons in Figma (an x and an i) which are actually part of a larger rectangle (which is transparent) – the x and i are then offset to to the top and bottom of the same sized rectangle giving the illusion that the button moves. Steps below:

Make a container a ‘Show Hide’ container

Show/Hide button images

Show/Hide Button Settings
Show/Hide Button on Dashboard

And this is it – the illusion of the show/hide button changing position. Useful if you need to move it slightly to fit a design.

And there we go, I hope some people find this useful! The link to the interactive dashboard is here:

Black Scientific Achievements and Inventions

Ant.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s