Desktop version
Note: The original visualization included 30+ line mulitples.
Smartphone version
The visualization designs are not responsively scaled to preserve the absolute sizes.
User's outcome
Size: 380px × 730px
User satisfaction ratig: 4 (satisfied)
Suggestion taken: #3
Edits made
- Reduce the multiples columns (5 to 3) to adjust density.
- Resize with the user-specifed size.
This includes resizing and proportionately repositioning text elements. - Increase the chart height.
- Modify the chart scale (to avoid the overlap between the label and line mark in the first multiple).
Notes
Edits made by the recommender.
Manual edits made by the user.
Design suggestions
On smaller screens, scroll horizontally
Suggestion #1
Size: 380px × 980px
Transformations made
- Reduce the multiples columns (5 to 2) to adjust density.
- Resize with the user-specifed size.
Suggestion #2
Size: 380px × 2,010px
Transformations made
- Reduce the multiples columns (5 to 1) to adjust density.
- Resize with the user-specifed size.
Suggestion #3
Size: 380px × 600px
Transformations made
- Reduce the multiples columns (5 to 3) to adjust density.
- Resize with the user-specifed size.
Suggestion #4
Size: 380px × 830px
Transformations made
- Convert to a heatmap with changing the layout to adjust density.
- Convert to a heatmap to adjust density.
- Resize with the user-specifed size.
- Unwrap text lines for readability.
Suggestion #5
Size: 380px × 330px
Transformations made
- Convert to a heatmap with changing the layout to adjust density.
- Convert to a heatmap to adjust density.
- Resize with the user-specifed size.
- Unwrap text lines for readability.
Tablet version
The visualization designs are not responsively scaled to preserve the absolute sizes.
User's outcome
Size: 800px × 600px
User satisfaction rating: 4 (satisfied)
Suggestion taken: Not taken.
Edits made
- Resize the chart.
- Change the number of columns (5 to 4).
Notes
Edits made by the recommender.
Manual edits made by the user.
Design suggestions
This version was originally created as a "Phone-Landscape" version and then repurposed to a "Tablet" version, so the design suggestions were same as those above for the phone version.
Thumbnail version
The visualization designs are not responsively scaled to preserve the absolute sizes.
User's outcome
Size: 210px × 270px;
User satisfaction rating: 4 (satisfied)
Suggestion taken: #2
Edits made
- Change line multiples to overlaied lines for the decreased scroll length.
- Resize with the user-specifed size. This includes resizing and proportionately repositioning text elements.
- Remove labels for density.
- Change the line mark stroke opacity (to highlight the county of interest).
Notes
Edits made by the recommender.
Manual edits made by the user.
Design suggestions
On smaller screens, scroll horizontally
Suggestion #1
Size: 200px × 2,030px
Transformations made
- Reduce the multiples columns to adjust density.
- Resize with the user-specifed size.
Suggestion #2
Size: 200px × 270px
Transformations made
- Change line multiples to overlaied lines for the decreased scroll length.
- Resize with the user-specifed size.
- Remove labels for density.
Suggestion #3
Size: 200px × 830px
Transformations made
- Convert to a heatmap with changing the layout to adjust density.
- Convert to a heatmap to adjust density.
- Resize with the user-specifed size.
- Unwrap text lines for readability.
Suggestion #4
Size: 200px × 270px
Transformations made
- Aggregate multiples for a tiny view.
- Resize with the user-specifed size.
- Remove labels for density.
Suggestion #5
Size: 200px × 370px
Transformations made
- Convert to a heatmap with changing the layout to adjust density.
- Convert to a heatmap to adjust density.
- Resize with the user-specifed size.
- Unwrap text lines for readability.