🏠 back to Observable

Plot.cell for calendar views: computing overall height to keep proportions

Hi folks, I’m building a dynamic calendar view with Plot.cell like this one:

With “dynamic” I mean that the number of years in the view changes according to the data.

I need to set the overall height of the view to make each year block a rectangle with fixed proportions. Working this way, day tiles should be rendered as squares. I’ve tried to set height = 90 * number_of_years but this naive rule seems not working.

How many years are you going back?

Could it be that the the number of weeks in each year can slightly fluctuate? Something like d3.range(2000, 2020).map(y => d3.utcWeek.count(new Date(y, 0, 1), new Date(y+1, 0, 1))) can give you the number of weeks which would determine the base height, maybe?

1 Like

Hey @visnup, thanks for your reply!

I’m trying to generalize that notebook for visualizing data about every Twitter profile. So, I do not know in advance how many years need to be rendered in the calendar. It depends on data.

I think that the overall height shouldn’t be affected by the fluctuation of the weeks amount per year. Not completely sure, but it looks like the height of each year view is constant in facets. Weekdays are 7. I can’t figure out a way to compute the Plot height in order to render day tiles as squares regardless of the number of years.