Context
Kitchen and cooking routines, especially moments when users need quick, glanceable time information while cooking.
IMT 561 · Data Visualization: Design and Development
Jiufu Zhou Portfolio
A portfolio documenting my visual design process, interactive p5.js prototypes, and narrative visualization work for IMT 561.
Current Focus
Narrative Visualization
HWK 5 explores how Chen Long’s winning pressure changes by opponent through an interactive badminton matchup visualization.
Profile Photo
Portfolio Introduction
Hi, I’m Jiufu Zhou.
I am a Master of Science in Information Management student at the University of Washington. My interests include data visualization, information systems, machine learning, interactive design, and AI-supported data analysis.
This portfolio shows my work for IMT 561. HWK 4 focuses on designing interactive clocks through kitchen metaphors, while HWK 5 focuses on narrative visualization using badminton match data.
HWK 4 — Interactive Clock Design
Kitchen / Cooking Smartwatch Clock
For HWK 4, I explored how time can be represented through a kitchen and cooking context. Instead of creating a standard analog or digital clock, I used familiar cooking metaphors such as eggs, rice cookers, steam, progress arcs, and appliance states.
The project included ten hand-drawn sketch concepts and two coded p5.js prototypes: an Egg Crack Timer and a Rice Cooker Clock. The final selected direction was the Rice Cooker Clock because it combined exact time, cooking progress, and AM/PM state in one coherent appliance metaphor.
Visual Encoding
Time is encoded through rice height, steam motion, progress, color, labels, and appliance states.
Interaction
Clicks, buttons, keyboard input, and hover feedback make the clock prototypes responsive and playful.
Final Choice
The Rice Cooker Clock was selected because it works as both a clock and a cooking-progress visualization.
Coded Prototype 1
Egg Crack Timer
The Egg Timer is designed for short kitchen countdowns. The remaining time is shown as a numeric countdown and as a visual story: the egg cracks near the end and hatches when the timer reaches zero.
Design Principles
- Hierarchy: the countdown and central egg stage create a clear focus.
- Motion: shaking and cracking communicate urgency.
- Interaction: timer controls allow the user to start, pause, reset, and adjust time.
Coded Prototype 2
Rice Cooker Clock
The Rice Cooker Clock uses a rice cooker as the main metaphor. The digital display keeps exact time readable, the rice level shows progress, and the LOW/HIGH control turns AM/PM into a cooking-related heat cue.
Why This Became the Final HWK 4 Direction
Compared with the Egg Timer, the Rice Cooker Clock has a stronger visualization structure. It combines exact time, progress, state, and motion into one consistent kitchen appliance metaphor.
HWK 5 — Narrative Visualization
Winning Pressure by Opponent
HWK 5 asks us to communicate a clear insight from data through narrative visualization. My final visualization uses badminton match data to show how Chen Long’s winning pressure changes depending on the opponent.
The story is not only about who won. Instead, it explains how Chen Long won points, how the selected opponent responded, and what technical shot patterns supported the matchup story.
Main Story
Chen Long does not beat every opponent in the same way. His dominant point-winning pattern changes by matchup.
Interaction
Viewers can click an opponent to update the pressure signature, matchup detail, point-winning reasons, and shot type mix.
Genre
This is an author-driven narrative infographic with one layer of user-driven interaction.
Encoding
Gold represents Chen Long; blue represents the opponent. Bar charts show point-winning reasons, while the donut chart shows shot type mix.
Final Interactive Visualization
Chen Long Matchup Network
Start with Chou Tien Chen, then compare the story with Viktor Axelsen. The visualization shows whether Chen Long’s top pressure came from winners, opponent errors, or other scoring patterns.
How to Read the Visualization
The left side presents the main pressure signature. The right side provides matchup details, tactical profile, shot type profile, win rate, rallies, and match results. The lower supporting charts explain how Chen and the opponent won points and what shot types shaped the matchup.