d3 / d3-shape

Graphical primitives for visualization, such as lines and areas.
https://d3js.org/d3-shape
ISC License
2.48k stars 308 forks source link

Add pathMonth for Calendar View to D3 #170

Open curran opened 3 years ago

curran commented 3 years ago

This little snippet appears in calendar view visualizations, but I don't believe it's part of D3 itself.

function pathMonth(t) {
  const n = weekday === "weekday" ? 5 : 7;
  const d = Math.max(0, Math.min(n, countDay(t.getUTCDay())));
  const w = timeWeek.count(d3.utcYear(t), t);
  return `${d === 0 ? `M${w * cellSize},0`
      : d === n ? `M${(w + 1) * cellSize},0`
      : `M${(w + 1) * cellSize},0V${d * cellSize}H${w * cellSize}`}V${n * cellSize}`;
}

(from https://observablehq.com/@d3/calendar-view)

Might it make sense to add this to d3-shape? Or maybe as a separate D3 package?

mbostock commented 3 years ago

Previously d3/d3#449.

curran commented 3 years ago

Ah yes! Also https://github.com/d3/d3/issues/2851

curran commented 1 month ago

Here's the latest implementation, from https://observablehq.com/@d3/calendar/2

  // A function that draws a thin white line to the left of each month.
  function pathMonth(t) {
    const d = Math.max(0, Math.min(5, countDay(t.getUTCDay())));
    const w = timeWeek.count(d3.utcYear(t), t);
    return `${d === 0 ? `M${w * cellSize},0`
        : d === 5 ? `M${(w + 1) * cellSize},0`
        : `M${(w + 1) * cellSize},0V${d * cellSize}H${w * cellSize}`}V${5 * cellSize}`;
  }