| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width"> |
| <title>Visualizing Income Inequality</title> |
| <link rel="stylesheet" href="https://use.typekit.net/ull7ckk.css"> |
| <link rel="stylesheet" href="https://use.typekit.net/vxx1dyu.css"> |
| <link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet"> |
| <link rel="stylesheet" type="text/css" href="css/style.css"> |
| <script src="libs/jquery.min.js"></script> |
| <script src="libs/TweenMax.min.js"></script> |
| <script src="libs/ScrollMagic.min.js"></script> |
| <script src="libs/animation.gsap.js"></script> |
| <script src="libs/debug.addIndicators.js"></script> |
| </head> |
|
|
| <body> |
| |
| <div class="title"> |
| <h1 class="t1">The Topography of <span class="nowrap t1_1">Wealth in L.A.</span></h1> |
| <h4 class="t2">Visualizing Income Inequality as Terrain</h4> |
| <h5 class="author">By <a href="https://nunderwood6.github.io/portfolio/">Nick Underwood</a></h5> |
| <h5 class="language"><span class="on">English</span>          <span>Español</span></h5> |
| </div> |
|
|
| <p class="t3 open">Los Angeles has 58 billionaires and 58,000 homeless people. In a city where destitution coexists with opulence, vast gaps in opportunity exist between neighborhoods. Let's use physical terrain as a metaphor to visualize income inequality across LA. |
| </p> |
|
|
| |
| <div id="img_sequence"> |
|
|
|
|
| <div id="imageHolder"> |
| |
| |
| <div id="g-coast-Artboard_1" class="g-artboard" style="padding: 0 0 61.6% 0;" data-aspect-ratio="1.623" data-min-width="1000"> |
|
|
|
|
| <img id="myimg" src="data/img/growth/0001.jpg"> |
| <div class="loadScreen" style="position:absolute;margin:0 auto;width:100%;height:100%;background-color:#dddddd;z-index: 3;"> |
| |
| <p class="loadingText" style="position: absolute;width: auto;text-align: center"> |
| Loading...</p> |
|
|
| |
|
|
|
|
| <div class="loader"> |
| |
| </div> |
| </div> |
|
|
| <div id="g-ai0-4" downtown="true" class="scrollDownText" style="z-index: 3;position:absolute;width:auto;opacity:0;"> |
| <p style="font-size:16px;line-height:auto;width:auto;font-style:normal;">Keep Scrolling <span class="big">↓</span></p> |
| </div> |
|
|
| |
| <div id="g-ai0-3" class="g-Labels coastLabels g-aiAbs" style="top:13.7987%;left:15.35%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Beverly</p> |
| <p class="g-pstyle0">Hills</p> |
| <p class="g-pstyle0">$250,000+</p> |
| </div> |
| <div id="g-ai0-4" downtown="true" class="g-Labels coastLabels g-aiAbs" style="top:15.5844%;left:41.35%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Downtown</p> |
| </div> |
| <div id="g-ai0-5" class="g-Labels coastLabels g-aiAbs" style="top:15.5844%;left:94.65%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Long Beach</p> |
| </div> |
| <div id="g-ai0-6" class="g-Labels coastLabels g-aiAbs" style="top:21.1039%;left:64.15%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Watts</p> |
| <p class="g-pstyle0">$30,000</p> |
| </div> |
| <div id="g-ai0-12" class="g-Labels coastLabels g-aiAbs" style="top:40.0974%;left:74.45%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Manhattan</p> |
| <p class="g-pstyle0">Beach</p> |
| </div> |
| <div id="g-ai0-13" class="g-Labels coastLabels g-aiAbs bigOnly" style="top:41.7208%;left:6.25%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Pacific</p> |
| <p class="g-pstyle0">Palisades</p> |
| </div> |
| <div id="g-ai0-14" class="g-Labels coastLabels g-aiAbs bigOnly" style="top:42.0455%;left:52.35%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Westchester</p> |
| </div> |
| |
| <div id="g-ai0-16" class="g-Labels coastLabels g-aiAbs" style="top:49.1883%;left:33.35%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Venice</p> |
| <p class="g-pstyle0">$90,000</p> |
| </div> |
|
|
| <div id="g-ai0-16" class="g-Labels coastLabels g-aiAbs" style="top:70.1883%;left:50%;margin-left:-34.5px;width:10%;"> |
| <p class="g-pstyle0">Sea level= $59,000</p> |
| </div> |
| |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| <div id="g-ai0-1" class="g-labels openerLabels g-aiAbs bigOnly" style="top:4.3831%;left:52.9%;margin-left:-53px;width:10.6%;"> |
| <p class="g-pstyle0">Tujunga Canyons</p> |
| </div> |
| <div id="g-ai0-2" class="g-labels openerLabels g-aiAbs" style="top:9.9026%;left:83.95%;margin-left:-38.5px;width:7.7%;"> |
| <p class="g-pstyle0">Angeles Crest</p> |
| </div> |
| <div id="g-ai0-3" class="g-labels openerLabels g-aiAbs bigOnly" style="top:10.7143%;left:35.35%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">North</p> |
| <p class="g-pstyle0">Hills</p> |
| </div> |
| <div id="g-ai0-4" class="g-labels openerLabels g-aiAbs bigOnly" style="top:12.5%;left:49.25%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Burbank</p> |
| </div> |
| <div id="g-ai0-5" class="g-labels openerLabels g-aiAbs" style="top:15.4221%;left:18.75%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Hidden</p> |
| <p class="g-pstyle0">Hills</p> |
| </div> |
| <div id="g-ai0-6" class="g-labels openerLabels g-aiAbs" style="top:21.2662%;left:65.95%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">East</p> |
| <p class="g-pstyle0">Pasadena</p> |
| </div> |
| <div id="g-ai0-7" class="g-labels openerLabels g-aiAbs bigOnly" style="top:21.9156%;left:84.35%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Azusa</p> |
| </div> |
| <div id="g-ai0-8" class="g-labels openerLabels g-aiAbs" style="top:23.0519%;left:38.75%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Beverly</p> |
| <p class="g-pstyle0">Hills</p> |
| <p class="g-pstyle0">$250,000+</p> |
| </div> |
| <div id="g-ai0-9" class="g-labels openerLabels g-aiAbs bigOnly" style="top:24.513%;left:96.55%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Claremont</p> |
| </div> |
| <div id="g-ai0-10" class="g-labels openerLabels g-aiAbs bigOnly" style="top:30.1948%;left:73.95%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">El Monte</p> |
| </div> |
| <div id="g-ai0-11" class="g-labels openerLabels g-aiAbs bigOnly" style="top:31.9805%;left:16.85%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Malibu</p> |
| </div> |
| <div id="g-ai0-12" class="g-labels openerLabels g-aiAbs" style="top:35.2273%;left:52.85%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Downtown</p> |
| <p class="g-pstyle0">$40,000</p> |
| </div> |
| <div id="g-ai0-13" class="g-labels openerLabels g-aiAbs" style="top:35.8766%;left:82.05%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">La Puente</p> |
| </div> |
| <div id="g-ai0-14" class="g-labels openerLabels g-aiAbs bigOnly" style="top:40.4221%;left:35.25%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Venice</p> |
| </div> |
| <div id="g-ai0-15" class="g-labels openerLabels g-aiAbs bigOnly" style="top:44.4805%;left:59.55%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">South</p> |
| <p class="g-pstyle0">Gate</p> |
| </div> |
| <div id="g-ai0-16" class="g-labels openerLabels g-aiAbs bigOnly" style="top:46.5909%;left:45.45%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Inglewood</p> |
| </div> |
| <div id="g-ai0-17" class="g-labels openerLabels g-aiAbs bigOnly" style="top:49.1883%;left:68.55%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Downey</p> |
| </div> |
| <div id="g-ai0-18" class="g-labels openerLabels g-aiAbs" style="top:53.4091%;left:80.15%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">La Mirada</p> |
| </div> |
| <div id="g-ai0-19" class="g-labels openerLabels g-aiAbs" style="top:54.0584%;left:57.25%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Compton</p> |
| <p class="g-pstyle0">$50,000</p> |
| </div> |
| <div id="g-ai0-20" class="g-labels openerLabels g-aiAbs" style="top:62.1753%;left:38.45%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Palos</p> |
| <p class="g-pstyle0">Verdes</p> |
| <p class="g-pstyle0">Estates</p> |
| </div> |
| <div id="g-ai0-21" class="g-labels openerLabels g-aiAbs" style="top:68.5065%;left:66.45%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Long Beach</p> |
| </div> |
| <div id="g-ai0-22" class="g-labels openerLabels g-aiAbs bigOnly" style="top:72.2403%;left:53.75%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Wilmington</p> |
| </div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| <div id="g-ai0-1" class="g-Labels disparityLabels g-aiAbs bigOnly" style="top:16.3961%;left:45.45%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Brentwood</p> |
| </div> |
| <div id="g-ai0-2" class="g-Labels disparityLabels g-aiAbs" style="top:22.5649%;left:60.05%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Windsor</p> |
| <p class="g-pstyle0">Square</p> |
| <p class="g-pstyle0">$250,000+</p> |
| </div> |
| <div id="g-ai0-3" class="g-Labels disparityLabels g-aiAbs" style="top:26.1364%;left:78.45%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Hollywood</p> |
| <p class="g-pstyle0">Hills</p> |
| </div> |
| <div id="g-ai0-4" class="g-Labels disparityLabels g-aiAbs" style="top:31.3312%;left:16.55%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Westchester</p> |
| </div> |
| <div id="g-ai0-5" class="g-Labels disparityLabels g-aiAbs" style="top:57.9545%;left:66.8%;margin-left:-50px;width:10%;"> |
| <p class="g-pstyle0">East Hollywood</p> |
| <p class="g-pstyle0">$30,000</p> |
| </div> |
| <div id="g-ai0-6" class="g-Labels disparityLabels g-aiAbs" style="top:59.7403%;left:28.35%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Vermont</p> |
| <p class="g-pstyle0">Square</p> |
| <p class="g-pstyle0">$40,000</p> |
| </div> |
| <div id="g-ai0-7" class="g-Labels disparityLabels g-aiAbs bigOnly" style="top:63.3117%;left:49.85%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Downtown</p> |
| </div> |
| <div id="g-ai0-9" class="g-Labels disparityLabels g-aiAbs bigOnly" style="top:78.2468%;left:28.95%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Vernon</p> |
| </div> |
| <div id="g-ai0-10" class="g-Labels disparityLabels g-aiAbs" style="top:84.2532%;left:78.45%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Monterey</p> |
| <p class="g-pstyle0">Park</p> |
| </div> |
| <div id="g-ai0-11" eastLA="true" originalTop="93.0195" class="g-Labels disparityLabels g-aiAbs eastLA" style="top:93.0195%;left:51.55%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">East LA</p> |
| </div> |
|
|
|
|
|
|
|
|
|
|
|
|
| <div id="g-ai0-1" class="g-labels comptonLabels g-aiAbs" style="top:21.2662%;left:53.45%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Beverly</p> |
| <p class="g-pstyle0">Hills</p> |
| <p class="g-pstyle0">$250,000+</p> |
| </div> |
| <div id="g-ai0-2" class="g-labels comptonLabels g-aiAbs" style="top:36.526%;left:94.6%;margin-left:-47px;width:9.4%;"> |
| <p class="g-pstyle0">Glendale</p> |
| </div> |
| <div id="g-ai0-3" class="g-labels comptonLabels g-aiAbs" style="top:38.1494%;left:9.25%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Manhattan</p> |
| <p class="g-pstyle0">Beach</p> |
| <p class="g-pstyle0">$250,000+</p> |
| </div> |
| <div id="g-ai0-4" class="g-labels comptonLabels g-aiAbs bigOnly" style="top:38.3117%;left:77.4%;margin-left:-47px;width:9.4%;"> |
| <p class="g-pstyle0">Hollywood</p> |
| </div> |
| <div id="g-ai0-5" class="g-labels comptonLabels g-aiAbs bigOnly" style="top:43.0195%;left:25.15%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Playa del Rey</p> |
| </div> |
| <div id="g-ai0-6" class="g-labels comptonLabels g-aiAbs" style="top:55.8442%;left:41.75%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Inglewood</p> |
| <p class="g-pstyle0">$60,000</p> |
| </div> |
| <div id="g-ai0-7" class="g-labels comptonLabels g-aiAbs" style="top:55.8442%;left:73.4%;margin-left:-47px;width:9.4%;"> |
| <p class="g-pstyle0">University-</p> |
| <p class="g-pstyle0">Park</p> |
| <p class="g-pstyle0">$15,000</p> |
| </div> |
| <div id="g-ai0-8" class="g-labels comptonLabels g-aiAbs bigOnly" style="top:66.7208%;left:63.05%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Florence</p> |
| </div> |
| <div id="g-ai0-9" class="g-labels comptonLabels g-aiAbs bigOnly" style="top:75.487%;left:34.15%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Gardena</p> |
| </div> |
| <div id="g-ai0-10" class="g-labels comptonLabels g-aiAbs" style="top:87.1753%;left:52.65%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Compton</p> |
| </div> |
| <div id="g-ai0-11" class="g-labels comptonLabels g-aiAbs" style="top:92.0455%;left:78.05%;margin-left:-34.5px;width:6.9%;"> |
| <p class="g-pstyle0">Lynwood</p> |
| </div> |
|
|
|
|
| </div> |
| |
| |
| |
| </div> |
|
|
| </div> |
|
|
|
|
| <div id="trigger" style="padding-bottom: 50px;"> |
|
|
| <section id="growth"> |
| <div class="step"> |
| |
| </div> |
|
|
| </section> |
|
|
| <section> |
| <div class="step"> |
| <p class="t4">Using 2017 census data, we displace each geographic unit vertically based on median annual household income. Low-income neighborhoods sink into canyons <span class="big">↓</span>, while rich areas soar far above the city as high plateaus. <span class="big">↑</span></p> |
| |
| </div> |
|
|
| </section> |
|
|
|
|
|
|
|
|
|
|
|
|
| <div class="spacer"></div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| <section id="coast"> |
| <div class="step"> |
|
|
| </div> |
|
|
| </section> |
|
|
| <section> |
| <div class="step"> |
| <p class="t6" style="margin-bottom: 0px; border-radius: 5px 5px 0px 0px;">Sea level is set equal to the median US income of $59,000 per year as a visual reference. Along the coast, affluent neighborhoods with incomes well above the US average form coastal mountain ranges which tower over less prosperous areas further inland.</p> |
| <p class="t7" style="border-radius: 0px 0px 5px 5px;">This visualization technique almost certainly underestimates the gap between rich and poor. The massive plateaus of the Beverly Hills area are likely even higher, as census income estimates at this scale are capped and designated $250,000+.</p> |
|
|
| </div> |
|
|
| </section> |
|
|
|
|
|
|
|
|
|
|
|
|
| <div class="spacer"></div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| <section id="disparity"> |
| <div class="step"> |
| </div> |
|
|
| </section> |
|
|
| <section> |
| <div class="step"> |
| <p class="t8" style="margin-bottom: 0px; border-radius: 5px 5px 0px 0px;">Precipitous terrain reveals dystopian levels of inequity within the city. In many places, wealthy neighborhoods with incomes exceeding $250,000 lie immediately adjacent to others with income well below the poverty line. Massive cliffs serve as an apt metaphor for severe local socioeconomic gaps given the long odds of upward social mobility.</p> |
|
|
| <p class="t9" style="border-radius: 0px 0px 5px 5px;">This landscape is abstract but far from imaginary. Rather, it is achingly familiar to those living in its shadows, whose daily struggle is made torturous by their proximity to a lavish and unobtainable lifestyle. For profound echoes of their frustration and pain, look no further than the sounds of L.A.'s prolific hip-hop music scene. </p> |
|
|
|
|
| </div> |
|
|
| </section> |
|
|
|
|
|
|
|
|
|
|
| <div class="spacer"></div> |
|
|
|
|
|
|
| <section id="compton"> |
| <div class="step"></div> |
| </section> |
|
|
|
|
|
|
| <section> |
| <div class="step"> |
| <p class="t10" style="position:relative;">From Compton, epicenter of West Coast rap, the view towards Beverly Hills helps us understand the futility expressed in lines such as these:<br><br><span class="lyrics">"Would I survive to make it up out this hole in time?<br>...Compton made you believe success wasn't real<br>...I was rehearsing in repetition the phrase<br> |
| Only one in a million will ever see better days |
| <br>...I was terrified they'll be the last black boys to fly<br> |
| Out of Compton"<br><br> |
| -Kendrick Lamar, "Black Boy Fly"</span> |
| <img src="data/img/kendrick_wikipedia.jpg" style="width:100%;height:auto;display:block;margin:0 auto;margin-top: 5px;border-radius:5px"> |
| <span class="att">Photo: Wikimedia commons</span> |
| Lamar's narrative masterpiece and second studio album "Good kid, M.A.A.D. City" paints a vivid picture of his coming-of-age in a Compton troubled by economic and racial inequality. A homogenous definition of income inequality is insufficient: extreme and <a href="https://www.businessinsider.com/income-and-racial-inequality-maps-2015-5">racialized inequity</a> continue to haunt not just LA, but our entire nation. |
| </p> |
| </div> |
|
|
| </section> |
|
|
|
|
| <div class="spacer"></div> |
| <div class="spacer"></div> |
| <div class="spacer"></div> |
|
|
|
|
|
|
| </div> |
|
|
|
|
| <div class="full"> |
| <p class="t11">Extreme income inequality raises troubling questions about the health of our society and our capacity for empathy. Politicians are quick to trumpet figures such as gross GDP and unemployment rates as evidence for a thriving economy. Rarely do they paint the true picture, of a nation at once bloated and starving, marked by historic, persistent, and racialized economic inequality. </p> |
|
|
| <p class="t12" style="font-style:italic;"> |
| “...when you have seen hate-filled policemen curse, kick, brutalize, and even kill your black brothers and sisters with impunity; when you see the vast majority of your twenty million Negro brothers smothering in an airtight cage of poverty in the midst of an affluent society...then you will understand why we find it difficult to wait. There comes a time when the cup of endurance runs over and men are no longer willing to be plunged into an abyss of injustice where they experience the bleakness of corroding despair.” <br><br>-Martin Luther King, 1963 "Letter From Birmingham Jail" |
| </p> |
|
|
| <p class="credits" style="font-size: 12px; margin-bottom: 50px;"> |
| Data: US Census Bureau, LA Times' Neighborhoods <br> |
| Tools: QGIS, Blender, GSAP, D3.js |
| </p> |
| </div> |
|
|
|
|
|
|
| <script src="libs/d3.v4.js"></script> |
| <script src="js/espanol.js"></script> |
| <script src="js/main.js"></script> |
| </body> |
| </html> |