Visual design of threads

This is to summarise the visual design of interactive states (brushing, hovering, selecting) in different views.

Thread Features & Thread Projection

These two views share the same design: scatter plot with circles showing threads (axes mapped to different attributes). The visual encodings in both views are consistent.

• Normal state: no border, semi-transparent black fill
  • Class encoding: change black to a different hue for the class
  • Recommendation encoding: add a cross to the circle
• Brushing state: 1px orange border
• Hovering state: 2px orange border
• Selecting state: 3px orange border + enlarge circle

Thread Overview and Thread Messages

Both use background colour to indicate hovering and selecting states: light orange for hovering and darker orange for selecting. Brushing is not provided.