Phase 1: Building a Bar Graph with D3.js

We began by creating a simple bar chart using a dataset we compiled on Barbie’s professions. After exploring various D3 tutorials, we adapted Mike Bostock’s bar chart example, refining its structure and ensuring it accommodated our dataset.

Challenges:

• Understanding D3’s API and syntax.

• Adjusting the Y-axis scaling to fit our extensive dataset.

• Separating HTML, JavaScript, and CSS for better modularity using Glitch, which also facilitated real-time collaboration.

Phase 2: Experimenting with Observable & Timeline Visualization

We sought to represent Barbie’s professions over time using a timeline visualization. Initially, we found an ObservableHQ example we loved, but integrating it outside of Observable proved difficult due to its unique structure.

Challenges:

• Observable uses a different JavaScript structure, making direct translation to vanilla JS difficult.

• Debugging hierarchical issues within Observable’s data model.

• Seeking mentorship from a D3 expert (Rashida) to untangle code dependencies.

After several attempts to migrate the code, we decided to embrace Observable’s environment and modify the visualization directly within it.

Phase 3: Refining the Timeline & Adding Features

Our final visualization included:

• A grouped timeline where recurring professions (e.g., Barbie as President) appear on the same Y-axis level.

• Color-coded categories using a pink gradient inspired by Barbie’s aesthetic.

• Interactive hover effects displaying Barbie images corresponding to each profession.

We manually sourced and added images to our dataset and integrated them into the tooltip hover effect.

Overview

This project visualizes the evolution of Barbie’s professions over the years using D3.js. Inspired by an article from The Pudding, we set out to create a compelling visual representation of the diverse roles Barbie has embodied since her inception. Our goal was to develop our technical skills with D3.js while exploring how Barbie’s career trajectory reflects societal changes.

Key Learnings

• Mastered D3.js fundamentals, including array manipulation, axis scaling, and data binding.

• Gained hands-on experience with Observable, learning its advantages and constraints.

• Developed a workflow that balances reverse engineering examples with structured learning.

• Strengthened our ability to collaborate, debug, and seek expert guidance when necessary.

Future Directions

Looking ahead, we want to explore how Barbie’s evolving professions have influenced broader societal perceptions of career possibilities—not just for women, but also for trans women and individuals of other gender identities. By drawing parallels between Barbie’s representation and real-world workforce trends, we hope to examine how visibility in media and toys impacts professional opportunities over time.

Project Duration: 3 Weeks

Team: Akshita Bawa and Shira Seri Levi

Tools Used: Javascript, Glitch, Observable, p5.js