On step 3 shadows are getting colored by "health" initially rather than "cost". Thus when the user clicks to step 4, the shadow circles stay the same (e.g. they stay disordered by saturation, rather than moving from ordered to disordered).

Interactions/features to add:

• back button to see previous step
• hover over dots for more info
• use fewer bins for Pred/Actual values (step 3+)
• add key to step 5 for the black/white circles
• on step 6 add text below the dots that explains the effect of the label.
  • Original: this is the original algorithm that tried to predict the correct patients for the program based on care costs.
  • Emergency: this algorithm predicted emergency costs, which was still a biased label choice because different populations use emergency care in different ways.
  • Health: This algorithm includes information about health in the score, making this label closer to the target of the Actual Health of a person. Health is different than healthcare cost because...
• make a finale screen with the green dots. Explain why health (green) label works so well. Make sure finale screen resets the vis before step 1

TODO

• Center "Patients" over patients on step 2
• Add rounded corners to label buttons
• Make "Predict Care Cost" mandatory click on step 2
• Change straight-line connectors (poor bottom row) to slightly curved and connecting at torso, or change to light grey ellipses around the pairs
• Scale up viewBox so that the 1px lines are thinner
• Remove the step number on Back and Next
• Mobile touch events
• Add back "boop" on the patients

TODO:

• touch events on mobile
• evaluate use on mobile while within the Booth webpage
• resize the tooltips, once text is finalized
• add "-st/-nd/-rd/-th" suffix to the percentile in the tooltip

Individual dot tooltip does not appear on touch

Text rephrasing:
Horizontal - "Two patients at this level would be equally sick, but you can see the Black patients needed to be more sick to be referred."

• have second option if second dot doesn't cross threshold (maybe, depends on phrasing)

Vertical - “both patients at this point received the same score but the Black patient would have X more chronic conditions.”

• Add click or hover over individual circles and display full data (%, race, score)
• Restrict sliders to stay within the bounds of the graph
• Possibly reduce width of slider rectangles

https://observablehq.com/@d3/multitouch

TODO:

• Confirm mouse events for desktop/laptop
• Review if mouse events work for touch, and change as necessary

On smaller screens, the dotted threshold lines "redraw" and produce an odd behavior