Show HN: Visualize your day as 144 rectangles | Hacker News Reader

Show HN: Visualize your day as 144 rectangles

rectangles.app

201 pointsjmstfv102 comments

Open articleView on HN

It is a good idea, but the layout hurts my eyes due to the Hermann grid illusion.

https://en.wikipedia.org/wiki/Grid_illusion

“There are 121 fleeting black dots in a day”

It wasn't intentional!

I experimented with different colors, but seems like all of them produce this illusion :/

I'll see what I can do.

UPDATE:

* rounded corners to make rectangles look more pleasant

* switched to pastel colors to lower the contrast and make the grid less taxing for the eyes

Thanks everyone for the input!

You might have to do 144 circles instead, I think that would have enough whitespace around each one to stop the illusion.

Fiddled around with it a bit and if you reduce the spacing between the boxes to a few pixels the illusion goes away for me or is barely noticeable. But, the aesthetics of the whole thing are quite different then.

Eliminate all space in between rectangles. Aesthetics be damned.

Or add the circles intentionally? At least they wont pop in and out then.

Seems better with a border radius of 1.25rem. Also making the border thickness very thin seems to help, as well as some making it more oblong.

Reduce the contrast, i.e. make the black less black.

Maybe try using circles instead of rectangles, and the progress within each circle is shown like a pie chart?

Rounded corners might help?

Try hexagons, they’re equidistant between centers.

"Hexagons are the bestagons" according to CGP Grey. https://www.youtube.com/watch?v=thOifuHs6eY

Personally I prefer fractals. A 6-sided hexagon is just 2* 3-sided triangles. Or 6 of them, depending how you prefer to tile the plane.

https://i.pinimg.com/originals/c9/44/99/c94499bb9a0057f8573e...

So how about a day schedule organised by Sierpinski triangles? Lots of space in the middle for resting.

Could rounded corners help here?

It would be fun to see this with local daylight hours mapped to the squares, so I could get a feel for where my consumption is at within "daylight" vs the whole "day"

SunCalc is a good tool for this, if you're interested: https://github.com/mourner/suncalc

