Support Calendar Heatmap

[techniq]

• https://bl.ocks.org/mbostock/4063318
• https://github.com/DKirwan/calendar-heatmap
• https://github.com/g1eb/calendar-heatmap
• https://github.com/patientslikeme/react-calendar-heatmap
• http://bl.ocks.org/eesur/5fbda7f410d31da35e42

Maybe consider hourly heatmap as well:

• http://bl.ocks.org/oyyd/859fafc8122977a3afd6
• https://vega.github.io/vega/examples/heatmap/
• https://vega.github.io/vega/examples/annual-temperature/

[williaster]

this would be a good add, nice collection of examples 👍

[techniq]

While I don't normally like 3D visualizations, I do prefer them on my Github heatmap so it might be worth investigating as well.

[techniq]

Ported d3 calendar view example to vx

[techniq]

A few other examples

• Month by month with weeks as rows instead of columns - http://bl.ocks.org/KathyZ/c2d4694c953419e0509b
• Interactive example of this - https://codepen.io/g1eb/pen/KWXzLR

[techniq]

Ported the month by month example to vx

[techniq]

@hshoff @williaster I'm thinking it would be nice if we created a @vx/time package and extracted the pathMonth function from the calendar heatmap example...

import { timeDays, timeWeek, timeMonths, timeYear } from 'd3-time';

const CELL_SIZE = 17;

function pathMonth(t0) {
  const d0 = t0.getDay();
  const w0 = timeWeek.count(timeYear(t0), t0);
  const t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0);
  const d1 = t1.getDay();
  const w1 = timeWeek.count(timeYear(t1), t1);

  return `
    M${(w0 + 1) * CELL_SIZE},${d0 * CELL_SIZE}
    H${w0 * CELL_SIZE} V${7 * CELL_SIZE}
    H${w1 * CELL_SIZE} V${(d1 + 1) * CELL_SIZE}
    H${(w1 + 1) * CELL_SIZE} V0
    H${(w0 + 1) * CELL_SIZE}Z
  `;
}

...into a component, such as

<PathMonth firstDayOfMonth={firstOfMonth)} cellSize={17} />

Although maybe this better belongs under @vx/shape

It might also be useful to extract some kind of <Calendar /> component between this example and alternative calendar heatmap but I'm not for certain the best API to expose. It's not much boilerplate so maybe just some official examples to show how to create these as I don't want to loose any flexibility.

I know we also have <HeatmapCircle> / <HeatmapRect> so maybe it's just using these / extending them

[joyjwlee]

While I don't normally like 3D visualizations, I do prefer them on my Github heatmap so it might be worth investigating as well.

How did you get the 3D visualization? I don't seem to be able to find any code that would take your contribution information and output a 3D version of your calendar.

[tarekrached]

looks like it's this extension

[joyjwlee]

Yup, I've found it a while back -- thank you nevertheless! :)

[mikestopcontinues]

@techniq You saved me hours with your examples. As a user, my preference would be a documented example of how to get this vis working with HeatmapRect. And if making it work required deeper changes, I would still prefer that component be the one that handles it. It was the natural first stop before I thought to google it. (And a series of HeatmapRects may yet be how I implement it.)

[FullStackPro]

While I don't normally like 3D visualizations, I do prefer them on my Github heatmap so it might be worth investigating as well.

How did you get the 3D visualization? I don't seem to be able to find any code that would take your contribution information and output a 3D version of your calendar.

I don't know much about Spline but maybe it could be possible via a web browser with Spline.Design