[position-x] channel encodes [GDP Per Capita, Happiness Score, Happiness Rank, Family-friendly Score, Freedom Score, or Generosity Score depending on user].
[position-y] channel encodes [GDP Per Capita, Happiness Score, Happiness Rank, Family-friendly Score, Freedom Score, or Generosity Score depending on user].
[size of circle] channel encodes [population].
Map Interactions:
Hover and change color:
show the readers the areas for each country.
It is especially useful for some countries, like the US, which has
areas that are not adjacent to each other (e.g. Alaska). By allowing
the readers to hover over a country and show the size and areas of
that country, we can provide the readers with a more accurate way of
representing the country’s boundaries.
Hover and appear name:
It is not possible to show the name of every
country on the map at the same time since that will lead to a clustered
data representation. So we decide to allow users to hover a country and
we will show the name of that country using tooltip.
Zoom & Drag:
Since there are many (and small) countries, we realized
that it will be hard for the users to see properly due to the limitation
of small screens. Therefore, we decided to implement the “zoom” function
to our visualization, which allows users to zoom in and out on the map
using two fingers (two fingers sliding down the control pad together → zoom in;
two fingers sliding up the control pad together → zoom out). Furthermore, after
zooming, we see that some of the countries are inaccessible since it is not
of the zoomed area. So we also implemented “dragging” on the map. Readers can
drag the map by clicking on any of the areas on the map and move the mouse while
holding on the click.
Click:
We wanted to link the map and the scatterplot as the first provides a
higher-level view of the world and the latter presents a detailed view on the
relationship between different variables (happiness rank, happiness score, GDP
per Capita, Family-friendly, freedom, and generosity) for each country. So, we
enabled click on each capital of a country (circles on the map). Each time the
reader clicks on a country’s capital, the scatterplot will refresh and highlight
the chosen country, enabling us to understand how it compares to others in regards
to the different variables.
Scatter-Plot Interactions:
Choose variable through the two dropdown menus for the x-axis and y-axis: since
we want to explore the relation between GDP Per Capita and other variables
(happiness rank, happiness score, Family-friendly, freedom, and generosity),
we need to reuse the scatterplot. Therefore, we decided to allow readers to choose
what they want to see on the x-axis and y-axis by adding a drop down menus for both axis.
Brush & zoom in, double click & zoom out: Similar to the case in the map,
there are a lot of countries (153 to be precise). So we think that the bubbles
(circles) that represent the countries will be overlapping with each other.
Thus, we decide to implement “brush” to zoom in. Readers can put their cursor
on the scatterplot and when “+” appears, they can brush an area on the scatterplot
to zoom in. Also, if readers double click on the scatterplot, the scatterplot will
zoom out to the original state.