How to teach a model to taste
I'm more of a beer drinker personally. Yet I have a religious respect for wine, lounging on that eon old throne of culture, being debated by people with oak barrel loads of taste buds, describing their object of study as flabby quince, musky tar or unctuous pen ink.
Modelling data you don't understand
That's all quite a bit removed from my skillset. However, I managed to cheekily sneak into this world some time ago building data tools for ZAM — a Napa based company helping vineyards around the world to make sense of their data and processes.
Last year, we discussed the potential to use tasting data history to help vineyards with their tasting process — potentially assisting winemakers evaluating aspects of a wine, like specific taste elements or the overall wine quality — however quality is defined — based on not only their tasting nerves but also their data. Obviously blasphemic to assume mathematical models can move in the world of unctuous pen ink, but we thought it might be fun to check at least.
It didn't take long until a pretty promiscuous dataset was being found from 2009 sporting logs of 1,600 tastings noting the respective wine's physiochemical properties as well as a quality rating by wine experts. Since its inception this dataset has been joyfully adopted by the data science community and the kaggle's of this world, who generalised the many models they built on the sole base of the numbers they worked with.
In the first version I wrote, I totally fell into that puddle myself assuming I alone cracked mathematical wine tasting. An accurate neural network can't lie? I proudly presented my first version of text to Krista — a winemaker I had the pleasure to pass this on to, for — what I initially thought — would be a few corrections here or there, but largely shoulder padding and a badge.
She rightfully tore it apart!
The focus on the figures and the model completely bypassed the so truly necessary subject understanding. Only with her detailed knowledge and further digging into the numbers and the background, did I understand that we can not take a model build on these properties, throw other wine's measurements of the same properties at it to evaluate a wine as good or bad. In contrary, it became clear that the properties — some of which are unusual in the winemakin and tasting context — were selected to establish a very specific type of quality — getting the quality seal of being from the Vinho Verde region in Portugal.
The selection of wines — only Vinho Verde wines — and the nature of the testing organisation — the Viticulture Commission of the Vinho Verde Region — defined the specificity of this data and disregarded any attempt to generalise this to every wine under the sun.
That realisation didn't change the general undertaking to build a model on tasting data that can help winemakers learn about their wines, but it underlines how blinking important the choice of data and the definition of the outcome is.
Moving bottles around
So much to re-learning acedemic rigour. A much more playful part was the story coding.
Personal projects — this turned into one after I realised it would take significantly more pandemic evenings than originally planned in with vinoEZ — have surely been invented purely to play with toys. In this case the toy box focussed mainly on Greensock's gsap and Rough.js (sketchy SVG and Canvas, what is not to like?).
gsap is the main animation and scrolling engine of this thing that has also just such a friendly face. Some time ago I was skeptical as it's full glory with all the fabled plugins only comes for a price, but an affordable price, which I am totally happy to pay to a) keep an open source project afloat (gsap core and key plugins continue to be open source) as well as b) get incredible support for any stupid question one might have within hours.
Apart from core gsap, the key bits used here were:
ScrollTrigger
gsap's scroll lib that super-nicely dovetails with their base animation system (a main reason to go for gsap here), supports scrubbing (more below), simplifies debugging and helps recalculating positions on window resize. Scroll stories are neuroscience when it comes to making them work forwards and backwards as well as on resize, but ScrollTrigger has a couple of signature moves that help a lot.
Here's for example one way to set a Scrolltrigger, that triggers when .section-1 scrolls in:
ScrollTrigger.create({
animation: myTween,
trigger: ".section-1",
scrub: true,
})
You create a scrolltrigger instance and tie a gsap animation to it (myTween in this case, this needs to be a gsap timeline). Next, you define an element the animation triggers on (any CSS selector — .section-1 in this case). It runs the animation when .section-1 scrolls into view and — thank you very much — runs the animation reversely when the element leaves the view from where it entered — with the click of a scrub: true switch!
And here is how we build this tween to make sure it picks up where we left it on resize:
function createMyTween() {
// Capture current progress.
const scroll = ScrollTrigger.getById("myTween")
const progress = scroll ? scroll.progress : 0
// Kill old - set up new timeline.
if (myTween) myTween.kill()
myTween = defineMyTween()
myTween.totalProgress(progress)
}
We get the scorlltrigger, cache it's progress, kill the animation, rebuild it (that happens in defineMyTween) and add the original progress to it.
For completeness sake, the defineMyTween() function could be as simple as
function defineMyTween() {
const tl = gsap.timeline()
return tl.to(".section-1", { opacity: 1 })
}
or as complex as you like.
It's all you need for animated scrolling. A more thorough look in the docs or over at Will Chase's post.
Morph SVG
This one was a loyal companion in this piece. Feed any SVG path to it, it takes it apart into its pieces and morphs them fluidly into any other path.
Flubber is great, but this one is boggling. It also works with Canvas, which was quite key as the whole thing fell over after a few days of SVG coding...
I won't unfold the details here, but you can see how to wire the plugin up with Canvas over here.
Drawing with JS
The other column this crumpit rests on is Rough.js — a small library you can draw with in code! Pixel perfection is great to design precision — concepts or rough ideas are best sketched out. When I present an idea or an early design to a client, it's best done in a sketch. Simple pen and paper or — often even better as digital and hence more mouldable — sketches from for example the excellent Excalidraw.
The unbeatable benefit of sketches is that they suggest unfinishedness supporting some sort of mental openness on the viewer's side to interactively fill in the sketchy gaps. Sketches are an excuse for error and an invitation to complete the sketced thingy together. It's brilliant for discussion and great for basic and rough concepts.
This story is piecing together an approximate concept so I thought sketchy might be apt. Also, sloths look best in sketched imperfection...
Simulating quality
Visual stories can be a well-greased slide into user driven exploration. Profiling some data the users then get to dive into themselves, sketching out a concept the reader can fiddle with to see relations — both is well served with a visual intro and attempted here.
After setting the scene and purpose and explaning the modelling aspect, the data gets profiled with some force-positioned histograms
...before allowing the users to play with the variables themselves to see how each variable impacts on quality:
In terms of interaction strategies, it's maybe closest to the Martini Glass with a more modest and pruned glass base.
Puddingification
The last adventure came about thanks to Martin Gonzalez who suggested to kindly ask the good people from The Pudding if it had a chance to be published with them. I'm a fervant Pudding reader, but while it sort of didn't cross my mind, it luckily totally worked out, which is undoubtebly the most joyous outcome!
Jan Diehm not just cut the editorial flab but also tweaked the design and interactions into something Pudding-worthy. It's such a valuable pleasure to have not just additional, but talented and experienced eyes to look at your stuff. Sitting in a basement for weeks staring at the same thing by yourself isn't healthy for the head, the basement or the thing!
You can scroll through it here or go straight to its Pudding home over here...