Fruits in Motion

Technology

Fruits in Motion uses D3.js and Svelte. Something new I learned with this project is how to add reactivity to a Scaleable Vector Graphic (SVG) with D3. SVGs are designed to resize easily, but resizing doesn't automatically adjust the content. What looks good on a desktop looks too small on mobile and vice versa.

D3 provides objects called scales that allow you to translate an input to a rescaled output. One example from this chart is a scale that takes a timeframe in days and tells each bar how long it should be in pixels. When the window resizes, that scale updates its output to the new area available, and then each bar redraws using the updated scale.

Background

We love to grow and eat fruit at our house, and my kids often wait for the fruit to be ready. I was curious to learn more about that process and why some fruits ripen after they're picked while others don't.

I'm oversimplifying, but fruits are either "climacteric" or "non-climacteric". Climacteric fruits can ripen after they're picked, whereas non-climacteric fruits only ripen while still attached to their plant. The growing bars above show how long fruits typically grow on their plant, and the ripening bars show how long fruits typically take to ripen.

The times shown above can vary widely based on climate, weather, soil, and many other factors. Similarly, ripening times can change based on temperature, humidity, light, physical damage, and more. Being near other ripening fruits can even speed up the ripening process due to the production of ethylene gas.

Don't Miss

Here are a few tips or features you shouldn't miss:

• Try quickly switching between growing and ripening sorting. D3 smoothly handles interrupted transitions.
• There's a subtle glow effect on the bars.
• The tooltip when you hover over a bar (desktop only) will stay on the screen when you get near the edge.

Planned Features

This chart was designed to be a simple proof of concept for sorting and SVG reactivity. I'd like to fix an issue I had positioning the tooltips on mobile when the view was zoomed in, but I don't have any other planned changes.