Skip to content

Commit

Permalink
Change bezos wealth to 176 billion, various style fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@MKorostoff
MKorostoff committed Mar 8, 2021
1 parent ce4f5e5 commit 4b30afa
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 16 deletions.
17 changes: 8 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<meta property="og:description" content="Wealth inequality in the United States is out of control. Here we visualize the issue in a unique way." />
<meta property="og:image" content="https://mkorostoff.github.io/1-pixel-wealth/img/off-the-chart.png" />

<link rel="stylesheet" type="text/css" href="main.css?version=1.6">
<link rel="stylesheet" type="text/css" href="main.css?version=1.7">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
</head>
<body>
Expand All @@ -49,16 +49,15 @@ <h2 class="wealth-title">$1,000</h2>
</div>

<div class="wealth-wrapper median">
<h2 class="wealth-title">$63,179 (Median US household income)</h2>
<div class="wealth"></div>
<h2 class="wealth-title">$68,000 <span class="explainer">(Median US household income)</span></h2>
<div class="wealth median-income"></div>
</div>

<div class="wealth-wrapper million">
<h2 class="wealth-title">$1 million</h2>
<div class="wealth"></div>
</div>


<div class="wealth-wrapper billion">
<div class="wealth">
<h2 class="wealth-title">$1 billion</h2>
Expand All @@ -67,7 +66,7 @@ <h2 class="wealth-title">$1 billion</h2>

<div name="bezos" class="wealth-wrapper bezos">
<div id="bezos" class="wealth ruler">
<h2 class="wealth-title">$200 billion (wealth of Jeff Bezos)</h2>
<h2 class="wealth-title">$176 billion (wealth of Jeff Bezos)</h2>
<div class="counter" id="bezos-counter"></div>
<div class="key">
<span>$80 million</span>
Expand Down Expand Up @@ -123,7 +122,7 @@ <h2 class="wealth-title">$200 billion (wealth of Jeff Bezos)</h2>

<div class="infobox infobox-half year-veteran">
<div class="square shadow">
<div class="title">Annual cost to house every single homeless veteran.</div>
<div class="title">Annual cost to house every homeless veteran.</div>
</div>
</div>

Expand Down Expand Up @@ -222,12 +221,12 @@ <h2 class="wealth-title">$200 billion (wealth of Jeff Bezos)</h2>
<g id="Graphic_3">
<text class="desktop-zuck" transform="translate(715.2031 353.7383)" fill="black">
<tspan font-family="Arial" font-size="16" font-weight="400" fill="black" x="2.2226562" y="14">Mark Zuckerberg </tspan>
<tspan class="zuck-wealth" font-family="Arial" font-size="12" font-weight="400" fill="black" x="26.663086" y="28.523438">($82 billion)</tspan>
<tspan class="zuck-wealth" font-family="Arial" font-size="12" font-weight="400" fill="black" x="26.663086" y="28.523438">($96 billion)</tspan>
</text>
<text class="mobile-zuck" transform="translate(668 353.7383)" fill="black">
<tspan class="zuck-name" font-family="Arial" font-size="16" font-weight="400" fill="black" x="55.36719" y="14">Mark </tspan>
<tspan class="zuck-name" font-family="Arial" font-size="16" font-weight="400" fill="black" x="12" y="41.523438">Zuckerberg </tspan>
<tspan class="zuck-wealth" font-family="Arial" font-size="12" font-weight="400" fill="black" x="21.880859" y="67.046875">($82 billion)</tspan>
<tspan class="zuck-wealth" font-family="Arial" font-size="12" font-weight="400" fill="black" x="21.880859" y="67.046875">($96 billion)</tspan>
</text>
</g>
<g id="Graphic_5">
Expand Down Expand Up @@ -645,6 +644,6 @@ <h2 class="title what-could-we-do">We cannot accept this level of inequality any
<a class="about-this" target="_blank" href="https://github.com/MKorostoff/1-pixel-wealth/blob/master/README.md">About this page</a>

</div>
<script type="text/javascript" src="main.js?version=1.5"></script>
<script type="text/javascript" src="main.js?version=1.7"></script>
</body>
</html>
28 changes: 23 additions & 5 deletions main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,10 +153,11 @@ h1 {
.four-hundred .wealth > .wealth-title {
flex-basis: 420px;
}
.four-hundred .intro {
.four-hundred .infobox.intro {
margin-left: 0;
position: relative;
width: auto;
width: 10000px;
}
.wealth > .wealth-title {
flex-basis: 1%;
Expand Down Expand Up @@ -282,14 +283,18 @@ h1 {
margin-top: 5px;
}
.median {
width: 480px;
width: 320px;
}
.median .wealth{
.median .wealth {
width: 7.94px;
height: 7.94px;
}
.explainer {
font-size: 16px;
font-weight: normal;
}
.million {
width: 200px;
width: 150px;
}
.million .wealth {
width: 31.62px;
Expand All @@ -301,8 +306,13 @@ h1 {
height: 500px;
background-color: #03A9F4;
}
@media (max-width: 450px) {
.billion .wealth {
border-bottom: 3px dotted #007fb7;
}
}
.bezos .wealth {
width: 400000px;
width: 352000px;
height: 500px;
background-color: orange;
}
Expand Down Expand Up @@ -378,6 +388,14 @@ h1 {
.year-veteran .square {
position: static;
}
@media (max-width: 450px) {
.year-veteran .title {
max-width: 210px;
}
.year-veteran .square {
border-bottom: 4px dashed #75a23e;
}
}
.year-chemo {
width: auto;
}
Expand Down
3 changes: 1 addition & 2 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,12 +74,11 @@ babies.addEventListener('scroll', function(){
baby_counter.innerHTML = thousand.format(Math.floor(babies.scrollTop / bg_size * 5));
})

//Todo: stop executing once scrolled past
function update_wealth_counter() {
if (bezos_viewable()) {
if (bezos_counter_viewable()) {
let wealth = (window.scrollX - bezos.offsetLeft + 175) * 500000;
bezos_counter.innerHTML = (wealth < 200000000000) ? money.format(wealth) : "$200,000,000,000";
bezos_counter.innerHTML = (wealth < 176000000000) ? money.format(wealth) : "$176,000,000,000";
}
else {
bezos_counter.innerHTML = '';
Expand Down

0 comments on commit 4b30afa

Please sign in to comment.