25:["$","title",null,{"children":"Visualizing The New York Times’s Mini Crossword | Michael Gingras | Observable"}] 49:T6c6,# Visualizing The New York Times’s Mini Crossword Sometime around August, a bunch of us realized we were all playing The New York Times’s daily [mini crossword](https://www.nytimes.com/crosswords/game/mini). We started a Slack channel; we shared invite links to add each other to our in-app leaderboards. Soon we were comparing times every morning. At our in-person offsite in October, when many of us met in person for the first time, we gathered in a big circle and did it live — a good advertisement for anyone at the company who hadn’t realized this was going on, like Toph. Meanwhile, Visnu had realized that we could pull the crossword data from the Times’s API, with a lot of detail that’s not in the app. You can see your times going back any number of days; you can see how many seconds it took to get each letter on the board. Since we work at Observable, and Observable lets you do this sort of thing, we got this shared notebook going with all our data. Now we could see a leaderboard for the whole past two weeks. Now it was not merely anecdote that placed Annie at the front of the pack; we could all see clearly that her median time was a full second better than the next best, Ramona. Each time someone had a new question, we got a new chart. How often does each person place first? Which day is the hardest? How much harder? Have I been getting worse over time? Who has the best bests and worst worsts? And can we show us all racing side by side? Everyone added something. This notebook shows a year of our data. To add your data and compare yourself to us, or to show a leaderboard of your friends instead, follow the [instructions below](https://observablehq.com/@observablehq/nyt-minis#cell-5331).4a: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 }); }4b: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] } }); } }4c:T8d6,{ 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, 365], 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}

`; }4d: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 }); }4e:[{"id":"b782f9c86be0a4a14dd09551400ab98e0ab8926503da493c0ecb068a181df5ec6ae2895bad6d144c50e79456e39d6ecd441fd9674a2301068345a1df477e6514","href":"https://static.observableusercontent.com/files/b782f9c86be0a4a14dd09551400ab98e0ab8926503da493c0ecb068a181df5ec6ae2895bad6d144c50e79456e39d6ecd441fd9674a2301068345a1df477e6514","name":"data@3.json","type":"application/json","lastModified":1688408580548.329,"size":2278910}] 29:{"id":"926120f9298cb423","slug":null,"title":"Visualizing The New York Times’s Mini Crossword","thumbnail":"376d062b3eea9398fce49599b4015650b765fb5463161fbc3c8f62b21a7dc62c","access_level":"public","create_time":"$D2023-07-03T18:23:00.548Z","update_time":"$D2023-07-03T18:23:00.548Z","view_time":null,"first_public_time":"$D2023-07-03T18:23:00.548Z","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":"f10eab70cae9c48a","login":"mcgingras","name":"Michael Gingras","avatar_url":"https://avatars-next.observableusercontent.com/a05928ab48495517a2870db426b8463608226c869581df3329286fba77b8cdcd","tier":"starter_2024","bio":"web guy","followed_by_you":false,"follows_you":false},"version":5430,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"016ebd650bb6c9b3","login":"mcgingras","name":"Michael Gingras","avatar_url":"https://avatars-next.observableusercontent.com/a05928ab48495517a2870db426b8463608226c869581df3329286fba77b8cdcd","tier":null,"bio":"web guy","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"016ebd650bb6c9b3","login":"mcgingras","name":"Michael Gingras","avatar_url":"https://avatars-next.observableusercontent.com/a05928ab48495517a2870db426b8463608226c869581df3329286fba77b8cdcd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualizing The New York Times’s Mini Crossword","cells":[{"id":0,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1904,"value":"---\n## Race\nWatch in 10× time as people fill out the mini, as if 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2028,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1158,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1582,"value":"leaderboardTimes = Plot.plot({\n marks: [\n Plot.ruleX([0], { stroke: \"lightgray\" }),\n Plot.ruleY(trailing, {\n x: (d) => d.calcs.secondsSpentSolving,\n y: \"name\",\n stroke: \"name\"\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: 2\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3591,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4103,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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: 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 width,\n marginRight: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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 y: { tickFormat: \"%b\" },\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})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5331,"value":"---\n## How to customize","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5073,"value":"We fetch the crossword data using the browser cookie you get when you log into the New York Times website. __This is totally not secure;__ if you shared it with somebody, this cookie could give them access to your Times account! But you can inspect our code below to confirm that we’re not saving it anywhere, or doing anything with it other than fetching your crossword times.\n\nTo get your NYT-S cookie, or “token”, paste this into the JavaScript console on https://nytimes.com while logged-in (or see [more detailed instructions](https://xwstats.com/link)):\n\n`document.cookie.split('; ').find(r=>r.startsWith('NYT-S')).split('=')[1]`\n\nCopy the result (without quotes), and paste it into the “NYT-S cookie” input below. Customize your name if you’d like it to appear on the charts above:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4954,"value":"viewof yourName = Inputs.text({value: \"You\", label: \"Your name\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5061,"value":"That’s quick and easy, but it won’t save if you refresh. To make your own leaderboard with your own friends and your own charts to answer your own burning questions, fork this notebook and fill out the array of names and tokens below. When you fill it out, the notebook will switch to use that instead of our data.\n\n⚠️ Remember, **if people can see your token, they can probably spoof your New York Times account**, so be wary; you can share with trusted friends, but don’t publish it publicly.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4777,"value":"---\n## Data loading","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2107,"value":"viewof refresh = Inputs.button(\"Refresh data\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"savedData = (await FileAttachment(\"data@3.json\").json()).map((d) => {\n d.puzzle.date = utcParse(d.puzzle.print_date);\n return d;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3148,"value":"liveData = (refresh, (await Promise.all(tokens.map(getData))).flat())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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.print_date) }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4526,"value":"utcParse = d3.utcParse(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5376,"value":"utcFormat = d3.utcFormat(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3972,"value":"localStorage.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3978,"value":"---\n### Formatting helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4316,"value":"frame = Plot.frame({ stroke: \"lightgray\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2144,"value":"color = ({\n domain: names,\n range: d3.schemeTableau10\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4046,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4445,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5416,"value":"import {localStorage} from \"@mbostock/safe-local-storage\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4466,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null