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 |