2c:null 2d:["$","title",null,{"children":"Calendar: U.S Federal Holidays (2025) | Deepali Kank | Observable"}] 32:T129b,chart1 = { const width = 1000; const height = 950; const margin = { top: 20, right: 50, bottom: 20, left: 20 }; const proposedColor = "#ff006e"; const nonProposedColor = "#8338ec"; const svg = d3 .select(DOM.svg(width + margin, height + margin)) .attr("viewBox", [0, 0, width, height]) .style("font", "10px sans-serif") .style("text-anchor", "middle"); const x = d3 .scaleBand() .domain(["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]) .range([0, 280]) .padding(0.3); const y = d3.scaleBand().domain(d3.range(1, 7)).range([20, 180]).padding(0.3); const calculateWeek = (day, startDay) => { return Math.floor((day + startDay - 1) / 7) + 1; }; const monthGrid = (monthData, monthIndex) => { const monthGroup = svg .append("g") .attr( "transform", `translate(${margin.left + (monthIndex % 3) * 300},${ margin.top + Math.floor(monthIndex / 3) * 220 })` ); monthGroup .append("text") .attr("x", 140) .attr("y", -10) .attr("dy", "0.35em") .style("font-weight", "bold") .style("font-size", "15px") .style("font-family", "Chivo") .text(monthData[0].month_name); const startDay = monthData.find((d) => d.month_day === 1).day_abbr; const startDayIndex = x.domain().indexOf(startDay); monthData.forEach((d) => { d.month_week = calculateWeek(d.month_day, startDayIndex); }); const dates = monthGroup .selectAll("g.date") .data(monthData) .enter() .append("g") .attr("class", "date") .attr( "transform", (d) => `translate(${x(d.day_abbr)},${y(d.month_week)})` ); // Append circles for holidays with appropriate fill color const circles = dates .filter((d) => d.holiday_name !== null && d.holiday_name !== "") .append("circle") .attr("r", 12) .attr("fill", (d) => d.is_proposed === "yes" ? proposedColor : nonProposedColor) .attr("opacity", 0.7); // Append the date text dates .append("text") .attr("dy", "0.35em") .style("font-size", "14px") .style("fill", (d) => d.holiday_name !== null && d.holiday_name !== "" ? "white" : "black" ) .text((d) => d.month_day) .style("font-family", "Chivo"); // Create a div element for the tooltip const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("max-width", "200px") // Set the max-width of the tooltip .style("position", "absolute") .style("color", "white") .style("padding", "8px") .style("border-radius", "4px") .style("visibility", "hidden") .style("text-align", "left") .style("font-size", "12px") .style("font-family", "Chivo") .style("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.2)"); // Append tooltip for holidays and add stroke on hover dates .filter((d) => d.holiday_name !== null && d.holiday_name !== "") .on("mouseover", function (event, d) { tooltip .style("visibility", "visible") .html( `${d.holiday_name}
${d.details}` ) .style( "background-color", d.is_proposed === "yes" ? proposedColor : nonProposedColor ) .style("opacity", 0.9); // Add stroke to the hovered circle d3.select(this) .select("circle") .attr("stroke", "black") .attr("stroke-width", 2); }) .on("mousemove", function (event) { tooltip .style("top", event.pageY + 15 + "px") .style("left", event.pageX + 15 + "px"); }) .on("mouseout", function () { tooltip.style("visibility", "hidden"); // Remove stroke from the circle d3.select(this).select("circle").attr("stroke", "none"); }); // Add day labels only for October, November, and December if (["October", "November", "December"].includes(monthData[0].month_name)) { const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; monthGroup .selectAll("text.day-label") .data(days) .enter() .append("text") .attr("class", "day-label") .attr("x", (d, i) => x(d) + x.bandwidth() - 30) .attr("y", y.range()[1]) // Position below the last row of dates .attr("dy", "0.35em") .style("font-size", "13px") .style("font-family", "Chivo") .text((d) => d); } }; const monthsData = d3.groups(data, (d) => d.month_name); monthsData.forEach((month, index) => monthGrid(month[1], index)); return svg.node(); }33:[{"id":"37743be8ff6f27b7f947d97b9da06168df0f9715d3a843a70886e50c3235fed8bdd2bd239d96958b5561e8c2bfe72b7d1b533cbdc6b3db05016b12ddafdd4fb6","href":"https://static.observableusercontent.com/files/37743be8ff6f27b7f947d97b9da06168df0f9715d3a843a70886e50c3235fed8bdd2bd239d96958b5561e8c2bfe72b7d1b533cbdc6b3db05016b12ddafdd4fb6","name":"calendar_2025.csv","type":"text/csv","lastModified":1718771973782.907,"size":15914}] 30:{"id":"0b8cefa3ee1ded42","slug":null,"title":"Calendar: U.S Federal Holidays (2025)","thumbnail":"a597f73eef2c3d9c326302fc35d20461487f8f31dd8d04505cd6bd3da160dc83","access_level":"public","create_time":"$D2024-06-19T04:39:01.117Z","update_time":"$D2026-07-15T12:56:40.599Z","view_time":null,"first_public_time":"$D2024-06-19T09:42:07.254Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"f95c5551c5b4848e","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":"starter_2024"},"version":230,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0b38fd39f0b1d2da","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":null}],"members":[{"type":"individual","id":"0b38fd39f0b1d2da","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":null,"role":"editor"},{"type":"team","id":"f95c5551c5b4848e","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Calendar: U.S Federal Holidays (2025)","cells":[{"id":148,"value":"# Calendar: U.S Federal Holidays (2025)\n\n

Federal holidays in the United States are 11 calendar dates designated by the U.S. federal government as holidays. On these days non-essential U.S. federal government offices are closed and federal employees are paid for the day off.

\n Federal Holidays and \n Proposed Federal Holidays.\n

\n\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"calendar_2025 = await FileAttachment(\"calendar_2025.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"calendar_2025","database":"$undefined"},{"id":11,"value":"SELECT *, \n CASE \n WHEN month_num < 5 THEN 1\n WHEN month_num < 9 THEN 2\n WHEN month_num < 13 THEN 3\n END as row_num,\n \n CASE\n WHEN month_num IN (1, 5, 9) THEN 1\n WHEN month_num IN (2, 6, 10) THEN 2\n WHEN month_num IN (3, 7, 11) THEN 3\n WHEN month_num IN (4, 8, 12) THEN 4\n END as col_num\nFROM \"calendar_2025\"","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"data","database":"calendar_2025.csv"},{"id":163,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"2","titling":"auto"}} 31:"$30:body"