This is the final interactive project at my Major Studio 1 class in collaboration with the UN. I picked Gender Equality as my umbrella theme.

I was struck by this scatterplot depicting gender gap in leisure time across the world published by OCED Gender Data and visualized by Our World in Data and I decided to build my visualization based on this data source.

Inspired by Waitbutwhy's Life-Weeks visualization, and many other time use visualizations by FlowingData, I decided to use rectangles as the primary visual element representing time. To make the visualization more aesthetically exciting, I opted to layer on a watercolor, handdrawn theme to give it a low-tech touch.

Based on my concept, I created a moodboard that features fluid, lightweight watercolor palette, and blurry abstract silhouettes.

See here for the initial Figma prototype.

I also decided to take this opportunity to learn to build a project using d3 and Svelte. Through this introductory exercise, I learned some basic Svelte concepts such as loops, value binding, tween, scrollytelling, and props. The below technical components were implemented.

• Svelte scrollytelling
• Interactive d3 waffle chart
• Small multiples of d3 stacked bar chart
• Svelte tween animation
• SVG watercolor filter

As of Dec 12, 2022, I deployed the preliminary version of the visualization with a few outstanding improvements in mind.

• Proper positioning of tooltip
• More refined tooltip formatting
• Responsive waffle and stacked bar charts

// store.js
// An extremely simple external store
import { writable } from "svelte/store";
export default writable(0);