logo

1-pixel-wealth

Source code for <https://mkorostoff.github.io/1-pixel-wealth/>: Wealth shown to scale

main.js (3855B)

    

  1. var bezos = document.getElementById('bezos');
  2. var bezos_counter = document.getElementById('bezos-counter');
  3. var bezosCounterStart = document.getElementById('bezos-counter-start');
  5. var four_hundred = document.getElementById('four-hundred');
  6. var four_hundred_counter = document.getElementById('four-hundred-counter');
  7. var four_hundred_counter_start = document.getElementById('four-hundred-counter-start');
  9. var sixtyPercent = document.getElementById('sixty-percent');
  10. var sixtyPercentIndicator = document.getElementById('sixty-percent-indicator');
  11. var sixtyPercentScrollPercentage = 0.0;
  12. var babies = document.getElementById('babies-wrapper');
  13. var baby_counter = document.getElementById('baby-counter');
  15. var thousand = new Intl.NumberFormat('en-US')
  16. var money = new Intl.NumberFormat('en-US', {
  17.   style: 'currency',
  18.   currency: 'USD',
  19.   minimumFractionDigits: 0,
  20.   maximumFractionDigits: 0,
  21. });
  22. var additional_instructions_shown = false;
  24. function detect_confused_user(e, timer) {
  25.   if (!additional_instructions_shown) {
  26.     additional_instructions_shown = true;
  28.     setTimeout(function(){
  29.       if (window.scrollX < 1) {
  30.         document.getElementById('instructions').classList.add("show");
  31.       }
  32.     }, timer);
  33.   }
  34. }
  35. function detect_slightly_confused_user(e, timer) {
  36.   detect_confused_user(e, 2000);
  37. }
  38. function detect_very_confused_user(e, timer) {
  39.   detect_confused_user(e, 4500);
  40. }
  42. if (window.innerWidth > 450) {
  43.   document.addEventListener("mousemove", detect_very_confused_user, {once: true});
  44.   document.addEventListener("mousewheel", detect_slightly_confused_user, {once: true});
  45.   document.addEventListener("DOMMouseScroll", detect_slightly_confused_user, {once: true});
  46. }
  48. window.addEventListener('scroll', function(){
  49.   update_wealth_counter();
  50. });
  52. function generate_sixty_percent() {
  53.   for (var i = 0; i < 100; i++) {
  54.     var node = document.createElement("div");
  55.     node.classList = "people";
  56.     if (i === 0) {
  57.       node.classList += " first";
  58.     }
  59.     document.getElementById("sixty-percent").appendChild(node);
  60.   }
  61. }
  62. generate_sixty_percent();
  64. sixtyPercent.addEventListener('scroll', function(){
  65.   let newScroll = ((sixtyPercent.scrollTop / sixtyPercent.scrollHeight) * 60).toFixed(1);
  66.   if (sixtyPercentScrollPercentage !== newScroll) {
  67.     sixtyPercentScrollPercentage = newScroll;
  68.     sixtyPercentIndicator.innerHTML = newScroll + '%';
  69.   }
  70. })
  71. babies.addEventListener('scroll', function(){
  72.   let is_mobile = window.innerWidth <= 450;
  73.   let bg_size = (is_mobile) ? 68 : 160;
  74.   baby_counter.innerHTML = thousand.format(Math.floor(babies.scrollTop / bg_size * 5));
  75. })
  77. function update_wealth_counter() {
  78.   if (bezos_viewable()) {
  79.     if (bezos_counter_viewable()) {
  80.       let wealth = (window.scrollX - bezos.offsetLeft + 175) * 500000;
  81.       bezos_counter.innerHTML = (wealth < 185000000000) ? money.format(wealth) : "$185,000,000,000";
  82.     }
  83.     else {
  84.       bezos_counter.innerHTML = '';
  85.     }
  86.   }
  87.   else if (four_hundred_viewable()) {
  88.     if (four_hundred_counter_viewable()) {
  89.       let wealth = (window.scrollX - four_hundred.offsetLeft + 175) * 500000;
  90.       four_hundred_counter.innerHTML = (wealth < 3200000000000) ? money.format(wealth) : "$3,200,000,000,000";
  91.     }
  92.     else {
  93.       four_hundred_counter.innerHTML = '';
  94.     }
  95.   }
  96.   function bezos_viewable() {
  97.     return window.scrollX < bezos.offsetLeft + bezos.offsetWidth + 100;
  98.   }
  99.   function bezos_counter_viewable() {
  100.     return bezosCounterStart.offsetLeft - window.scrollX < (window.innerWidth);
  101.   }
  102.   function four_hundred_viewable() {
  103.     return window.scrollX < four_hundred.offsetLeft + four_hundred.offsetWidth + 100;
  104.   }
  105.   function four_hundred_counter_viewable() {
  106.     return four_hundred_counter_start.offsetLeft - window.scrollX < (window.innerWidth);
  107.   }
  108. }
  109. function toggleZoom() {
  110.   document.getElementById('line-chart').classList.toggle('zoom');
  111. }