(I've used it on a personal project, and the API was a little awkward but the results are good: https://daylight.website/)

That's interesting - didn't cross my mind! Thanks for the pointer.

Btw, the website you linked doesn't work for me. I get the "Uncaught (in promise) TypeError: navigator.geolocation is undefined" on Firefox 98.0.2 on macOS 12.3.1

Your privacy settings / extensions are blocking geolocation

Your personal project is a pretty cool and interesting way to visualize daylight (especially using the fast forward button to go through a week at a time). Thanks for making it.

Thank you, I'm glad you enjoyed it. I love the week skip too, interesting to see the shape change over the year.

Undocumented feature: if you hold down "w" or "shift+w" keys you can skip through weeks even faster.

I love your personal project! Would make an amazing smartwatch face!

There's an Apple watch face called "solar dial" that's pretty similar, and I've seen others like this.

To me this is the most logical watch face — everything else just confuses matters.

Oo, this does watch face does look nice https://www.hodinkee.com/articles/the-eerie-beauty-of-the-ap...

Funnily enough I had that article already saved to pinboard!

Love your app btw, I made a similar clock years ago but with just sunrise and sunset times. I've just updated it with suncalc.js to add twilight times also, so thanks.

Most hackers are active outside of this time range.

Agreed, but still useful IMHO to get a sense of "where" you are in the day.

very cool project!

Those perspective items don't really provide perspective. I don't hate them, but a Jupiter day means nothing to me. The "average workday" is good and meaningful.

Some thoughts on good "perspective" items:

* Average runtime of a film

* Average commuting time (US, presumably)

* 15-minute standup

You do have a point. Replaced Jupiter's day length with a good night's sleep. Thanks!

I am grossly offended by this

    .grid-item {
      ...
      height: 4.5rem;
      width: 4.5rem;
    }

That's a square.

Fine, a square is a rectangle. But that's a square.

There's no media queries to eliminate the square. There's no JS that affects the square-ness. It's all squares.

144 squares.

Yikes, I haven't thought anyone would venture there and see that monstrosity...

Well, now they're rectangles!

      height: 4.5rem;
    - width: 4.5rem;
    + width: 4.6rem;

consider my offense revoked

Can someone clarify?

It’s tongue in cheek - the original site had squares not the advertised “rectangles” - even though a square is a type of rectangle most people consider rectangles to be the non-squares.

My 5-year-old knows that squares are a type of rectangle. Her kindergarten teacher corrected her when she said this during a shapes lesson and told her that rectangles always have two sides longer than the other.

We haven't bothered to correct the teacher, but used it as a lesson to say that even intelligent people aren't always correct about everything.

(She also had a preschool teacher that told her that blood is blue before it gets oxygen. This lesson is one that will be repeated throughout her life.)

There's the technical definition where rectangle is a genus of the species square, and there's the colloquial definition - if there are two boxes and one is a cube and the other is elongated, most people will ask for "the rectangular" one and not the "non square" one.

And an important part of life is learning when to pick your battles.

>where rectangle is a genus of the species square

Wrong battle, I know, but to nitpick the species is more likely quadrilateral.

Quadrilateral would be the family, and rectangle the genus, square the species. Or you could promote quadrilateral to order and designate parallelogram the family.

I thought polygons as the family ...

I see that I'm not the only one inspired by this blog post [1]. I did a similar visualization with blocks to display my working hours [2].

[1] https://waitbutwhy.com/2016/10/100-blocks-day.html [2] https://github.com/am-on/work-timer

Reminded me of https://waitbutwhy.com/2014/05/life-weeks.html from the same website. One of the few things on the Internet that changed my entire outlook on life.

I did the same thing when my grandfather died: A grid with each square representing a week of his life, and each row representing one year. Then, we mapped as many events from his life as possible.

I am doing an excel sheet, 52 boxes per row, one row per year. Inspired by waitbutwhy article.

Do you find some years need 53 boxes?

If you're born April 1, 52 weeks after your birth would be March 31, and after 52 more weeks it would be March 30 (before considering leap years).

I guess it can stay 52 boxes, and the last box has a day extra (or two, on leap years).

Oh no, I don't go in that details, simply, every month, the weeks start on 1st, 8th, 15th, 22nd.

Only Jan, Jun, July, Dec gets another week, 5th one, on 27th.

So all months have 4 columns, labeled 1,8,15,22. Jan, Jun, Jul, Dec have 5 columns.

Whole sheet is a fillable grid of 52 columns and 90 rows.

A pre column list the year like 2002, 2003, 2004 etc. Next pre column list my age like 0,1,2,3 till 90. Then above explained grid. Then again, first two pre columns copied.

Each cell has light grey border. Border darkens to black between months columns. Border also darkens at every decade row.

If an event (like travel) happens on certain date (like 13th), it simply fills the whole week.

I assume that in overall big picture of life, a rounding off of week will not matter much.

Looks pretty neat!

And yet the vast majority of these rectangles will be spent JUST on maintaining you so you can spend a minority of them on either work or things you actually want to do.

Sleep, eat, exercise, shower, dress, undress, shop, drive (often in traffic), errands, poop, pee, fap (or sex if you are so positioned), then theoretically get a few hours of work done (hopefully productive and fulfilling but often filled with meetings and other drudgery), then babytime if you have one, and THEN there's maybe 1 row of rectangles left for you to spend how you actually please!

It's why I follow the "wake up early, work-out, get something done" organizing principle for my day. My day is usually in pretty good shape by 9am, even if nothing else happens.

I have to say, it took me a very long time as a self-identified "night owl" but I finally came around to this. I schedule an Orangetheory class at 8:15 M-W-F (I could go earlier, and have, but I have a 9 month old now and the nanny comes @ 8) and I certainly feel like I get a lot more done (also my energy starts off high).

Side note, I really appreciated the "no javascript" message:

>Sorry pal, but this won't work without JavaScript. You are probably doing that for privacy reasons, and I do respect that. You can download this website, inspect the source code, and run it locally. Or, you can whitelist it in your browser/script blocker. I don't have any third-party trackers on this website, and the code is open-sourced, so there's not much to be worried about.

It's perhaps a neat UI for a day planner. Being able to drag to select a block of squares and then attach a color/label to them would be a nice next step. Could work entirely client side.

Is this what you're looking for: https://144blocks.com ?

Interesting. Thanks for the idea!

Sounds like a good use case for the browser's localeStorage API

Storage for each locale the application supports.

This is how bitcoin works, 144 blocks every day, 10mins each on average!

That is far too many rectangles. My cortisol spiked just reading the headline. Please turn it down to a more manageable number, like 3.

Or twelve. And make each a segment of a circle. And put the respective number 1-12 next to it.

So a clock that takes two hours per segment?

Hey OP - are you able to live off of Notion Backup? How's business? How many people work on the project?

Still haven't fully launched it yet. It's only me, and it's not the only thing I do.

FYI: Hovering over the examples breaks the actual counter if the actual counter is less than the value of the hovered example counter. It causes the actual counter to be set to the value of the hovered example counter.

https://imgur.com/a/bzamnie

Spotted it in the morning as well. Fixed, thanks!

Cool project! Just a quickie, but might be worth changing "nitty gritty" to "the details". Depending on the etymology you look at, the term could be considered offensive (so probably not worth the risk!).

I was very confused by this, so I looked it up:

"It has been suggested that the word originally referred to the debris remaining in the holds of slave ships after the slaves had been disembarked, but there is no evidence of such use before the 20th century when slavery was prevalent." -- Wiktionary

I do not think we should be deprecating colorful words because someone invented a fake etymology for them. Nor, for that matter, because someone somewhere might unreasonably take offense.

Done, thanks!

If it were a gauge, it would remind me of a 24h clock [0] or an app that shows the day/night cycle circularly [1].

[0]: https://www.pulju.net/images/products/24h-clock_orig.jpg

[1]: https://apps.apple.com/de/app/sundial-solar-lunar-time/id976...

Two ideas:

1. How about just 48 Pomodoro-sized rectangles?

2. For those of us with a shifted sleep rhythm it would be nice to be able to set the start-of-day time.

I agree that 1 Pomodoro ≅ 1 half hour, and 1 day = 48 half hours. But does 1 day = 48 Pomodoros? Maybe with lots of stimulants.

This is great! I built something similar on itunes here https://apps.apple.com/us/app/timeyet/id1613447823

I feel like tools like this are extremely valuable to those with time blindness from ADHD, Autism, etc...

Love the aesthetics of your app.

> I feel like tools like this are extremely valuable to those with time blindness from ADHD, Autism, etc...

I'll read up on this, thanks for bringing it up!

I was thinking this would be cool as a tree map (https://en.m.wikipedia.org/wiki/Treemapping) since that allows for nicely visualizing hierarchical categories.

It's a cool idea, but what exactly am I supposed to do or get from this?

Visitors on mobile devices can’t hover. Why not just show the examples all the time?

You mean rotating between examples every X seconds?

Perhaps making them toggles would work better.

Even if hover pseudo classes would work in mobile, we don’t see the grid while looking at the list items, so we would not even notice something has changed.

I prefer the day visualized as 86400 rectangles (https://24HourHomepage.com)

I've been using https://144blocks.com, is this inspired by that?

Suggestion: Change the cursor when hovering over the text. I didn't understand whether to hover over the text or the rectangles.

Apart the way to visualize the blocks if you spent 44 blocks to sleep (almost 8 hours) you have exactly 100 blocks (10x10) of 10 minutes.

How did you get .82 rectangles from light taking 8 minutes 20 seconds to reach Earth from the sun? Isn't that .8333... minutes?

You're right. Fixed, thanks!

It wasn't wrong before. The time varies from 8.178 to 8.456 minutes.

"Average psilocybin mushroom trip" nice

Weird you're being downvoted... Looking forward to the day SV finds out about psylocibin!

Is that an april fool's joke?

Jama knows what's important.

So this is like a calendar but just for a day?

should we have some columns grayed out to show downtime similar to a weekend for a week?