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);