Incidents at Sea

This visualization is from the National Geographic article See Where Access to Clean Water Is Getting Better - and Worse. This visualization is an interactive combination line chart and scatterplot showing the different countries and regions of interest; in the mobile version, only the regions are shown. Both versions of the visualization support interaction via a drop down. To better understand the responsive techniques used, we performed an open-coding process of the changes between the desktop and mobile versions of the visualization. To view the mobile version of the visualization, we used the Device Mode provided by Chrome DevTools to simulated an iPhone X device in both a portrait and landscape orientation. Take a look at the article yourself, and the codes we generated here:

Desktop vs. Mobile (Portrait)

Code Action Component
wrap title text reposition title
remove circle marks remove marks
reduce line marks remove marks
remove circle size legend remove legend
add color legend add legend
change grid type reposition view
compress width resize view
remove some axis labels remove axis labels
add gridlines add gridlines

Interaction Codes (Portrait)

Code Action Component
remove animation remove interaction
remove rural/urban widget remove interaction
reduce dropdown options modify interaction

Desktop vs. Mobile (Landscape)

Code Action Component
disabled remove view

Interaction Codes (Landscape)

Code Action Component
disabled remove interaction