2b:null 2c:["$","title",null,{"children":"3 Years of the Mini! | Rehan Chinoy's Workspace | Observable"}] 31:T46b,raceLines = { const maxCells = d3.max(todayOverTime, (d) => d.cells); return Plot.plot({ marks: [ Plot.ruleY([maxCells], { strokeDasharray: "2 2", stroke: "gray" }), Plot.line(todayOverTime, { x: "seconds", y: "cells", stroke: "name", filter: (d) => d.seconds <= ts, curve: "bump-x", }), Plot.dot( todayOverTime, Plot.selectLast({ x: "seconds", y: "cells", stroke: "name", fill: "white", filter: (d) => d.seconds <= ts }) ), Plot.text( todayOverTime, Plot.selectLast({ x: "seconds", y: "cells", fill: "name", text: "name", textAnchor: "start", rotate: -45, filter: (d) => d.seconds <= ts, dx: 6 }) ), ], x: { type: "linear", ticks: d3.range(0, maxTime, 15), tickFormat, domain: [0, maxTime], label: null }, marginLeft: 70, marginTop: 30, marginRight: 30, width, height: maxCells * 8, color }); }32:T75a,raceBoards = { const colorScale = d3.scaleOrdinal(color.domain, color.range); return htl.html`

${today.map( (person) => htl.html`

${person.name}

${draw(person.board.cells, ts)}

` )}

`; function getRowLength(arrayLength) { const root = Math.sqrt(arrayLength); if (!(root % 1)) return root; return [Math.ceil, Math.floor].find( (fn) => !((arrayLength / fn(root)) % 1) )(root); } function draw(cells, timestamp) { const bandWidth = 27; const size = getRowLength(cells.length); const x = (d, i) => i % size; const y = (d, i) => ~~(i / size); const done = d3.max(cells, (d) => d.timestamp) <= timestamp; return Plot.plot({ width: size * bandWidth, height: (cells.length / size) * bandWidth, marks: [ Plot.cell(cells, { // cells x, y, stroke: "black", strokeWidth: 2, fill: (d) => (d.timestamp <= timestamp ? d.timestamp : 0), fillOpacity: 0.5 }), Plot.cell(cells, { // blanks x, y, filter: (d) => d.blank, stroke: "black", fill: "black" }), Plot.text(cells, { // guess x, y, text: "guess", filter: (d) => d.timestamp <= timestamp, fill: done ? "black" : "gray", fontSize: bandWidth / 2 }) ], x: { type: "band", axis: false, padding: 0 }, y: { type: "band", axis: false, padding: 0 }, color: { scheme: "blues", domain: [0, maxTime] } }); } }33:T8d9,{ const mobile = width < 480; const colWidth = mobile ? width : Math.max(width / 3 - 20, 200); const countBars = Plot.plot({ color, marks: [ Plot.barX( adjusted, Plot.groupY({ x: "count" }, { y: "name", fill: "name" }) ), Plot.text( adjusted, Plot.groupY( { x: "count", text: "count" }, { y: "name", textAnchor: "start", dx: 4 } ) ) ], x: { label: "Minis completed", labelAnchor: "center", labelOffset: 35, domain: [0, 1200], axis: "top" }, y: { label: null, domain: names }, marginTop: 35, marginRight: 30, marginBottom: 0, marginLeft: 45, width: colWidth + 60 }); const counts = d3.rollup( competitiveRanks, (r) => r.length, (d) => d.name ); const ranks = Plot.plot({ marks: [ Plot.dot( competitiveRanks, Plot.group( { r: (d) => d.length / (counts.get(d[0].name) || 1) }, { y: "name", x: "rank", stroke: "name" } ) ) ], color, y: { ...countBars.scale("y"), tickSize: mobile ? undefined : 0, grid: true }, x: { type: "band", tickFormat: ordinalSuffix, label: "How often each person ranks in each place", labelOffset: 35, axis: "top" }, r: { range: [0, 12] }, width: colWidth, marginTop: 35, marginRight: 0, marginBottom: 0, marginLeft: mobile ? 45 : 0 }); const percentilesPlot = Plot.plot({ marks: [ Plot.text(percentiles, { x: "q", text: (d) => tickFormat(d.value), y: "name", fill: "name" }) ], x: { type: "band", axis: "top", label: "Completion time percentiles", labelOffset: 35, tickFormat: (d) => ordinalSuffix(d * 100) }, y: { ...countBars.scale("y"), axis: true }, color, width: colWidth, marginTop: 35, marginRight: 0, marginBottom: 0, marginLeft: mobile ? 45 : 0 }); return htl.html`

${countBars} ${ranks} ${percentilesPlot}

`; }34:T8c4,{ const mobile = width < 480; const colWidth = mobile ? width : Math.max(width / 3 - 20, 1000); // Compute counts of first-place finishes for each participant const firstPlaceCounts = d3.rollup( competitiveRanks.filter((d) => d.rank === 1), // Only first-place ranks (group) => group.length, // Count occurrences (d) => d.name // Group by participant ); // Convert to flat array const firstPlaceData = Array.from(firstPlaceCounts, ([name, count]) => ({ name, count })); // Define the order for the y-axis (Hanna below Rehan) const participantOrder = ["Rehan", "Hanna"]; // Create the horizontal bar chart const firstPlaceChart = Plot.plot({ color, // Use the predefined color variable marks: [ // Bars for first-place counts Plot.barX(firstPlaceData, { x: "count", y: "name", fill: "name", // Use colors based on participant names title: (d) => `${d.name}: ${d.count} first-place finishes` // Tooltip }), // Text annotations for counts Plot.text(firstPlaceData, { x: "count", y: "name", text: (d) => d.count, // Display count values dx: 5, // Offset to the right of the bar textAnchor: "start", // Align text fill: "black" // Black text for readability }) ], x: { label: "Number of First-Place Finishes", // Label for x-axis grid: true, // Add gridlines labelAnchor: "center", // Center label horizontally labelOffset: 35 // Adjust label spacing }, y: { label: null, // No label for y-axis domain: participantOrder, // Define the order of participants (Rehan above Hanna) }, color, // Use the existing color scale for consistency marginTop: 20, // Space for chart title marginRight: 30, // Space for annotations marginBottom: 45, // Space for x-axis labels marginLeft: 45, // Space for y-axis labels width: colWidth, // Chart width height: participantOrder.length * 25 + 75 // Dynamic height based on participant count }); // Return the chart return htl.html`

${firstPlaceChart}

`; }35:Tf9b,{ const mobile = width < 480; const colWidth = mobile ? width : Math.max(width / 3 - 20, 1000); // Create date picker inputs const startDateInput = Inputs.date({ label: "Start Date", value: d3.min(competitiveRanks, (d) => new Date(d.puzzle.date)), // Default to earliest date min: d3.min(competitiveRanks, (d) => new Date(d.puzzle.date)), max: d3.max(competitiveRanks, (d) => new Date(d.puzzle.date)) }); const endDateInput = Inputs.date({ label: "End Date", value: d3.max(competitiveRanks, (d) => new Date(d.puzzle.date)), // Default to latest date min: d3.min(competitiveRanks, (d) => new Date(d.puzzle.date)), max: d3.max(competitiveRanks, (d) => new Date(d.puzzle.date)) }); // Filter data based on the selected date range const filteredData = (startDate, endDate) => competitiveRanks.filter( (d) => new Date(d.puzzle.date) >= new Date(startDate) && new Date(d.puzzle.date) <= new Date(endDate) && d.rank === 1 // Only include first-place ranks ); const createChart = (startDate, endDate) => { const firstPlaceCounts = d3.rollup( filteredData(startDate, endDate), // Filtered data (group) => group.length, // Count occurrences (d) => d.name // Group by participant ); // Convert to flat array const firstPlaceData = Array.from(firstPlaceCounts, ([name, count]) => ({ name, count })); // Define the desired order of participants const participantOrder = ["Rehan", "Hanna"]; // Rehan first, Hanna second // Create the horizontal bar chart return Plot.plot({ color, // Use the predefined color variable marks: [ // Bars for first-place counts Plot.barX(firstPlaceData, { x: "count", y: "name", fill: "name", // Use colors based on participant names title: (d) => `${d.name}: ${d.count} first-place finishes` // Tooltip }), // Text annotations for counts Plot.text(firstPlaceData, { x: "count", y: "name", text: (d) => d.count, // Display count values dx: 5, // Offset to the right of the bar textAnchor: "start", // Align text fill: "black" // Black text for readability }) ], x: { label: "Number of First-Place Finishes", // Label for x-axis grid: true, // Add gridlines labelAnchor: "center", // Center the label horizontally labelOffset: 35 // Adjust spacing from the axis }, y: { label: null, // No label for y-axis domain: participantOrder, // Ensure Rehan is above Hanna }, color, // Use the existing color scale for consistency marginTop: 20, // Space for chart title marginRight: 30, // Space for annotations marginBottom: 50, // Space for x-axis labels marginLeft: 45, // Space for y-axis labels width: colWidth, // Chart width height: participantOrder.length * 25 + 75 // Dynamic height based on participant count }); }; // Watch for changes in the date inputs and update the chart dynamically const updateChart = () => { const startDate = startDateInput.value; const endDate = endDateInput.value; const chart = createChart(startDate, endDate); chartContainer.innerHTML = ""; // Clear existing chart chartContainer.append(chart); // Add updated chart }; // Create a container for the chart const chartContainer = document.createElement("div"); // Initial render updateChart(); // Listen for changes in date pickers startDateInput.addEventListener("input", updateChart); endDateInput.addEventListener("input", updateChart); // Return the date pickers and the chart container return htl.html`

${startDateInput}

${endDateInput}

${chartContainer}

`; }36:T426,{ const dateFormat = d3.utcFormat("%b %-d"); return Plot.plot({ marks: [ Plot.barY(dayRanks, { x: "rank", y: (d) => d.calcs.secondsSpentSolving, fill: "name" }), Plot.text(dayRanks, { x: "rank", y: (d) => d.calcs.secondsSpentSolving, title: (d) => `${d.name} • ${dateFormat(d.puzzle.date)}`, text: (d) => `${d.name} • ${dateFormat(d.puzzle.date)}`, textAnchor: "start", dx: 6, rotate: -90, fill: "white" }), Plot.text(dayRanks, { x: "rank", y: (d) => d.calcs.secondsSpentSolving, text: (d) => tickFormat(d.calcs.secondsSpentSolving), dy: 11 }), frame ], facet: { data: dayRanks, x: "day" }, fx: { tickFormat: (d) => "SMTWTFS"[d], label: null }, x: { tickFormat: ordinalSuffix, label: null }, y: { tickFormat, grid: true, reverse: true, insetBottom: 15 }, color, width, height: 250, marginLeft: 45, marginRight: 0 }); }37:T619,// Plot the chart with fixed color alignment Plot.plot({ marks: [ // Stacked bars for first-place counts Plot.barY(annotatedFirstPlaceCounts, { x: (d) => dayLabels[d.day], // Day labels on the x-axis y: "count", // Count of first-place ranks fill: "name", // Color by participant title: (d) => `${d.name}: ${d.count} first-place finishes` // Tooltip for each segment }), // Text annotations for counts in the middle of each sub-bar Plot.text(annotatedFirstPlaceCounts, { x: (d) => dayLabels[d.day], // Align text with the corresponding bar y: (d) => d.annotationY, // Use precomputed middle position text: (d) => d.count, // Display the count value fill: "white", // Use white text for contrast textAnchor: "middle", // Center-align text horizontally fontSize: 12 // Adjust font size for readability }) ], x: { label: "Day of the Week", // X-axis label domain: dayLabels, // Fixed order of days: Sunday to Saturday labelOffset: 30 // Adjust spacing from the axis }, y: { label: "Number of First-Place Finishes", // Y-axis label grid: true // Add gridlines for clarity }, color: { type: "ordinal", domain: names, // Maintain consistent color mapping for participants range: color.range, // Custom color palette for participants label: "Participant" // Legend label }, marginTop: 35, marginRight: 80, marginBottom: 35, marginLeft: 50, width: Math.max(width / 3 - 20, 800), height: 500 // Adjust height as needed });38:[{"id":"ccffad1cb82bb19c600695962af3d2bddd85e0dc3b29a8d6b3e54364c98d657fc4e042aefc9e4188e3b7786ea0170d5aa8f527b6f2de2a5372638db5d1996dd4","href":"https://static.observableusercontent.com/files/ccffad1cb82bb19c600695962af3d2bddd85e0dc3b29a8d6b3e54364c98d657fc4e042aefc9e4188e3b7786ea0170d5aa8f527b6f2de2a5372638db5d1996dd4","name":"concatenated@1.json","type":"application/json","lastModified":1735339531592.284,"size":4602522}] 2f:{"id":"49d8ac3e281f8648","slug":null,"title":"3 Years of the Mini!","thumbnail":"227f44f9801e80c169338d62a71f4127529242919e6bb93bb36816fd7ffafdf3","access_level":"public","create_time":"$D2024-12-11T00:44:17.895Z","update_time":"$D2025-01-21T07:32:29.484Z","view_time":null,"first_public_time":"$D2024-12-27T23:25:50.663Z","has_unpublished_edits":null,"fork":{"id":"f52d5a258f591e79","slug":"nyt-minis","title":"Visualizing The New York Times’s Mini Crossword","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"032df3b522546950","login":"rehan-chinoy-ws","name":"Rehan Chinoy's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/abcc39ca9879e0de39e8b4e9559af5ae5c90829423350dd3b9ebf09dc2b0eb7a","tier":"starter_2024"},"version":5959,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d761c815b8213708","login":"rehan-chinoy","name":"Rehan Chinoy","avatar_url":"https://avatars-next.observableusercontent.com/36afb53823d044572ff108719a15a42e421ada4f493c492de33ae4e857176fa2","tier":null}],"members":[{"type":"individual","id":"d761c815b8213708","login":"rehan-chinoy","name":"Rehan Chinoy","avatar_url":"https://avatars-next.observableusercontent.com/36afb53823d044572ff108719a15a42e421ada4f493c492de33ae4e857176fa2","tier":null,"role":"editor"},{"type":"team","id":"032df3b522546950","login":"rehan-chinoy-ws","name":"Rehan Chinoy's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/abcc39ca9879e0de39e8b4e9559af5ae5c90829423350dd3b9ebf09dc2b0eb7a","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"3 Years of the Mini!","cells":[{"id":0,"value":"# 3 Years of the Mini!\nData from January 2022 - December 2024.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1904,"value":"---\n## Race\nWatch in 10× time as we fill out the mini, head to head. Manually scrub to investigate interesting points in time. Note that only _correct_ letters appear here.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1124,"value":"viewof date = {\n const [min, max] = d3.extent(adjusted, d => d.puzzle.date).map(utcFormat);\n return Inputs.date({\n label: \"Date\",\n min,\n max,\n value: d3.utcDay.offset(\n d3.max(adjusted, (d) => d.puzzle.date),\n -1\n )\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1126,"value":"viewof ts = Scrubber(d3.range(0, maxTime), { width: Math.min(555, width-30), loop: false, delay: 100 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2028,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1158,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2034,"value":"todayOverTime = today.flatMap(({ name, board: { cells } }) =>\n d3.range(0, d3.max(cells, (c) => c.timestamp) + 1).map((seconds) => ({\n name,\n seconds,\n cells: cells.filter((c) => c.timestamp <= seconds).length\n }))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"today = adjusted\n .filter((d) => +d.puzzle.date === +date)\n .sort((a, b) => a.calcs.secondsSpentSolving - b.calcs.secondsSpentSolving)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1555,"value":"maxTime = Math.min(\n d3.max(\n today.flatMap((d) => d.board.cells),\n (d) => d.timestamp\n ),\n 240 // guard against real epoch-based timestamps\n) + 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1894,"value":"---\n## Leaderboard\nThe [Crossword app](https://www.nytimes.com/crosswords/apps) only shows a leaderboard for the current day; this one extends back further. The end date follows the date picker above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3823,"value":"leaderboard = {\n const dx = -24;\n return Plot.plot({\n marks: [\n Plot.line(trailing, {\n x: (d) => d.puzzle.date,\n y: \"rank\",\n stroke: \"name\",\n strokeWidth: 1,\n strokeOpacity: 0.2,\n // strokeDasharray: \"4 2\",\n curve: \"bump-x\",\n dx\n }),\n Plot.dot(trailing, {\n x: (d) => d.puzzle.date,\n y: \"rank\",\n r: 1,\n stroke: \"name\",\n strokeWidth: 1,\n dx\n }),\n Plot.text(trailing, {\n x: (d) => d.puzzle.date,\n y: \"rank\",\n fill: \"name\",\n text: \"name\",\n textAnchor: \"start\",\n dx: dx + 4\n })\n ],\n x: { ...leaderboardTimes.scale(\"fx\"), axis: false },\n y: { type: \"band\", tickFormat: ordinalSuffix, label: null },\n color,\n width,\n height: new Set(d3.map(trailing, (d) => d.rank)).size * 23,\n marginTop: 0,\n marginRight: 0,\n marginBottom: 0,\n marginLeft: 45\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1582,"value":"leaderboardTimes = Plot.plot({\n marks: [\n Plot.ruleX([0], { stroke: \"lightgray\", dx: 39}),\n Plot.ruleY(trailing, {\n x: (d) => d.calcs.secondsSpentSolving,\n y: \"name\",\n stroke: \"name\",\n dx: 42\n }),\n Plot.text(trailing, {\n x: (d) => d.calcs.secondsSpentSolving,\n y: \"name\",\n fill: \"name\",\n text: (d) => tickFormat(d.calcs.secondsSpentSolving),\n textAnchor: \"start\",\n dx: 42,\n })\n ],\n facet: { data: trailing, x: (d) => d.puzzle.date },\n x: { axis: false, range: [0, 25] },\n y: { label: null, domain: names },\n color,\n fx: { type: \"time\", tickFormat: \"%a %-d\" },\n width,\n height: names.length * 22 + 30,\n marginTop: 0,\n marginLeft: 45,\n marginRight: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4262,"value":"trailing = d3.utcDay\n .range(d3.utcDay.offset(date, -Math.floor(width / 57)), d3.utcHour.offset(date, 1))\n .flatMap((d) => ranks.get(d))\n .filter((d) => d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"ranks = d3.rollup(\n data,\n (r) =>\n r\n .sort((a, b) => a.calcs.secondsSpentSolving - b.calcs.secondsSpentSolving)\n .map((d, i) => ({ ...d, rank: i + 1 })),\n (d) => d.puzzle.date\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1898,"value":"---\n## Summary\nIt’s hard to summarize players’ performance in any one number. Throughout the charts you should keep in mind the denominator of how many times different people have done the mini. It’s easier to rank first more often if you’re doing a lot of puzzles where fewer people are competing! You might have a good low median time by luck if you haven’t done many puzzles; but you might get better as you do more of them.\n\nWhenever we list all names, we order them by median completion time. But keep in mind that some may have done more of the easier puzzles, so it’s not quite apples-to-apples.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3591,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2689,"value":"competitiveRanks = Array.from(ranks.values()).filter(r => r.length > 1).flat()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3501,"value":"percentiles = d3.cross([0, 0.25, 0.5, 0.75, 1], names, (q, name) => ({\n name,\n q,\n value: d3.quantile(\n data.filter((d) => d.name === name),\n q,\n (d) => d.calcs.secondsSpentSolving\n )\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2859,"value":"names = d3\n .rollups(\n adjusted,\n (r) => d3.median(r, (d) => d.calcs.secondsSpentSolving),\n (d) => d.name\n )\n .sort((a, b) => a[1] - b[1])\n .map((d) => d[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5637,"value":"## Leaderboard placement","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5731,"value":"Overall leaderboard: who has ranked first the most?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5695,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5733,"value":"Choose a date range to see the rankings within a particular time window.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5723,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1910,"value":"---\n## Distribution of times\nHow long does it take for people to solve the mini?\n\nHow to read the box plot: the box extends from the [25th percentile to the 75th percentile](https://en.wikipedia.org/wiki/Interquartile_range); the median is marked with a vertical line; the whiskers are [complicated](https://observablehq.com/@akngs/vega-lite-renders-box-plots-differently). Outliers are dots.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1664,"value":"Plot.plot({\n marks: [\n Plot.boxX(adjusted, {\n x: (d) => d.calcs.secondsSpentSolving,\n y: \"name\",\n fill: \"name\",\n stroke: \"#333\",\n strokeWidth: 1,\n r: 0.5\n })\n ],\n y: { label: null, domain: names },\n x: {\n domain: [0, 240],\n ticks: [15, 30, 45, 60, 90, 120, 150, 180, 240],\n tickFormat,\n grid: true\n },\n color,\n width,\n marginLeft: 45,\n marginTop: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5088,"value":"And a box plot can hide bimodal or multimodal distributions that a different plot may reveal.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"{\n const withinDomain = adjusted.filter(\n (d) => d.calcs.secondsSpentSolving <= 270\n );\n return Plot.plot({\n marks: [\n Plot.rect(\n withinDomain,\n Plot.binX(\n { fillOpacity: \"count\" },\n {\n x: (d) => d.calcs?.secondsSpentSolving,\n thresholds: width / 5,\n fill: \"name\"\n }\n )\n )\n ],\n facet: { data: withinDomain, y: \"name\", marginLeft: 45 },\n x: {\n domain: [0, 240],\n ticks: [15, 30, 45, 60, 90, 120, 150, 180, 240],\n tickFormat,\n grid: true\n },\n fy: { label: null, domain: names },\n color: { ...color },\n opacity: { domain: [0, 8] },\n width,\n marginTop: 0\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2949,"value":"---\n## Times by weekday\nAll-time fastest solves and distributions of times by weekday. The mini, like the daily crossword, follows a slight trend of increasing difficulty depending on the weekday. Saturday grids are often larger.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4103,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4101,"value":"dayRanks = Array.from(\n d3\n .rollup(\n data,\n (r) =>\n r\n .sort(\n (a, b) => a.calcs.secondsSpentSolving - b.calcs.secondsSpentSolving\n )\n .map((d, i) => ({\n ...d,\n day: d.puzzle.date.getUTCDay(),\n rank: i + 1\n }))\n .slice(0, Math.floor(width / 7 / 30)),\n (d) => d.puzzle.date.getUTCDay()\n )\n .values()\n).flat()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"Plot.plot({\n color,\n marks: [\n Plot.tickX(adjusted, {\n x: (d) => d.calcs.secondsSpentSolving,\n stroke: \"name\"\n }),\n frame\n ],\n facet: {\n data: adjusted,\n y: \"name\",\n x: (d) => d.puzzle.date.getUTCDay(),\n marginLeft: 45\n },\n fx: { tickFormat: (d) => \"SMTWTFS\"[d], label: null },\n x: { domain: [0, 240], ticks: [0, 30, 60, 120, 180], tickFormat, clamp: true },\n fy: { label: null, domain: names },\n width,\n marginRight: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"Plot.plot({\n color,\n marks: [\n Plot.tickX(adjusted, {\n x: (d) => d.calcs.secondsSpentSolving,\n stroke: \"name\"\n }),\n frame\n ],\n facet: {\n data: adjusted,\n x: (d) => d.puzzle.date.getUTCDay(),\n marginLeft: 31\n },\n fx: { tickFormat: (d) => \"SMTWTFS\"[d], label: null },\n x: { domain: [0, 240], ticks: [0, 30, 60, 120, 180], tickFormat, clamp: true },\n width,\n marginRight: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5796,"value":"// Step 3: Map day numbers to labels for better readability\ndayLabels = [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5803,"value":"rankedData = Object.values(\n adjusted.reduce((groups, participant) => {\n // Group by puzzleID\n if (!groups[participant.puzzleID]) {\n groups[participant.puzzleID] = [];\n }\n groups[participant.puzzleID].push(participant);\n return groups;\n }, {}) // Create an object grouped by puzzleID\n)\n.filter(\n (puzzleGroup) => puzzleGroup.length === names.length // Include only puzzles solved by all participants\n)\n.flatMap((puzzleGroup) =>\n puzzleGroup\n .sort((a, b) => a.calcs.secondsSpentSolving - b.calcs.secondsSpentSolving) // Sort by solve time\n .map((participant, index) => ({\n ...participant,\n rank: index + 1, // Assign rank based on sort order\n day: new Date(participant.timestamp * 1000).getUTCDay() // Extract day of the week\n }))\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5811,"value":"// Step 2: Aggregate first-place ranks (rank === 1) by day and participant\nfirstPlaceCounts = d3.rollups(\n rankedData.filter((d) => d.rank === 1), // Only include first-place ranks\n (group) => group.length, // Count occurrences\n (d) => d.day, // Group by day of the week\n (d) => d.name // Then group by participant name\n).flatMap(([day, nameCounts]) =>\n nameCounts.map(([name, count]) => ({ day, name, count }))\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5840,"value":"// Precompute cumulative positions for text annotations\nannotatedFirstPlaceCounts = firstPlaceCounts.map((d, i, data) => {\n // Filter for the same day and earlier entries to compute cumulative\n const cumulative = data\n .filter((entry) => entry.day === d.day && entry.name < d.name) // Sort by name to ensure consistent stacking\n .reduce((sum, entry) => sum + entry.count, 0);\n return {\n ...d,\n cumulativeStart: cumulative,\n annotationY: cumulative + d.count / 2 // Position text at the middle of the sub-bar\n };\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5937,"value":"annotatedFirstPlaceCounts.sort((a, b) => {\n if (a.day !== b.day) {\n return a.day - b.day; // Sort by day first\n }\n return a.name.localeCompare(b.name); // Then sort by name (Hanna first, then Rehan)\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5941,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4721,"value":"---\n## Times over time\nAre people getting faster or slower the more minis they solve? Times by month of when they solved them, as opposed to puzzle publish date.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4720,"value":"Plot.plot({\n marks: [\n frame,\n Plot.boxX(adjusted, {\n y: (d) => d3.utcMonth(new Date(d.firsts.solved * 1000)),\n x: (d) => d.calcs.secondsSpentSolving,\n r: 0.5,\n fill: \"name\",\n strokeWidth: 1,\n stroke: \"#333\"\n })\n ],\n facet: { data: adjusted, x: \"name\" },\n x: {\n domain: [0, 180],\n ticks: [60, 120, 180],\n clamp: true,\n tickFormat,\n grid: true\n },\n fx: { domain: names, label: null },\n color,\n width: Math.max(width, 640),\n y: {\n scale: d3.scaleUtc().domain([/* your domain */]),\n ticks: d3.utcMonth.every(1), // Set ticks at every month\n tickFormat: (date) => {\n const month = d3.utcFormat(\"%b\")(date); // Extract the month (e.g., \"Jan\")\n const year = d3.utcFormat(\"%Y\")(date); // Extract the year (e.g., \"2021\")\n return month === \"Jan\" ? `${month} ${year}` : month; // Add year only for January\n }\n },\n marginLeft: 60,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5477,"value":"------\n# Code section","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4777,"value":"---\n## Data loading","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2107,"value":"viewof refresh = Inputs.button(\"Refresh data\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4954,"value":"viewof yourName = Inputs.text({value: \"You\", label: \"Your name\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4946,"value":"viewof yourToken = Inputs.password({label: \"NYT-S cookie\", submit: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5468,"value":"tokens = [\n // [\"annie\", \"ANNIE_TOKEN_HERE\"],\n // [\"bryan\", \"BRYAN_TOKEN_HERE\"],\n // [\"cobus\", \"COBUS_TOKEN_HERE\"]\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3162,"value":"// Show liveData if tokens array is filled out, or\n// show savedData plus your data if input is filled out, or\n// show savedData (the default when you open the page)\ndata = tokens.length\n ? liveData\n : yourToken\n ? [...savedData, ...(await getData([yourName, yourToken]))]\n : savedData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"savedData = (await FileAttachment(\"concatenated@1.json\").json()).map((d) => {\n d.puzzle.date = utcParse(d.puzzle.date);\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3148,"value":"liveData = (refresh, (await Promise.all(tokens.map(getData))).flat())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5103,"value":"getData = async ([name, token]) =>\n (await solutions(token, \"mini\")).map((solution) => ({\n ...solution,\n name\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2313,"value":"For checked or cleared puzzles, we can adjust by lining up the maximum timestamp and seconds spent solving.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2205,"value":"adjusted = {\n // straightforward: opened, solved\n // adjustable: checked, cleared\n const confusing = new Set([\"revealed\", \"timerReset\"]);\n return data\n .filter((d) => !Object.keys(d.firsts).some((s) => confusing.has(s)))\n .map((d) => {\n // match up secondsSpentSolving and the maximum timestamp and extrapolate backwards\n const delta =\n d.calcs.secondsSpentSolving - d3.max(d.board.cells, (c) => c.timestamp);\n return {\n ...d,\n board: {\n cells: d.board.cells.map((c) =>\n c.blank\n ? c\n : {\n ...c,\n timestamp: c.timestamp + delta\n }\n )\n }\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5387,"value":"Throw out revealed and timerReset because the timestamps are super confusing in those cases. But, just to spot-check what those were…","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2988,"value":"confusing = {\n const confusing = new Set([\"revealed\", \"timerReset\"]);\n return data.filter((d) =>\n Object.keys(d.firsts).some((s) => confusing.has(s))\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"Get all solution data for a given person, augmented with the puzzle data. Use local storage for caching.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"solutions = async (token, type) =>\n Promise.all(\n (await puzzles(token, type))\n .filter((d) => d.solved)\n .map((puzzle) =>\n nyt(\n `svc/crosswords/v6/game/${puzzle.puzzle_id}.json`,\n token,\n localStorage\n ).then((json) => ({ ...json, puzzle }))\n )\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"Get an index of all puzzles for a given person. This includes whether or not they started or solved it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"puzzles = async (token, type) =>\n (\n await Promise.all(\n quarters.map(([start, end]) =>\n nyt(\n `svc/crosswords/v3/undefined/puzzles.json?publish_type=${type}&date_start=${start}&date_end=${end}`,\n token\n ).then((json) => json.results)\n )\n )\n )\n .flat()\n .map((puzzle) => ({ ...puzzle, date: utcParse(puzzle.date) }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4526,"value":"utcParse = d3.utcParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5376,"value":"utcFormat = d3.utcFormat(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"The index endpoint seems to return a maximum of ~100 results, so if we stick to 3 months at a time (_aka._ a quarter), we should be good.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"quarters = {\n const dateFormat = d3.utcFormat(\"%Y-%m-%d\");\n const starts = d3.utcMonth\n .every(3)\n .range(new Date(\"2021-01-01\"), new Date(\"2022-01-01\"));\n return starts.map((start) =>\n [start, d3.utcDay.offset(d3.utcMonth.offset(start, 3), -1)].map(dateFormat)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"Make a request to the nytimes and include the nyt-s token. If a backing storage (like localStorage) is provided, check to see if our data is in there already so as to ease load on their API. Inspired by [mattdodge/nyt-crossword-stats](https://github.com/mattdodge/nyt-crossword-stats/blob/master/fetch_puzzle_stats.py).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":847,"value":"nyt = async (path, token, storage) => {\n const key = String([path, token]);\n if (storage && storage.getItem(key)) return JSON.parse(storage.getItem(key));\n const json = await fetch(`https://nyt-games-prd.appspot.com/${path}`, {\n headers: { \"nyt-s\": token }\n }).then((res) => res.json());\n if (storage) storage.setItem(key, JSON.stringify(json));\n return json;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3972,"value":"localStorage.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3978,"value":"---\n### Formatting helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4316,"value":"frame = Plot.frame({ stroke: \"lightgray\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2144,"value":"color = Plot.scale({color: {type:\"ordinal\", domain: names, range: [\"rgb(193, 18, 31)\", \"rgb(102, 155, 188)\"] }})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2511,"value":"tickFormat = (d) => {\n const minutes = Math.floor(d / 60);\n const seconds = d % 60;\n return minutes === 0\n ? `${seconds}`\n : seconds === 0\n ? `${minutes}m`\n : `${minutes}:${seconds.toFixed(0).padStart(2, \"0\")}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3298,"value":"function ordinalSuffix(n) {\n switch (n % 100) {\n case 11:\n case 12:\n case 13:\n return `${n}th`;\n }\n switch (n % 10) {\n case 1:\n return `${n}st`;\n case 2:\n return `${n}nd`;\n case 3:\n return `${n}rd`;\n default:\n return `${n}th`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4046,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4445,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5416,"value":"import {localStorage} from \"@mbostock/safe-local-storage\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4466,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"