maybe different colors in dark / light mode. maybe bigger border for "range box" or "brush box"

Still not happy with the color scheme, specifically now with two markers (and actually even one) we need more colors for Left, Right, Selected and Hover. They all have to be distinct (maybe not Selected and Hover).

Use maybe: https://medialab.github.io/iwanthue/

There appear to be some strange errors in the colour space. For example, in the category "Age: Elderly-> Young" there are only two colours when nothing is selected (fully red or fully white). However, when selecting one of the red countries we see that there is actually a pretty big difference between the countries that previously had the exact same shade of red. This is not how things should work and should be fixed before the demo.

(on branch speedBoost)

Short explanation and link to moral machine.

Mario was confused that it only works by clicking on oceans.

The outline used to mark a country when hovering over it is currently a green color that is on / close to the color scale used for data mapping. This means that the outline can be hard to see when hovering over a country with a a value that maps to a green color. It may also confuse users as they might think the color of the outline also constitutes a mapping of data. It would probably be better to make the outline black or at least use a color that is not used for data mapping.

! look at the license!

download world map and fetch relative to site.

Currently, the map is always 960 by 500 px large. It should respond to the size of the page.

Currently, small countries (mostly island nations) are not showing up on our map. I'll look into fixing this issue by combining the different map-detail levels in a way that still allows for smooth interaction.

The map does not change how far it's allowed to go (and zoom) when the size of the screen is updated. This leads to weird behaviour, especially when making the window larger.

match viz-spec.

Certain countries without data are visualized as though they have data. This is an issue in and of itself but it also does some strange things to the colour space. An example of this is Sudan but it's true for most countries in Africa and some around the world. Oh, and Antarctica as well. I was wondering why that one had data...

automatically zoom to such a country if it gets selected.

make explanation / text ... for the world map ("what is the data")

If we have hover markers, use those (wiht normalized distances). Otherwise, just remove the legend?

The labels need improvement, regarding left/right alignment.
We could also add an image of the respective category (although that might belong into the info tooltips). This would help clarify what exactly "fit vs large" etc. means.

find out maximum distance for difference map and normalize all values by that factor

The default position should be in the middle? Maybe we should add a reset button?

put a script at the beginning of index.html that fetches that data once and export it for "instantaneous" use.

The lower part of the legend gets cut out on some screens?

after pressing "reset zoom": when zooming again, the zoom "jumps back" to where it was before resetting :/

When selecting Age category and France no country is bluer. The legend tells otherwise. There is likely some city-state that has a higher value but is not shown. We should either show every state or remove the invisible ones from the data set.

The strokes for the selected country and the hovered country are currently always the same. It would be better if they changed based on the level of zoom since they need to be large to be visible when zoomed out but can be in the way of smaller countries when zoomed in.

We currently only use the less detailed map:
https://unpkg.com/[email protected]/countries-110m.json

It would be better to use this one when zoomed in:
https://unpkg.com/[email protected]/countries-50m.json

And maybe this one when very zoomed in:
https://unpkg.com/[email protected]/countries-10m.json

The number at the end of the link corresponds to how many miles there are between points (or, at least I think that's what it is) so 10m means 10 miles between each point. These are the only three versions defined.

The most common type of colourblindness is red-green colourblindness. Currently, we show whether a country has a greater or lesser value than the selected one by colouring it either red or green (in "PerCategoryViz"). This would be problematic for many individuals. We should have an option somewhere to toggle the colours that are used in the visualisation.

We have a timeout in the beginning because we do not handle stuff asynchronously. That should be fixed I think because the timeout increases over time (in my perception). With 300ms I can semi-reliably reproduce a situation in which no country is highlightable due to the data not having loaded.

Apparently there is something wrong in App.jsx. Someone with React experience should take a look.

Currently, part of the stroke that shows the country that the user hovers over may be partially covered by other countries as they are rendered later. Thus we should render that stroke after rendering all the countries.

Currently, it is possible to move the world map so that it is completely off the screen and thus lose track of where it is. Currently, one has to reload the website if this happens. The best way to solve this would be to restrict the movement of the map so that it cannot move offscreen, but we could also just add a reset button as a temporary solution for the demo.