43:["$","title",null,{"children":"When In The Year Holidays Occur | Maya Graham | Observable"}] 4b:T811,As I write this, November has just started and the annual holiday cheer has already started creeping into view. While I brace myself to be quickly tired of songs about it being, “The most wonderful time of the year,”, I've been thinking; why now? Maybe the seasonal emphasis on family, food, connection, and celebration isn't random, but comes from a human need for such things when the winners get long, grey, and cold. A need for something to look forward to and celebrate. If this is the case, would it follow that holidays in the world’s Southern hemisphere have more holidays during the opposite side of the calendar year during their winter? Maybe not since some of the largest global holidays are popularized/celebrated by northern hemisphere nations. Is there a time of the month that is more popular to celebrate? Maybe it's not the seasonal depression, but the marking of change that may motivate this timeframe. If it is a desire to wrap things up or start anew, is it a stretch to guess that holidays also cluster around the start and end of months? This central curiosity - when it’s most common for holidays to occur around the globe - led me to my hypothesis for this project: > ***Holidays across the globe are celebrated primarily in the starting and ending months of the year (December-January) and starting and ending halves of the months (the 1st-5th and 22nd-31st).*** My data comes from a Kaggle data set which is a scraping of the popular timeanddate.com's page for exploring recognized major holidays across the globe. Sources: * For water use per capita: [KomalKomal7's Kaggle Set](https://www.kaggle.com/datasets/komalkomal7/global-public-holidays-dataset-20212040) * Above Kaggle set was derived from: [timeanddate](https://www.timeanddate.com/holidays/) Resources used: * Google Gemini (see code comments denoting where used and for what) * Colors were developed and tested for accessibility using Coolors. [Link to my palette here](https://coolors.co/ecded7-7ddaea-4eacc2-1c8aa3-05647a-013b49-0b1827-d86031-df803b-e6a045)4c:T4bb,viewof yearShow = { //GenAI (Gemini) used heavily in this cell to help with logic surrounding All (what it outputs const cb = Inputs.checkbox([2021, 2022, 2023, 2024, 2025, 2026, "All"], {// and how to autoatically unselect all label: "For Year(s):",// if something else is unselected) value: [2021], format: String }); let previous = cb.value; //has something changed let updating = false; const allYears = [2021, 2022, 2023, 2024, 2025, 2026]; cb.addEventListener("input", () => { if (updating) return; const current = cb.value; let next = current; if (current.includes("All") && !previous.includes("All")) { //if all checked, select all next = [...allYears, "All"]; } else if (current.includes("All") && current.length <= allYears.length) { //if year unchecked while all checked next = current.filter(v => v !== "All");// unckeck all } previous = next; if (next.length !== current.length) { updating = true; cb.value = next; cb.dispatchEvent(new Event("input", { bubbles: true })); updating = false; } }); return cb; }4d:T2429,(() => { //nameless immediately called funciton because new observable is just such a bundle of fun const isContinuousRange = Array.isArray(selectedYears) && //check if theres a gap in years selectedYears.length === (Math.max(...selectedYears) - Math.min(...selectedYears) + 1); const titleYear = Array.isArray(selectedYears) //genAI (Gemini) used to figure out title updating logic ? (selectedYears.length === 1 ? `in ${selectedYears[0]}` : (isContinuousRange ? `from ${Math.min(...selectedYears)}-${Math.max(...selectedYears)}` : `in ${[...selectedYears].sort((a, b) => a - b).join(', ')}` ) ) : `in ${selectedYears}`; const title = `Frequency of Global Holidays Across Different Dates ${titleYear}`; const caption = "Global instances of holidays. Data from Kaggle"; const width = 900; const height = 600; const margin = { top: 60, right: 120, //how much of a buffer for the right side going in bottom: 60, left: 120 }; //how much of a buffer for the left side going in const xMonth = margin.left; const xDay = width - margin.right; //filter so no lines for connections with weight zero const filteredConnections = substantiallyLessShittyArray.filter(d => d.value > minSignificance); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: sans-serif;"); //background color svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "#f7f5ed"); //ecded7 //add the title svg.append("text") .attr("x", width / 2) .attr("y", margin.top / 2) .attr("text-anchor", "middle") .attr("fill", "black")//text color .style("font-size", "20px")//font size .style("font-weight", "bold") .text(title); //add the caption svg.append("text") .attr("x", margin.left) .attr("y", height - 15) .attr("text-anchor", "start") .attr("fill", "#666")//text color .style("font-size", "12px")//font size .text(caption); //evenly space nodes const yMonth = d3.scalePoint() .domain(d3.range(1, 13)) .range([margin.top, height - margin.bottom]); const yDay = d3.scalePoint() .domain(d3.range(1, 32)) .range([margin.top, height - margin.bottom]); //make thickness relative const maxVal = d3.max(filteredConnections, d => d.value); const strokeScale = d3.scaleLinear() .domain([0, maxVal]) .range([0.1, 10]); //thickness range const maxValue = d3.max(substantiallyLessShittyArray, (d) => d.value); const colorScale = d3.scaleLinear() .domain([0, maxVal*0.25, maxVal*0.5, maxVal*0.75, maxVal]) .range(["#7ddaea", "#4eacc2", "#1c8aa3", "#05647a", "#013b49",]); //color range //draw lines const lineGroup = svg.append("g") .attr("fill", "none"); const lines = lineGroup.selectAll("line") .data(filteredConnections) .join("line") .attr("x1", xMonth) .attr("y1", d => yMonth(d.month)) .attr("x2", xDay) .attr("y2", d => yDay(d.day)) .attr("stroke", d => colorScale(d.value)) .attr("stroke-width", d => strokeScale(d.value)) .attr("stroke-opacity", 0.8) //line opacity .on("mouseover", function(event, d) { lines.attr("stroke-opacity", 0.2)//opacity of non selected lines d3.select(this) .attr("stroke-opacity", 1.0) //opacity of selected line .style("cursor", "pointer"); tooltip .style("visibility", "visible") .html(` Date: ${fullMonthNames[d.month - 1]} ${d.day}
Occurrences: ${d.value} `); }) .on("mousemove", function(event) { // move tooltip with cursor tooltip //offset tooltip from curor so dosent block .style("top", (event.pageY - 10) + "px") .style("left", (event.pageX - 15 - tooltip.node().getBoundingClientRect().width) + "px"); //subtrack to flip to left side }) .on("mouseleave", function() { //when not tooltipping lines.attr("stroke-opacity", 0.8); //reset opacity and hide tooltip tooltip.style("visibility", "hidden"); }); //month nodes and their labels const monthLabels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const monthG = svg.append("g") .selectAll("g") .data(d3.range(1, 13)) .join("g") .attr("transform", d => `translate(${xMonth},${yMonth(d)})`); monthG.append("circle") .attr("r", 5) .attr("fill", "#e6a045") .attr("stroke", "#d48020") .attr("stroke-width", "1.5px") monthG.append("text") .attr("x", "-10") .attr("dy", "0.35em") .attr("text-anchor", "end") .attr("font-size", "16px") .text(d => monthLabels[d - 1]); //make tippable for month nodes monthG.style("cursor", "pointer") .on("mouseover", function(event, m) { const connectedDays = new Set(filteredConnections.filter(c => c.month === m).map(c => c.day)); const totalForMonth = d3.sum(filteredConnections.filter(c => c.month === m), c => c.value); lines.attr("stroke-opacity", c => c.month === m ? 0.8 : 0.1); //opacity of connected and unconnected lines dayG.attr("opacity", d => connectedDays.has(d) ? 1.0 : 0.2); //opacity of connected and unconnected nodes monthG.attr("opacity", currentMonth => currentMonth === m ? 1.0 : 0.2); tooltip .style("visibility", "visible") .html(` Month: ${fullMonthNames[m - 1]}
Total Occurrences: ${totalForMonth} `); }) .on("mousemove", function(event) { // move tooltip with cursor tooltip //offset tooltip from curor so dosent block .style("top", (event.pageY - 10) + "px") .style("left", (event.pageX - 15 - tooltip.node().getBoundingClientRect().width) + "px"); //subtrack to flip to left side }) .on("mouseleave", function() { // Reset lines and all node opacities back to default standard state lines.attr("stroke-opacity", 0.8); dayG.attr("opacity", 1.0); monthG.attr("opacity", 1.0); tooltip.style("visibility", "hidden"); }); //day nodes and their labels const dayG = svg.append("g") .selectAll("g") .data(d3.range(1, 32)) .join("g") .attr("transform", d => `translate(${xDay},${yDay(d)})`); dayG.append("circle") .attr("r", 4) .attr("fill", "#e6a045") .attr("stroke", "#d48020") .attr("stroke-width", "1.5px") dayG.append("text") .attr("x", 10) .attr("dy", "0.35em") .attr("text-anchor", "start") .attr("font-size", "10px") .text(d => d); //make tippable for day nodes dayG.style("cursor", "pointer") .on("mouseover", function(event, d) { const connectedMonths = new Set(filteredConnections.filter(c => c.day === d).map(c => c.month)); const totalForDay = d3.sum(filteredConnections.filter(c => c.day === d), c => c.value); lines.attr("stroke-opacity", c => c.day === d ? 0.8 : 0.1); //opacity of connected and unconnected lines monthG.attr("opacity", m => connectedMonths.has(m) ? 1.0 : 0.2); //opacity of connected and unconnected nodes dayG.attr("opacity", currentDay => currentDay === d ? 1.0 : 0.2); tooltip .style("visibility", "visible") .html(` Day of Month: ${d}
Total Occurrences: ${totalForDay} `); }) .on("mousemove", function(event) { // move tooltip with cursor tooltip //offset tooltip from curor so dosent block .style("top", (event.pageY - 10) + "px") .style("left", (event.pageX - 15 - tooltip.node().getBoundingClientRect().width) + "px"); //subtrack to flip to left side }) .on("mouseleave", function() { // Reset lines and all node opacities back to default standard state lines.attr("stroke-opacity", 0.8); monthG.attr("opacity", 1.0); dayG.attr("opacity", 1.0); tooltip.style("visibility", "hidden"); }); //tooltip content/window thingy const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "white") .style("border", "1px solid #ccc") .style("border-radius", "4px") .style("padding", "8px") .style("font-family", "sans-serif") .style("font-size", "16px") .style("box-shadow", "0px 2px 5px rgba(0,0,0,0.2)") .style("pointer-events", "none"); //legend stuff: const legendX = width - margin.right + 40; const legendYStart = margin.top + 20; const legendSpacing = 25; const legendTicks = [ 0, Math.round(maxVal * 0.25), Math.round(maxVal * 0.5), Math.round(maxVal * 0.75), maxVal ]; const legendG = svg.append("g") .attr("transform", `translate(${legendX}, ${legendYStart})`) .attr("class", "legend"); //legend title legendG.append("text") .attr("x", 0) .attr("y", "-10") .attr("font-size", "11px") .attr("font-weight", "bold") .attr("fill", "black") .text("Occurrences"); //legend rows const legendItems = legendG.selectAll(".legend-item") .data(legendTicks) .join("g") .attr("transform", (d, i) => `translate(0, ${i * legendSpacing})`); //thickness and color of legend line snippets legendItems.append("line") .attr("x1", 0) .attr("y1", 0) .attr("x2", 30) .attr("y2", 0) .attr("stroke", d => colorScale(d)) .attr("stroke-width", d => strokeScale(d)) .attr("stroke-opacity", 0.7); //legend labels legendItems.append("text") .attr("x", 40) .attr("y", 4) .attr("font-size", "11px") .attr("fill", "#333") .text(d => d); return svg.node(); })()4e:Tf4f,(() => { const isContinuousRange = Array.isArray(selectedYears) && //check if theres a gap in years selectedYears.length === (Math.max(...selectedYears) - Math.min(...selectedYears) + 1); const titleYear = Array.isArray(selectedYears) //genAI (Gemini) used to figure out title updating logic ? (selectedYears.length === 1 ? `in ${selectedYears[0]}` : (isContinuousRange ? `from ${Math.min(...selectedYears)}-${Math.max(...selectedYears)}` : `in ${[...selectedYears].sort((a, b) => a - b).join(', ')}` ) ) : `in ${selectedYears}`; const titleText = `Frequency of Global Holidays Across Different Dates ${titleYear}`; const chartOptions = { height: 400, width: 900, marginBottom: 55, marginLeft: 70, style: { fontSize: "16px", backgroundColor: "#f7f5ed" }, x: { label: "Day of Month →", type: "band", }, y: { label: "Month →", type: "band", domain: d3.range(1, 13), tickFormat: (m) => ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][m - 1] }, color: { type: colorInterval === "Linear" ? "linear": "symlog",//symlog like log but turns to linear around zero to avoid breaking domain: [0, d3.max(substantiallyLessShittyArray, (d) => d.value)], //range: ["#7ddaea", "#4eacc2", "#1c8aa3", "#05647a", "#013b49", "#0B1827"], //range: ["#a6f2ff", "#7ddaea", "#4db2c7", "#1c8aa3", "#05647a", "#013b49", "#0b1827"], //range: ["#BEECF4", "#7ddaea", "#4db2c7", "#1c8aa3", "#05647a", "#013b49", "#0b1827"], range: ["#BEECF4", "#8ADCEA", "#4db2c7", "#1c8aa3", "#05647a", "#013b49", "#0b1827"], //beautiful but holy exponential difference label: "Number of observed holidays:" }, marks: [ Plot.cell(substantiallyLessShittyArray, { x: "day", y: "month", fill: "value", channels: { date: { value: (d) => `${fullMonthNames[d.month - 1]} ${d.day}`, label: "Date:", }, holidayValue: { value: (d) => `${d.value}`, label: "Holidays: ", } }, tip: { fontSize: "12px", //fontWeight: "bold", format: { x: false, y: false, fill: false, stroke: false, date: true } } }) ] }; const chart = Plot.plot(chartOptions); const maxVal = d3.max(substantiallyLessShittyArray, (d) => d.value); const legend = chart.legend("color", { direction: "horizontal", height: 50, width: 300, tickSize: 4, //thickness of bar ticks: colorInterval === "Linear" ? [0, maxVal*0.25, maxVal*0.5, maxVal*0.75, maxVal]: [0, maxVal*0.02, maxVal*0.087, maxVal*0.24, maxVal*0.514, maxVal], style: { fontSize: "15px", fontWeight: "normal", fontFamily: "sans-serif", marginLeft: "70px", textOverflow: "ellipsis", } }); const container = document.createElement("div"); container.style.display = "flex"; container.style.flexDirection = "column"; container.style.alignItems = "flex-start"; container.style.gap = "10px"; container.style.fontFamily = "sans-serif"; container.style.backgroundColor = "#f7f5ed"; container.style.padding = "10px"; //buffer all around const titleElement = document.createElement("h2"); titleElement.textContent = titleText; titleElement.style.alignSelf = "center"; titleElement.style.fontSize = "22px"; titleElement.style.fontWeight = "bold"; titleElement.style.color = "#0b1827"; // matches darkest color option titleElement.style.marginBottom = "30px"; //whatever append first goes on top container.appendChild(titleElement); container.appendChild(legend); container.appendChild(chart); return container; })()4f:T12f2,//an unhealthy heaping of genAI (Gemini) was used to make this work. I frankensteined some tutorials but it wasn't working so I had Gemini generate a solution that spliced the pieces together functionally viewof carousel = { const imageUrls = await Promise.all([ FileAttachment("No green test.png").url(), FileAttachment("No green test 2.png").url(), FileAttachment("No green test 3.png").url(), FileAttachment("No red test.png").url(), FileAttachment("No red test 2.png").url(), FileAttachment("No red test 3.png").url(), FileAttachment("No blue test.png").url(), FileAttachment("No blue test 2.png").url(), FileAttachment("No blue test 3.png").url(), FileAttachment("No color test.png").url(), FileAttachment("No color test 2.png").url(), FileAttachment("No color test3.png").url(), FileAttachment("Blurred vision test.png").url(), FileAttachment("Blurred vision test 2.png").url(), FileAttachment("Blurred vision test 3.png").url(), ]); const captions = [ "No Green (Deuteranopia) Color Blindness Tests", "No Green (Deuteranopia) Color Blindness Tests", "No Green (Deuteranopia) Color Blindness Tests", "No Red (Protanopia) Color Blindness Tests", "No Red (Protanopia) Color Blindness Tests", "No Red (Protanopia) Color Blindness Tests", "No Blue (Tritanopia) Color Blindness Tests", "No Blue (Tritanopia) Color Blindness Tests", "No Blue (Tritanopia) Color Blindness Tests", "Grayscale (Achromatopsia)/Contrast Tests", "Grayscale (Achromatopsia)/Contrast Tests", "Grayscale (Achromatopsia)/Contrast Tests", "Blurred Vision Tests", "Blurred Vision Tests", "Blurred Vision Tests", ]; const container = html`

${imageUrls.map((url, i) => { const thumb = html`

`; thumb.onclick = () => { container.value = i; container.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; return thumb; })}

${captions[0]}

`; //initialize values container.value = 0; const mainImg = container.querySelector("#main-image"); const thumbs = container.querySelectorAll("#thumb-strip img"); const prevBtn = container.querySelector("#prev-btn"); const nextBtn = container.querySelector("#next-btn"); const captionBox = container.querySelector("#caption-text"); //sync changes to elements function updateUI(index) { mainImg.src = imageUrls[index]; captionBox.textContent = captions[index] || ""; //update text dynamically thumbs.forEach((thumb, i) => { thumb.style.border = i === index ? "2px solid #0ABAE6" : "2px solid #ccc"; thumb.style.opacity = i === index ? "1" : "0.6"; }); } //if click thumbnail go update container.addEventListener("input", () => { updateUI(container.value); }); //if click side button go there prevBtn.onclick = (e) => { e.stopPropagation(); container.value = (container.value - 1 + imageUrls.length) % imageUrls.length; container.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; nextBtn.onclick = (e) => { e.stopPropagation(); container.value = (container.value + 1) % imageUrls.length; container.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; return container; }50:T234e,(() => { //nameless immediately called funciton because new observable is just such a bundle of fun const isContinuousRange = Array.isArray(selectedYears) && //check if theres a gap in years selectedYears.length === (Math.max(...selectedYears) - Math.min(...selectedYears) + 1); const titleYear = Array.isArray(selectedYears) //genAI (Gemini) used to figure out title updating logic ? (selectedYears.length === 1 ? `in ${selectedYears[0]}` : (isContinuousRange ? `from ${Math.min(...selectedYears)}-${Math.max(...selectedYears)}` : `in ${[...selectedYears].sort((a, b) => a - b).join(', ')}` ) ) : `in ${selectedYears}`; const title = `Frequency of Global Holidays Across Different Dates ${titleYear}`; const caption = "Global instances of holidays. Data from Kaggle"; const width = 900; const height = 600; const margin = { top: 60, right: 120, //how much of a buffer for the right side going in bottom: 60, left: 120 }; //how much of a buffer for the left side going in const xMonth = margin.left; const xDay = width - margin.right; //filter so no lines for connections with weight zero const filteredConnections = substantiallyLessShittyArray.filter(d => d.value > minSignificance); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: sans-serif;"); //background color svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "#f7f5ed"); //ecded7 //add the title svg.append("text") .attr("x", width / 2) .attr("y", margin.top / 2) .attr("text-anchor", "middle") .attr("fill", "black")//text color .style("font-size", "20px")//font size .style("font-weight", "bold") .text(title); //add the caption svg.append("text") .attr("x", margin.left) .attr("y", height - 15) .attr("text-anchor", "start") .attr("fill", "#666")//text color .style("font-size", "12px")//font size .text(caption); //evenly space nodes const yMonth = d3.scalePoint() .domain(d3.range(1, 13)) .range([margin.top, height - margin.bottom]); const yDay = d3.scalePoint() .domain(d3.range(1, 32)) .range([margin.top, height - margin.bottom]); //make thickness relative const maxVal = d3.max(filteredConnections, d => d.value); const strokeScale = d3.scaleLinear() .domain([0, maxVal]) .range([0.1, 10]); //thickness range const maxValue = d3.max(substantiallyLessShittyArray, (d) => d.value); //I wanted to make the colors on this graphic update dnamically between scales too, but found that in this instance the extra scale made the already dual encoding (color and width) less readable. so I took it out //const colorScale = colorInterval === "Linear" // ? d3.scaleLinear().domain([0, maxValue*0.25, maxValue*0.5, maxValue*0.75, maxValue]) // : d3.scaleSymlog().domain([0, maxValue*0.02, maxValue*0.087, maxValue*0.24, maxValue*0.514, maxValue]); // colorScale.range(["#BEECF4", "#8ADCEA", "#4db2c7", "#1c8aa3", "#05647a", "#013b49", "#0b1827"]); const colorScale = d3.scaleLinear() .domain([0, maxVal*0.25, maxVal*0.5, maxVal*0.75, maxVal]) .range(["#7ddaea", "#4eacc2", "#1c8aa3", "#05647a", "#013b49",]); //color range "#f4BB56", "#c66f1c", "#9e3911", "#691F2D", "#29001D" //.range(["#BEECF4", "#8ADCEA", "#4db2c7", "#1c8aa3", "#05647a", "#013b49", "#0b1827"]); //draw lines const lineGroup = svg.append("g") .attr("fill", "none"); const lines = lineGroup.selectAll("line") .data(filteredConnections) .join("line") .attr("x1", xMonth) .attr("y1", d => yMonth(d.month)) .attr("x2", xDay) .attr("y2", d => yDay(d.day)) .attr("stroke", d => colorScale(d.value)) .attr("stroke-width", d => strokeScale(d.value)) .attr("stroke-opacity", 0.8) //line opacity //draw lines //svg.append("g") //.attr("fill", "none") //.selectAll("line") // .data(filteredConnections) // .join("line") // .attr("x1", xMonth) // .attr("y1", d => yMonth(d.month)) /// .attr("x2", xDay) // .attr("y2", d => yDay(d.day)) // .attr("stroke", d => colorScale(d.value)) // .attr("stroke-width", d => strokeScale(d.value)) // .attr("stroke-opacity", 0.8) //line opacity //make tooltip and make lines change opacity with it //GenAI(Gemini) used on this part as trying to format the tooltip as its own append thing was going quite poorly .on("mouseover", function(event, d) { lines.attr("stroke-opacity", 0.2)//opacity of non selected lines d3.select(this) .attr("stroke-opacity", 1.0) //opacity of selected line .style("cursor", "pointer"); tooltip .style("visibility", "visible") .html(` Date: ${fullMonthNames[d.month - 1]} ${d.day}
Occurrences: ${d.value} `); }) .on("mousemove", function(event) {//move tooltip with cursor tooltip //offset tooltip from curor so dosent block .style("top", (event.pageY - 10) + "px") .style("left", (event.pageX + 15) + "px"); }) .on("mouseleave", function() { //when not tooltipping lines.attr("stroke-opacity", 0.8); //reset opacity and hide tooltip //d3.select(this).attr("stroke-opacity", 0.7); tooltip.style("visibility", "hidden"); }); //month nodes and their labels const monthLabels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const monthG = svg.append("g") .selectAll("g") .data(d3.range(1, 13)) .join("g") .attr("transform", d => `translate(${xMonth},${yMonth(d)})`); monthG.append("circle") .attr("r", 5) .attr("fill", "#e6a045") // fbab7d d86031 #72C29B .attr("stroke", "#d48020") //df803b .attr("stroke-width", "1.5px") monthG.append("text") .attr("x", -10) .attr("dy", "0.35em") .attr("text-anchor", "end") .attr("font-size", "16px") .text(d => monthLabels[d - 1]); //day nodes and their labels const dayG = svg.append("g") .selectAll("g") .data(d3.range(1, 32)) .join("g") .attr("transform", d => `translate(${xDay},${yDay(d)})`); dayG.append("circle") .attr("r", 4) .attr("fill", "#e6a045") //#72C29B .attr("stroke", "#d48020") //df803b .attr("stroke-width", "1.5px") dayG.append("text") .attr("x", 10) .attr("dy", "0.35em") .attr("text-anchor", "start") .attr("font-size", "10px") .text(d => d); //tooltip content/window thingy const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "white") .style("border", "1px solid #ccc") .style("border-radius", "4px") .style("padding", "8px") .style("font-family", "sans-serif") .style("font-size", "16px") .style("box-shadow", "0px 2px 5px rgba(0,0,0,0.2)") .style("pointer-events", "none"); //legend stuff: const legendX = width - margin.right + 40; // Position it to the right of the Day nodes const legendYStart = margin.top + 20; const legendSpacing = 25; //when playing with scale toggleability for colors I made the legend also update which is what this commented out block does // const legendTicks = colorInterval === "Linear" //? [0, Math.round(maxValue * 0.25), Math.round(maxValue * 0.5), Math.round(maxValue * 0.75), maxValue] //: [0, Math.round(maxValue * 0.02), Math.round(maxValue * 0.087), Math.round(maxValue * 0.24), Math.round(maxValue * 0.514), maxValue]; const legendTicks = [ 0, Math.round(maxVal * 0.25), Math.round(maxVal * 0.5), Math.round(maxVal * 0.75), maxVal ]; const legendG = svg.append("g") .attr("transform", `translate(${legendX}, ${legendYStart})`) .attr("class", "legend"); //legend title legendG.append("text") .attr("x", 0) .attr("y", -10) .attr("font-size", "11px") .attr("font-weight", "bold") .attr("fill", "black") .text("Occurrences"); //legend rows const legendItems = legendG.selectAll(".legend-item") .data(legendTicks) .join("g") .attr("transform", (d, i) => `translate(0, ${i * legendSpacing})`); //thickness and color of legend line snippets legendItems.append("line") .attr("x1", 0) .attr("y1", 0) .attr("x2", 30) //length of the sample line .attr("y2", 0) .attr("stroke", d => colorScale(d)) .attr("stroke-width", d => strokeScale(d)) .attr("stroke-opacity", 0.7); //legend labels legendItems.append("text") .attr("x", 40) //offset from end of line .attr("y", 4) //vertical alignment .attr("font-size", "11px") .attr("fill", "#333") .text(d => d); //draw the thing return svg.node(); })()51:T11de,(() => { //nameless immediately called funciton because new observable is just such a bundle of fun const isContinuousRange = Array.isArray(selectedYears) && //check if theres a gap in years selectedYears.length === (Math.max(...selectedYears) - Math.min(...selectedYears) + 1); const titleYear = Array.isArray(selectedYears) //genAI (Gemini) used to figure out title updating logic ? (selectedYears.length === 1 ? `in ${selectedYears[0]}` : (isContinuousRange ? `from ${Math.min(...selectedYears)}-${Math.max(...selectedYears)}` : `in ${[...selectedYears].sort((a, b) => a - b).join(', ')}` ) ) : `in ${selectedYears}`; const title = `Frequency of Global Holidays Across Different Days/Months ${titleYear}`; const caption = "data from Kaggle"; const width = 900; const height = 600; const margin = { top: 60, right: 120, //how much of a buffer for the right side going in bottom: 60, left: 120 }; //how much of a buffer for the left side going in const xMonth = margin.left; const xDay = width - margin.right; //filter so no lines for connections with weight zero const filteredConnections = substantiallyLessShittyArray.filter(d => d.value > minSignificance); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: sans-serif;"); //background color svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "#f7f5ed"); //ecded7 //add the title svg.append("text") .attr("x", width / 2) .attr("y", margin.top / 2) .attr("text-anchor", "middle") .attr("fill", "black")//text color .style("font-size", "20px")//font size .style("font-weight", "bold") .text(title); //add the caption svg.append("text") .attr("x", margin.left) .attr("y", height - 15) .attr("text-anchor", "start") .attr("fill", "#666")//text color .style("font-size", "12px")//font size .text(caption); //evenly space nodes const yMonth = d3.scalePoint() .domain(d3.range(1, 13)) .range([margin.top, height - margin.bottom]); const yDay = d3.scalePoint() .domain(d3.range(1, 32)) .range([margin.top, height - margin.bottom]); //make thickness relative const maxVal = d3.max(filteredConnections, d => d.value); const strokeScale = d3.scaleLinear() .domain([0, maxVal]) .range([0.1, 10]); //thickness range const colorScale = d3.scaleLinear() .domain([0, maxVal*0.25, maxVal*0.5, maxVal*0.75, maxVal]) .range(["#7ddaea", "#4eacc2", "#1c8aa3", "#05647a", "#013b49",]); //color range "#f4BB56", "#c66f1c", "#9e3911", "#691F2D", "#29001D" //draw lines svg.append("g") .attr("fill", "none") .attr("stroke", "#999") .attr("stroke-opacity", 0.8) // line opacity .selectAll("line") .data(filteredConnections) .join("line") .attr("x1", xMonth) .attr("y1", d => yMonth(d.month)) .attr("x2", xDay) .attr("y2", d => yDay(d.day)) .attr("stroke", d => colorScale(d.value)) // Dynamic color based on value .attr("stroke-width", d => strokeScale(d.value)) .append("title") .text(d => `Month ${d.month}, Day ${d.day}: ${d.value} instances`); //month nodes and their labels const monthLabels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const monthG = svg.append("g") .selectAll("g") .data(d3.range(1, 13)) .join("g") .attr("transform", d => `translate(${xMonth},${yMonth(d)})`); monthG.append("circle") .attr("r", 5) .attr("fill", "#e6a045") // fbab7d d86031 #72C29B .attr("stroke", "#d48020") //df803b .attr("stroke-width", "1.5px") monthG.append("text") .attr("x", -10) .attr("dy", "0.35em") .attr("text-anchor", "end") .attr("font-size", "12px") .text(d => monthLabels[d - 1]); //day nodes and their labels const dayG = svg.append("g") .selectAll("g") .data(d3.range(1, 32)) .join("g") .attr("transform", d => `translate(${xDay},${yDay(d)})`); dayG.append("circle") .attr("r", 4) .attr("fill", "#e6a045") //#72C29B .attr("stroke", "#d48020") //df803b .attr("stroke-width", "1.5px") dayG.append("text") .attr("x", 10) .attr("dy", "0.35em") .attr("text-anchor", "start") .attr("font-size", "10px") .text(d => d); //draw the thing return svg.node(); })()52:T9b4,(() => { //nameless, immediately called funciton because new observable is just such a bundle of fun const width = 800; const height = 600; const margin = { top: 40, right: 80, //how much of a buffer for the right side going in bottom: 40, left: 80 }; //how much of a buffer for the left side going in const xMonth = margin.left; const xDay = width - margin.right; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: sans-serif;"); //evenly space nodes const yMonth = d3.scalePoint() .domain(d3.range(1, 13)) .range([margin.top, height - margin.bottom]); const yDay = d3.scalePoint() .domain(d3.range(1, 32)) .range([margin.top, height - margin.bottom]); //make thickness relative const maxVal = d3.max(substantiallyLessShittyArray, d => d.value); const strokeScale = d3.scaleLinear() .domain([0, maxVal]) .range([0.5, 8]); //draw lines svg.append("g") .attr("fill", "none") .attr("stroke", "#999") .attr("stroke-opacity", 0.4) .selectAll("line") .data(substantiallyLessShittyArray) .join("line") .attr("x1", xMonth) .attr("y1", d => yMonth(d.month)) .attr("x2", xDay) .attr("y2", d => yDay(d.day)) .attr("stroke-width", d => strokeScale(d.value)) .append("title") .text(d => `Month ${d.month}, Day ${d.day}: ${d.value} instances`); //month nodes and their labels const monthLabels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const monthG = svg.append("g") .selectAll("g") .data(d3.range(1, 13)) .join("g") .attr("transform", d => `translate(${xMonth},${yMonth(d)})`); monthG.append("circle").attr("r", 5).attr("fill", "black"); monthG.append("text") .attr("x", -10) .attr("dy", "0.35em") .attr("text-anchor", "end") .attr("font-size", "12px") .text(d => monthLabels[d - 1]); //day nodes and their labels const dayG = svg.append("g") .selectAll("g") .data(d3.range(1, 32)) .join("g") .attr("transform", d => `translate(${xDay},${yDay(d)})`); dayG.append("circle").attr("r", 4).attr("fill", "black"); dayG.append("text") .attr("x", 10) .attr("dy", "0.35em") .attr("text-anchor", "start") .attr("font-size", "10px") .text(d => d); //draw the thing return svg.node(); })() 53:T55a,Plot.plot({ height: 400, width: 900, marginBottom: 55, marginLeft: 70, //title: "Frequency of Global Holidays Across Different Dates", //padding: 0, style: { fontSize: "14px", backgroundColor: "#f7f5ed" }, x: { label: "Day of Month →", type: "band" }, y: { label: "Month →", type: "band", domain: d3.range(1, 13), tickFormat: (m) => ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][m - 1], }, color: { type: "linear", domain: [0, d3.max(substantiallyLessShittyArray, (d) => d.value)], range: ["#7ddaea", "#4eacc2", "#1c8aa3", "#05647a", "#013b49"], legend: "ramp", direction: "vertical", label: "Number of observed holidays:", }, marks: [ Plot.cell(substantiallyLessShittyArray, { x: "day", y: "month", fill: "value", //inset: 0.3, channels: { date: { value: (d) => `${fullMonthNames[d.month -1]}, ${d.day}`, label: "" }, holidayValue: { value: (d) => `Holidays: ${d.value}`, label: "" }, }, tip: { fontweight: "bold", format: { x: false, y: false, fill: false, stroke: false, date: true, //holidayValue: (v) => `${v}`, }, }, }), ], })54:[{"id":"6683999d6fd27de45b09e43982361d334ec8417cc9ee2eafee9930495c326a2f0efb569a56ab4c5f952980658de7471f4dd6f6214290134555ae927eaa38183a","href":"https://static.observableusercontent.com/files/6683999d6fd27de45b09e43982361d334ec8417cc9ee2eafee9930495c326a2f0efb569a56ab4c5f952980658de7471f4dd6f6214290134555ae927eaa38183a","name":"holidays_all.csv","type":"text/csv","lastModified":1774567838000,"size":807532},{"id":"4889f5b1e97ecbbddf19496574cf46b52c9acf29fe411b01243085b250634a45ecb684fc97df6b893a8a5e25adbb3780b0123b51658f5e7912fd10d0e87238b4","href":"https://static.observableusercontent.com/files/4889f5b1e97ecbbddf19496574cf46b52c9acf29fe411b01243085b250634a45ecb684fc97df6b893a8a5e25adbb3780b0123b51658f5e7912fd10d0e87238b4","name":"No green test.png","type":"image/png","lastModified":1793914679000,"size":547761},{"id":"b420f7b1919f07183d788b9be046d5f8285cb4c85ae94053c328815e5b5a46be1cb0935f5fd3bbe463594c9d146c172b8ef51f9dd4f5dcad797f29278b9be598","href":"https://static.observableusercontent.com/files/b420f7b1919f07183d788b9be046d5f8285cb4c85ae94053c328815e5b5a46be1cb0935f5fd3bbe463594c9d146c172b8ef51f9dd4f5dcad797f29278b9be598","name":"No green test 2.png","type":"image/png","lastModified":1793914697000,"size":210682},{"id":"9fb4176cba29b7dcf282833197cb30f614f5a3d97c5db8398e8236b0401b25eadd4e0de8b0b25c1fa7cfcf727bb4a483560cdc3ce109c7a7d0af207197e1ce9a","href":"https://static.observableusercontent.com/files/9fb4176cba29b7dcf282833197cb30f614f5a3d97c5db8398e8236b0401b25eadd4e0de8b0b25c1fa7cfcf727bb4a483560cdc3ce109c7a7d0af207197e1ce9a","name":"No green test 3.png","type":"image/png","lastModified":1793914708000,"size":207958},{"id":"ea8c9f534a6f452f7de5734f74047bd49b700185ca9b39451dcbbc3e10713a8138bc09bb9ce7175e3f139e46d9e1b37991ac37dfdb5e493c106b253d79b105ef","href":"https://static.observableusercontent.com/files/ea8c9f534a6f452f7de5734f74047bd49b700185ca9b39451dcbbc3e10713a8138bc09bb9ce7175e3f139e46d9e1b37991ac37dfdb5e493c106b253d79b105ef","name":"No red test.png","type":"image/png","lastModified":1793914723000,"size":545500},{"id":"ec3ef19f9f5784d80eaad089e2b3bbe08569704c3f348e2175a3d7232904c6833ccb1affb2e87a5df11befca31e48ff078552e8c0aad0897eb28b6ac43b1661e","href":"https://static.observableusercontent.com/files/ec3ef19f9f5784d80eaad089e2b3bbe08569704c3f348e2175a3d7232904c6833ccb1affb2e87a5df11befca31e48ff078552e8c0aad0897eb28b6ac43b1661e","name":"No red test 2.png","type":"image/png","lastModified":1793914736000,"size":212318},{"id":"2500d7c1c9f406c6bbbf6e5036bc73be77a5549e027446389f72179c9f3a077984da30286c95a311a3ec1ccbfaea3b70389697987ddad6a8d19c4cbfffb29a2e","href":"https://static.observableusercontent.com/files/2500d7c1c9f406c6bbbf6e5036bc73be77a5549e027446389f72179c9f3a077984da30286c95a311a3ec1ccbfaea3b70389697987ddad6a8d19c4cbfffb29a2e","name":"No red test 3.png","type":"image/png","lastModified":1793914745000,"size":207537},{"id":"10e84e7f339ce1dabc0bd65c014207c33ccf26a853d260d8bb82c1e8e851e5300f8c4b61e79368abdf767c1d8a9ab90cfb4a8b758d51cedbf145dd3c16685927","href":"https://static.observableusercontent.com/files/10e84e7f339ce1dabc0bd65c014207c33ccf26a853d260d8bb82c1e8e851e5300f8c4b61e79368abdf767c1d8a9ab90cfb4a8b758d51cedbf145dd3c16685927","name":"No blue test.png","type":"image/png","lastModified":1793914796000,"size":585548},{"id":"0091d7c04c93c4faac07e0b82de46ba30d08ed7618085b960a649656cf6846bacce5181cc918ba00e0aa0e7a8eed7781d6a1589a9fd7cdd305573654ade35711","href":"https://static.observableusercontent.com/files/0091d7c04c93c4faac07e0b82de46ba30d08ed7618085b960a649656cf6846bacce5181cc918ba00e0aa0e7a8eed7781d6a1589a9fd7cdd305573654ade35711","name":"No blue test 2.png","type":"image/png","lastModified":1793914814000,"size":207947},{"id":"66863f38c8e95f703f427c5ad5f6b40e413a507ec1bc7d6e18614b41bb8eb77869890ba39481d11af102a1cfa96135ad87f934ea0d007baf6d0bc27e6da98b04","href":"https://static.observableusercontent.com/files/66863f38c8e95f703f427c5ad5f6b40e413a507ec1bc7d6e18614b41bb8eb77869890ba39481d11af102a1cfa96135ad87f934ea0d007baf6d0bc27e6da98b04","name":"No blue test 3.png","type":"image/png","lastModified":1793914824000,"size":208081},{"id":"e3c561b2fdf97741f3bf26fb7afec2921c6baf4982c8b4b91d5826d914502e62c49fe50d0aa950ec1494362de3fe413a7ce493fed4d4506c49029d7ef88a4249","href":"https://static.observableusercontent.com/files/e3c561b2fdf97741f3bf26fb7afec2921c6baf4982c8b4b91d5826d914502e62c49fe50d0aa950ec1494362de3fe413a7ce493fed4d4506c49029d7ef88a4249","name":"No color test.png","type":"image/png","lastModified":1793914851000,"size":421190},{"id":"69d52d1f2cadd28931e7fdfb65eee28e545cbe92abcbaecc2f08717602b3e25b166c3b0575e26d5285fd8d14a6be2055a6e9552fea695b552724b629dd0a2269","href":"https://static.observableusercontent.com/files/69d52d1f2cadd28931e7fdfb65eee28e545cbe92abcbaecc2f08717602b3e25b166c3b0575e26d5285fd8d14a6be2055a6e9552fea695b552724b629dd0a2269","name":"No color test 2.png","type":"image/png","lastModified":1793914859000,"size":194369},{"id":"333c4e7e1d73e68222712a36753242e135925085cdf35cbba9486d286442040424379f7941145469f7b3afa5409d6582d875edc2817b3db9ad366231eeb9b08b","href":"https://static.observableusercontent.com/files/333c4e7e1d73e68222712a36753242e135925085cdf35cbba9486d286442040424379f7941145469f7b3afa5409d6582d875edc2817b3db9ad366231eeb9b08b","name":"No color test3.png","type":"image/png","lastModified":1793914867000,"size":192991},{"id":"2b3f3df0cd1a39b3a089923d46d815c8010afc971664ffd924e6a2ff426d7c05530be192df003f9867e70418b85ad3ba74b44ad41b4f766e5f3390b0c8d6f4ed","href":"https://static.observableusercontent.com/files/2b3f3df0cd1a39b3a089923d46d815c8010afc971664ffd924e6a2ff426d7c05530be192df003f9867e70418b85ad3ba74b44ad41b4f766e5f3390b0c8d6f4ed","name":"Blurred vision test.png","type":"image/png","lastModified":1793914913000,"size":1184333},{"id":"9efb254c202de4f7038143ff23ff113a921cfb6ab9b8d760577d12a0e4fc5be02c3f67af10171130268f658975d71a353790fa797467bee487579225f1ea4ac4","href":"https://static.observableusercontent.com/files/9efb254c202de4f7038143ff23ff113a921cfb6ab9b8d760577d12a0e4fc5be02c3f67af10171130268f658975d71a353790fa797467bee487579225f1ea4ac4","name":"Blurred vision test 2.png","type":"image/png","lastModified":1793914930000,"size":773286},{"id":"79c19f9660b1b3143354390014f5736f3483ce2a6203a391a802e94af464475666f5c8f3264b4dd69c993d2c5c7b5802e8add424068df13002bccd3f2d4fb790","href":"https://static.observableusercontent.com/files/79c19f9660b1b3143354390014f5736f3483ce2a6203a391a802e94af464475666f5c8f3264b4dd69c993d2c5c7b5802e8add424068df13002bccd3f2d4fb790","name":"Blurred vision test 3.png","type":"image/png","lastModified":1793914956000,"size":701769}] 47:{"id":"3c375ba4d4ccd307","slug":"when-in-the-year-holidays-occur","title":"When In The Year Holidays Occur","thumbnail":"658c99ca85c8ba1eb3cb0c6c9d0ebdded799491eedf4122ef77477084bc8a029","access_level":"public","create_time":"$D2026-11-03T02:51:15.180Z","update_time":"$D2026-11-06T07:22:00.775Z","view_time":null,"first_public_time":"$D2026-11-05T21:32:57.670Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"81ae52680c7448b3","login":"maya-graham","name":"Maya Graham","avatar_url":"https://avatars-next.observableusercontent.com/2b31b2d3687ff71f3b77c32bbce4334195892043b8fba121bec8886284dbe305","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1354,"publish_version":1354,"role":null,"authored":false,"authors":[{"type":"individual","id":"f2d6a0cdec3e6ab6","login":"maya-graham","name":"Maya Graham","avatar_url":"https://avatars-next.observableusercontent.com/2b31b2d3687ff71f3b77c32bbce4334195892043b8fba121bec8886284dbe305","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"81ae52680c7448b3","login":"maya-graham","name":"Maya Graham","avatar_url":"https://avatars-next.observableusercontent.com/2b31b2d3687ff71f3b77c32bbce4334195892043b8fba121bec8886284dbe305","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"When In The Year Holidays Occur","cells":[{"id":1,"value":"# When In The Year Holidays Occur\n## Maya Graham","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"viewof minSignificance = Inputs.range([0, 20], {value: 5, step: 1, label: \"Connection Minimum Significance:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"$4d","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"Node tipping implemented and tip was flipped to left side to minimize obscuring when hovering over nodes. While I usually like the look of it being on the right more, here it has a tendency to block the legend or interesting information when on the right.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"viewof colorInterval = Inputs.radio([\"Linear\", \"Exponential\"], {\n label: \"Display Colors Linearly or Exponentially?\",\n value: \"Linear\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"$4e","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"I reformatted the graphic to be in the svg generating funtion style, allowing me to improve the size and location of the legend. I extended the color range which dramatically improves readability of similar values, but also found that the issue was being exacerbated by the exponential nature of values in this graph, so I implemented a toggle feature that allows the viewer to see the colors in both exponential and linear scale.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"## Color Accessibility Justification","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"I'm much happier with this slideshow and am pleased it didn't take too long to make thanks to several tutorials and Gemini for cleaning up my collaging of them together. I particularly like the thumbnails at the top and ability to slide across them since they exceed the width.\n\nMy blurred vision accessibility isn't awesome, but I hesitate to make text bigger in areas like the tip and months as any bigger starts to look strange to the average well-seeing viewer, and I couldn't get my attempts at customization for improving the size of text on things like the slider or year selector to work so unfortunately this is what I'm settling with.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"_____________________________________________________________________________________________________________________","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"# Working/process versions below","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"viewof currentStep = Inputs.range([0, images.length - 1], {step: 1, label: \"Slide Number\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"images[currentStep]","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"A pretty terrible first, simple version of the accessability slideshow before I found and Frankensteined some tutorials. It's way to big, I'm not a fan of using the sider thing to control view, and its difficult to tell that its a slideshow with an initial glance.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"$50","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"Tipping and legend implemented. Fixed the \"ALL\" output and now all selections are working. I implemented the linear vs log color scale for this graph but found it to make legability worse in this instance, so I omitted it. I'd like to add tipping to the nodes too, but otherwise I'm quite happy.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"$51","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"Already quite happy with the graph at this stage. I'm very pleased with the colors and customizability at this stage, at least conceptually. I still need to do some work making the selectable/automatically updated year values work when selecting \"All\", make the graph tippable, label the axis, and improve the title/caption.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"$52","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"This ended up requiring turning the csv data into a matrix and then turning that matrix into a much nicer array which I'm sure isn't the most efficient way to do this, but its working and I don't really have the time to care about performance. The most obviously needed improvements are to clarity. While one may suspect the ability to make this readable at all, I think it can be done. I think filtering out any connections with weight zero, increasing the range of thicknesses, and possibly doubly-encoding connection occurrences with color will do a lot for this graphic's readability, and making things tippable always adds a lot.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"Plot.plot({\n width: 600,\n height: 500,\n marks: [\n\n Plot.link(\n substantiallyLessShittyArray,\n {\n x1: 0,\n y1: d => d.month,\n x2: 1,\n y2: d => d.day,\n stroke: \"#ccc\",\n strokeWidth: d => d.value,\n strokeOpacity: 0.6\n }\n ),\n\n Plot.text(\n new Set(substantiallyLessShittyArray.map(d => d.month)),\n {\n x: 0,\n y: d => d,\n text: d => `${d}`,\n textAnchor: \"end\",\n dx: -10,\n fontWeight: \"bold\"\n }\n ),\n Plot.text(\n new Set(substantiallyLessShittyArray.map(d => d.day)),\n {\n x: 1,\n y: d => d,\n text: d => `${d}`,\n textAnchor: \"start\",\n dx: 10\n }\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"Started to bounce around a bit here to play with making a bipartite graph. Even though this style of generation is a lot more simple than some other examples I found online/in some other notebooks, I have a much harder time understanding how to implement more advanced customizations with it. As such, I pivoted and ended up drawing pretty directly from Jayce Beck's notebook *Compound Vulgarity* as featured in the student showcase. His graphics are implemented by wrapping everything in an immediately returned function which I find a much bigger pain to get working, but once you do they are dramatically more responsive to customization.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"$53","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"In this version I fixed the tipping, increased the graph and font sizes, added a background color for cohesion with the other graphic which this will eventually go right under, and cleaned up the cell markings/spacing. The fact that the legend is outside the background color, way off to the left and has super small font is really bothering me, and I would also like to have the ability to dynamically update the title of the graphic similar to that of the bivariate. Unfortunately for me both improvements will require making this an instantly returned function just like the other graph, so I don't think I'll be able to avoid it after all. I'd also like to increase the range of values in the color scheme for both graphs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"Plot.plot({\n padding: 0,\n grid: true,\n x: { label: \"Day of Month →\", type: \"band\" },\n y: {\n label: \"Month →\",\n type: \"band\",\n domain: d3.range(1, 13),\n tickFormat: m => [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"][m - 1]\n },\n color: {\n type: \"linear\",\n domain: [0, d3.max(substantiallyLessShittyArray, d => d.value)],\n range: [\"#7ddaea\", \"#4eacc2\", \"#1c8aa3\", \"#05647a\", \"#013b49\"],\n legend: true,\n label: \"Number of observed holidays:\"\n },\n marks: [\n Plot.cell(substantiallyLessShittyArray, {\n x: \"day\",\n y: \"month\",\n fill: \"value\",\n inset: 0.5,\n tip: true\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"At this stage I'd made a color palette, built the rudimentary year selector, and made the chart color values and legend reactive to the selector tool. The tip needs some channels so that it doesn't inherit labeling from the x and y axis and legend, and the colors need to be improved to cover a wider range to better display differences in value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"Plot.plot({\n padding: 0,\n grid: true,\n x: {\n label: \"Day\",\n type: \"band\"\n },\n y: {\n label: \"Month\",\n type: \"band\",\n domain: d3.range(1, 13),\n tickFormat: m => [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"][m - 1]\n },\n color: {\n scheme: \"blues\",\n legend: true,\n label: \"Holiday Count\"\n },\n marks: [\n Plot.cell(substantiallyLessShittyArray, {\n x: \"day\",\n y: \"month\",\n fill: \"value\",\n tip: true\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"As it turns out, a matrix is not easier to graph in the slightest. However, instead of scrapping the work I did to make the matrix, I'm realizing that flattening the matrix data into a new array not only creates an array that is much easier to work with, but because its derived from the easily edited matrix function, I can implement my vision of making years selectable through the matrix which, I think, should update everything based on the nice array at once which would be super cool.\n\nSo even though it looks mostly the same, the above graphic represents a shift to this cleaner array and should help me see if, later on when I implement the selector, it actually does update everything.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"Plot.plot({\n //padding: 0,\n grid: true,\n x: {\n label: \"Day\",\n domain: d3.range(1, 32),\n tickFormat: d3.format(\"d\")\n },\n y: {\n label: \"Month\",\n domain: d3.range(0, 12),\n tickFormat: m => [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"][m]\n },\n color: {\n scheme: \"blues\",\n label: \"Holiday Count\",\n legend: true,\n zero: true //starts color mapping at zero occurrences\n },\n marks: [\n Plot.cell(shittyArray, Plot.group({fill: \"count\"}, {\n x: d => parseDate(d.Date).getDate(),\n y: d => parseDate(d.Date).getMonth(),\n tip: true\n }))\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"My first attempt at a graph/cell plot. Not sure why some values/blocks are missing but I think it may be easier to use a matrix to get the data for it instead of the original array so i'm going to try to make a function that creates a matrix but cleans it up so its more usable. The colors are decent - I really like the variety and how effectively it conveys relative difference, but I think they can still be improved upon.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"## Functions, Variables, and Constants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"const fullMonthNames = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"];\n//another shortcut","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"const parseDate = d3.timeParse(\"%d-%b-%y\");\n//shortcut for me that I need because the dates in the original dataset are in a non-standard form but the d3 library has this super handly thing to reformat it/make it readable to the program","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"substantiallyLessShittyArray = cleanMatrix.flatMap((monthArray, monthIdx) =>\n monthArray.map((val, dayIdx) => ({\n month: monthIdx + 1,\n day: dayIdx + 1,\n value: val\n }))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"//flattens the matrix into a much nicer array","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"cleanMatrix = getHollidayCountMatrix(holidays_all)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"//loads the matrix from the funciton below","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"function getHollidayCountMatrix(holidays_all) {\n const hollidayCountMatrix = Array.from({ length: 12 }, () => Array(31).fill(0));\n for (const row of holidays_all) {\n const dateObj = parseDate(row.Date);\n\n if (dateObj && selectedYears.includes(dateObj.getFullYear())){//depends on what year clicked so now everything will be impacted by the selection tools at top .... hopefully\n const monthIndex = dateObj.getMonth(); // jan is 0, dec is 11\n const dayIndex = dateObj.getDate() - 1; // 0 is 1st, 30 is 31st. i hate it but its easier like this.\n\n // unfuck it if the months are different lengths. because ofc febuary had to exist\n if (monthIndex >= 0 && monthIndex < 12 && dayIndex >= 0 && dayIndex < 31) {\n hollidayCountMatrix[monthIndex][dayIndex] += 1;\n }\n }\n }\n return hollidayCountMatrix;\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"const selectedYears = yearShow.filter(year => year !== \"All\"); //.map(year => parseInt(year, 10))\n// this connects to the selector thingy at the top so I can reference it in the matrix-building funciton above. It exists to filter out \"All\" because the way I have it set up, when \"All\" is selected it outputs an array with every item (which has all years but also includes \"All\"). Since the theme of this notebook seems to be bad coding practice but easier for me, I've just added this extra step to filter it because for some reason I couldn't figure out how to just filter it before the output","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"const shittyArray = FileAttachment(\"holidays_all.csv\").csv({typed: true})\n//I don't know why I at some point made this array when the array below probably is safer/less likely to exclude variables that are abnormal in some way, but to be quite frank I didn't think to check, combine, or organize these import or creation files until now that I am basically done, and I can't find where in my graphs its dependent on holidays_all, I just know that commenting it out breaks everything. Its probably quite obvious and I'm just not seeing it but neither my eyes or cmnd+f are working for me. I've done a lot of random sampling of data points in the final graphics to compare against the original dataset and this far everything has been accurate so I'm 99% sure its not causing inaccurate reporting of the data, and I'm just going to leave it.","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"const holidays_all = await FileAttachment(\"holidays_all.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"const images = [ //bundle images together for the slideshow\n FileAttachment(\"No green test.png\").image(),\n FileAttachment(\"No green test 2.png\").image(),\n FileAttachment(\"No green test 3.png\").image(),\n\n FileAttachment(\"No red test.png\").image(),\n FileAttachment(\"No red test 2.png\").image(),\n FileAttachment(\"No red test 3.png\").image(),\n\n FileAttachment(\"No blue test.png\").image(),\n FileAttachment(\"No blue test 2.png\").image(),\n FileAttachment(\"No blue test 3.png\").image(),\n\n FileAttachment(\"No color test.png\").image(),\n FileAttachment(\"No color test 2.png\").image(),\n FileAttachment(\"No color test3.png\").image(),\n\n FileAttachment(\"Blurred vision test.png\").image(),\n FileAttachment(\"Blurred vision test 2.png\").image(),\n FileAttachment(\"Blurred vision test 3.png\").image(),\n]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W54","stdlib":"2"}} 42:null