Observable JS
Calculator
Author

Scott Franz

Published

February 22, 2022

Abstract
A waffle chart displaying how many weeks you have lived, and how many you have left.

Introduction

Here is a little existential angst for your . Each red box is a week of your life. Each gray box in addition is a week left in an average individual’s lifetime in the US.

Code
viewof birthdate = Inputs.date({label: "Your Birthday", value:"1991-11-11", required: true, submit: true, width})
Code
import {addAnimation} from "@mkfreeman/plot-animation"

waffles = addAnimation(Plot.plot({
  width,
  color: {
    range: ["red", "lightgray"]
  },
  marks: [
    Plot.cell(
      units,
      Plot.stackY({
        x: (_, i) => i % 52,
        fillOpacity: 0,
        fill: "group"
      })
    )],
  x: { axis: null },
  y: { axis: null }
}), { type: "rect", fillOpacity: 1, delay: 2 })

This was my inspiration. Also thanks to Fil for the waffle chart notebook

Math

today = new Date()

day = today.getDay()

Difference_Today = today.getTime() - birthdate.getTime();

Life_In_Weeks = +((Difference_Today / (1000 * 3600 * 24)) / 7).toFixed(0);

US_Life_Expectancy_2020 = 77.0 * 52

Difference_In_Life = US_Life_Expectancy_2020 - Life_In_Weeks

week = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

data = [
  {group: "Life", number: Life_In_Weeks},
  {group: "Total", number: Difference_In_Life}
]

units = data.flatMap(d => d3.range(Math.round(d.number)).map(() => d))