Interactive Visualization Portfolio for CME 151: Data Visualization
This portfolio showcases the visualizations I created for CME 151 in Winter 2016. In this class, I learned about principles of graphic design for presenting high-dimensional data, usage of libraries such as C3.js, D3.js, Processing.js, and three.js for creating visualizations, and modular architecture for building complex visualizations in JavaScript.
Disaggregating the Model Minority
In this visualization, I wanted to examine disaggregated demographic data on Asian Americans and Pacific Islanders in a long-form narrative. This interactive visualization conveys some of the disparities hidden by the model minority myth and introduces the viewer to the concept that US immigration policies strongly influence what Asian American communities look like. Most of the data presented here came from the A Community of Contrasts: Asian Americans, Native Hawaiians and Pacific Islanders in California, 2013 report by Asian Americans Advancing Justice. You can view this visualization on its own page here.
The model minority stereotype became popular in the 1960s and 1970s, the era of the Civil Rights Movement and the Black Power Movement. After the Immigration Act of 1965 and subsequent immigration laws removed limits on immigration from Asian countries and opened the doors to highly skilled foreign nationals, Asian Americans started being praised as apolitical, economically successful "model minorities" in contrast to African Americans, who were deemed "problem minorities". But, as you'll see in recent data from California, multiple subgroups within the Asian American and Pacific Islander (AAPI) category resemble other nonwhite racial groups on important socioeconomic metrics – the model minority myth is a convenient fiction that rationalizes the status quo of inequalities within and beyond Asian Americans and Pacific Islanders.
Boids in Three.js
In this visualization, I wanted to explore the use of overlap and reflection as visual cues in displaying boid movement within a three-dimensional space. Thick axes and particles allow the viewer to estimate particle depth, while reflective surfaces at the top and bottom help the viewer localize particles in some visually ambiguous regions. Due to limitations in three.js, line width does not render properly on Windows.
Each particle has an associated mass and a random intrinsic mass growth/depletion rate. Additionally, each particle accumulates or depletes mass proportionally based on its momentum relative to a momentum threshold. Mass is modeled as a purely visual property, and does not affect physical interactions between particles. Particle color indicates momentum, while particle length indicates speed and particle thickness indicates mass.
You can access a stereoscopic version of this visualization, compatible with Google Cardboard, here. Due to the enhanced depth perception that stereoscopic display enables and the limitations of rendering on mobile Google Chrome, this verison does not render axes, reflections, or arrow particle shapes.
