Because I'm HAPPY
Did this discussion title get you singing? :) HAPPY by Pharrell often comes on my "life" playlist- and that is exactly what happened when I saw the World Happiness Report dataset. I knew I had to take a stab at visualizing it in Astrato!
I was inspired by some hex maps that a coworker posted to show the overview of the happiness levels around the world on the landing page. I love how subtle it is to see the regions where happiness levels are highest!
I then wanted to do a quick navigation fun with buttons + actions so I added two pages - one for the happiest and one for the unhappiest countries of 2022. This was a quick and easy way to try out some custom navigation.
Can anyone figure out how I created my hex map? I'll share my quick process in the comments later this week so make sure that you follow this post to find out!
Comments
-
Clap along if you feel like dashboard without a pie (chart).
3 -
scatter or gridchart, however if you used the gridchart you would have chosen the hexagon as icon so the Scatter it is 😉
0 -
How did you do the Country Flags? are these static images?
0 -
To create the map I used a 🌟Scatter Plot🌟! @Jochem There are a few reasons to choose the scatter over the grid- which I will explain below:
Step1: Create a Map on a Grid
I used excel to do this. I just created a 20x30 grid in excel with the countries that I wanted to show in my map. I translated my map into a 4 column data source: Country Name, Country Code, Row, Column (from the grid).
Step 2: Join the Map Data to Happiness Data
Simply connect your data to Astrato and join the two tables together! If you are using google sheets, you will want to create a data table with all elements included in one table as joins are not possible for this data source.
Step 3: Visualize!
There are a few reasons that I used the Scatter Plot for this visualization. As shown below, both the Grid and Scatter appear (at first glance) to work for this data set:
But look closely... there are some differences! In order to get to the bottom of this, I'll add back my axis labels. When adding my row and column data to the grid chart, we are adding the numerical values as dimensions, but on a scatter plot, they are handled as measures. The scatter chart is therefore sorted numerically as I designed it.
Finally, I used the country code as the dimension on the scatter chart, which also provides some additional context when hovering over a data point (not available in the grid chart). I look forward to customizing the tool tips to include more context, such as gradient values in the future!
And that's it- a quick and simple hex map! Happy Vizing!
1 -
Yes, the Country Flags are static images for the time being. I love this design. To keep the design quick and easy to replicate, I just made the first one and grouped the items together and then duplicated the group. I then changed the country for both the data and flag link for each of the remaining 5!
1
