Ternary Slider

Note: This was originally published as an Observable notebook.

When building user interfaces it is occasionally useful to have the user specify proportions between things.

If the choice is between exactly three things, it can be represented by a ternary slider where every point in the triangle corresponds to a unique composition of those three things.

Example

For example, a whiskey sour is a drink composed of whiskey, lemon juice, and simple syrup.

Imagine the space of all possible whiskey sours as delinated by the relative proportions of these three ingredients, with pure ingredients at the corners (and an optional cherry or orange slice, sold separately):

Your chosen concoction contains whiskey, simple syrup, and lemon juice.

Move the red dot to choose your composition as point in Whiskey Space.

Black dots illustrate the ingredient proportions from whiskey sour recipes found online; you can find the full dataset below.

Usage

To use the ternary slider in your own work, see the original Observable notebook which shows how to do so and explains the available options for customization.

Acknowledgements

Thanks to Andrew Lin, who did of the work, Zora Killpack, who did of it, and Yuriy Rusko, to whom fell the remaining .

Appendix: Whiskey sour recipe dataset

The recipe data plotted in the top example was collected from the first few pages of Google search results for whiskey sour recipe.

Appendix: Greater than three (additional acknowledgements)

Thanks to Corey Thompson, Ryan Shackleton, and Carl Manaster for their feedback on a draft of this document.