31:T6ee,Plot.plot({ y: { tickFormat: (d) => d * -1 }, marks: [ Plot.lineY( shippedOrders, Plot.binX( { y: "max" }, { x: "shipDate", y: "orderID", stroke: "#6B00FF", interval: d3.utcDay } ) ), Plot.lineY(predictionLine, { x: "shipDate", y: "orderID", stroke: "#6B00FF", opacity: 0.5, strokeDasharray: "2 6" }), Plot.dot(shippingGroupsPoints, { y: "orderID", x: "projectedShipDate", r: 1 }), Plot.ruleX(shippingGroupsPoints, { x: "projectedShipDate", y1: "orderID", y2: (d) => d.orderID + markOffset }), Plot.text(shippingGroupsPoints, { x: "projectedShipDate", y: (d) => d.orderID + markOffset, text: (d) => `${d.label}\n${d3.utcFormat("%b %e")( shippingProjection.copy()(d.orderID) )}`, textAnchor: "middle", lineAnchor: "bottom", fill: "currentColor", stroke: "#FEC833" }), Plot.ruleX([shippingProjection.copy()(orderID)], { stroke: "white" }), Plot.textY([{ id: orderID, date: shippingProjection.copy()(orderID) }], { text: (d) => `Order ${-1 * d.id}\nshipping email\nmight come ~${d3.utcFormat( "%b %e" )(d.date)}?`, x: "date", fill: "white", stroke: "#FEC833", // prettier-ignore ...Object.assign( {}, orderMoreThanHalfway ? { y: -1000, lineAnchor: "top", textAnchor: "end", dx: -5, dy: 15 } : { y: -40000, lineAnchor: "bottom", textAnchor: "start", dx: 5, dy: -5 } ) }) ], style: { background: "#FEC833" }, height: 200, width, grid: true, margin: 30, marginLeft: 60 })32:[{"id":"23c2697bbad155e5f1a06818585e141fd7f3f3d2dd69fd5e64d40a4fcc8c9baeaf8a432ca6b3403416f6ef497984e771ee070a28656427b79fb24c46bbae57f0","href":"https://static.observableusercontent.com/files/23c2697bbad155e5f1a06818585e141fd7f3f3d2dd69fd5e64d40a4fcc8c9baeaf8a432ca6b3403416f6ef497984e771ee070a28656427b79fb24c46bbae57f0","name":"playdate_tracking_2022_04_28.csv","type":"text/csv","lastModified":1651619018170.418,"size":37382}] 2f:{"title":"Playdate Order Tracking","cells":[{"id":0,"value":"# Playdate Order Tracking\n_Deep breaths. It'll arrive soon._ 🟨","pinned":false,"hidden":false,"mode":"md"},{"id":245,"value":"viewof refresh = Inputs.button(\"Refresh\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"#### ${useArchived ? textcolor(\"Archived Data (2022-04-28)\", \"#312F28\") : textcolor(\"LIVE Data\", \"#FEC833\")}","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"viewof useArchived = Inputs.toggle({label: \"Use Archived Data?\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":151,"value":"## Highest ${textcolor(\"Shipped\", \"#6B00FF\")} Order ID: #${-newestShippedOrder.orderID}","pinned":false,"hidden":false,"mode":"md"},{"id":162,"value":"## Highest ${textcolor(\"Processing\", \"#FEC833\")} Order ID: #${-newestProcessingOrder.orderID}","pinned":false,"hidden":false,"mode":"md"},{"id":185,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"## Whether a Playdate has ${textcolor(\"shipped\", \"#6B00FF\")} or ${textcolor(\"not\", \"#312F28\")}","pinned":false,"hidden":false,"mode":"md"},{"id":50,"value":"plotPlaydateOrderTicks = Plot.plot({\n width,\n height: 100,\n marginTop: 20,\n x: {\n type: \"log\"\n },\n color: {\n domain: [true, false],\n range: [\"#6B00FF\", \"#312F28\"]\n },\n marks: [\n Plot.tickX(data, {\n x: (d) => -d.orderID,\n strokeWidth: 3,\n opacity: 0.5,\n stroke: \"isShipping\"\n }),\n Plot.ruleX([-orderID], { stroke: \"white\" })\n ],\n style: {\n background: \"#FEC833\",\n color: \"#312F28\",\n // fontSize: 18,\n fontWeight: \"bold\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"## Shipping Status","pinned":false,"hidden":false,"mode":"md"},{"id":295,"value":"Plot.plot({\n width,\n height: 100,\n marginTop: 20,\n marginLeft: 130,\n x: {\n type: \"log\",\n grid: true\n },\n y: {\n label: null\n // axis: null\n },\n color: {\n domain: [false, true],\n range: [\"#312F28\", \"#6B00FF\"]\n },\n marks: [\n // only include non-null status orders\n Plot.dot(\n data.filter((d) => d.status),\n {\n x: (d) => -d.orderID,\n y: \"status\",\n strokeWidth: 3,\n opacity: 0.5,\n fill: \"isShipping\",\n r: 4,\n sort: true\n }\n )\n ],\n style: {\n background: \"#FEC833\",\n color: \"#312F28\",\n fontWeight: \"bold\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"## Shipping Projection \n_Made by [@mythmon](https://observablehq.com/@mythmon): \"Thanks to [@visnup](https://observablehq.com/@visnup), who inspired the idea and helped me get it actually good looking.\"_ Thank you both!","pinned":false,"hidden":false,"mode":"md"},{"id":340,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"viewof orderIDcontrol = Inputs.range(\n d3\n .extent(data, (d) => d.orderID)\n .map((d) => -d)\n .reverse(),\n {\n label: html`Order #
`,\n value: !shippedOrders.some((order) => order.orderID === -6329)\n ? 6329\n : newestShippedOrder.orderID - 500,\n step: 1\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1318,"value":"enter an order number to reduce anxiety, not predict deliveries – past shipping velocity is not a guarantee of future velocity 🧐","pinned":false,"hidden":false,"mode":"html"},{"id":1358,"value":"***","pinned":false,"hidden":false,"mode":"md"},{"id":198,"value":"People want to get their hands on this fun weird new handheld console [Panic](https://panic.com/) has created called [Playdate 🟨](https://play.date/) (me included!). The [community](https://twitter.com/radiocolin/status/1518695850251374594) put together a [spreadsheet](https://docs.google.com/spreadsheets/d/1ioAvAZJgs8KRrZIGVxJAe9JgtfyJ_OwUqrMp5qV8wfg/edit#gid=326302103) to keep track of when people are receiving their orders. People who placed an order received an Order ID (`#PDXXXX`), and they are being shipped on a rolling basis, from smallest to largest.\n\nThis is a plot of the order statuses reported by the community. It should update as people report any changes in their shipping status (thanks, Playdate community!). If this breaks because the spreadsheet undergoes some overhauls, you can see a dated static example by clicking the `\"Use Archived Data?\"` checkbox.","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":356,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":360,"value":"### Shipping Projection","pinned":false,"hidden":false,"mode":"md"},{"id":789,"value":"markOffset = 5000","pinned":false,"hidden":false,"mode":"ojs"},{"id":1380,"value":"orderID = -1*orderIDcontrol","pinned":false,"hidden":false,"mode":"ojs"},{"id":1302,"value":"orderMoreThanHalfway = shippingProjection.copy().range([0, 0.1])(orderID) >= 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"shippedOrders = data.filter(\n (d) =>\n d.shipDate &&\n d.shipDate >= new Date(\"2022-04-10\") &&\n d.shipDate <= new Date()\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":744,"value":"shippingProjection = d3\n // y = mx + b mapping of\n .scaleLinear()\n // shipped order number\n .domain(d3.extent(shippedOrders, (d) => d.orderID).reverse())\n // to shipping dates\n .range(d3.extent(shippedOrders, (d) => d.shipDate))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1110,"value":"predictionLine = [\n d3.least(shippedOrders, (d) => d.orderID),\n {\n shipDate: shippingProjection(finalOrderToShip.orderID),\n orderID: finalOrderToShip.orderID\n }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":820,"value":"shippingGroupsPoints = d3\n // take the point with the highest order number in each group\n .flatRollup( data, (g) => d3.least(g, (d) => d.orderID), (d) => d.group)\n // and generate a shipping projection\n .map(([groupNumber, datum]) => ({\n ...datum,\n projectedShipDate: shippingProjection.copy()(datum.orderID),\n label: `group ${groupNumber}`\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":682,"value":"finalOrderToShip = d3.least(data, (d) => d.orderID)","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"### Newest Orders","pinned":false,"hidden":false,"mode":"md"},{"id":137,"value":"newestProcessingOrder = d3.least(\n data.filter((d) => d.status === \"Processing\"),\n (d) => d.orderID\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"newestShippedOrder = d3.least(\n data.filter((d) => d.status === \"Shipped\"),\n (d) => d.orderID\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"### Data Wrangling","pinned":false,"hidden":false,"mode":"md"},{"id":590,"value":"viewof search = Inputs.search(data, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"viewof table = Inputs.table(search, { format: { orderID: (i) => -i } })","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"{\n const dateIssues = massaged.filter(\n (d) => d.shipDate.getFullYear() !== 2022 && !isNaN(d.shipDate)\n );\n return md`besides converting types and making easier-to-use column names (from \\`raw\\` → \\`massaged\\`), there are a few pieces of apparent bad data (from \\`massaged\\` to \\`data\\`):\n\n

${\n dateIssues.length\n } shipping dates have an invalid year

${Inputs.table(\n dateIssues,\n {}\n )}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"data = {\n const cleaned = massaged.map((d) => ({\n ...d,\n shipDate: isNaN(d.shipDate)\n ? null\n : new Date(new Date(d.shipDate).setFullYear(2022))\n }));\n\n return cleaned.filter((d) => !(d[col.orderID] === \"448XX\" && d.group === 2));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"// clean up raw data and assign reasonable column names\nmassaged = raw\n .filter((d) => d[\"What is your order ID?\"] !== \"\")\n .map((d) => ({\n ...d,\n status: d[col.status],\n isShipping: d[col.isShipping] === \"Yes\",\n shipDate: new Date(d[col.shipDate]),\n consoleOrCombo: d[col.consoleOrCombo],\n orderID: +d[col.orderID].replace(/[xX#\\*]/g, \"0\").replace(/\\D/g, \"\") * -1,\n group: +d[col.group]\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":612,"value":"col = ({\n status: `What status is your order in? (Pick \"Shipped\" if you have tracking numbers!)`,\n isShipping:\n \"Have you received a shipping email yet? Please pick Yes if you have tracking numbers.\",\n shipDate: \"Date Shipping Email Received\",\n consoleOrCombo: \"Did you order just the console or cover as well?\",\n orderID: \"What is your order ID?\",\n group: \"What group are you in?\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"raw = {\n refresh;\n // use stored data or live data?\n if (useArchived) {\n return FileAttachment(\"playdate_tracking_2022_04_28.csv\").csv({\n typed: true\n });\n } else {\n return d3.csv(getCsvUrl(playdateDataURL));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"playdateDataURL = \"https://docs.google.com/spreadsheets/d/1ioAvAZJgs8KRrZIGVxJAe9JgtfyJ_OwUqrMp5qV8wfg/edit#gid=2063154757\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"// from https://observablehq.com/@observablehq/google-sheets-starter\n// Converts a Google Sheets website URL to its CSV URL. You can also go to “File → Publish to web”, select the “Comma-separated values (.csv)” type, select the sheet with your data, and use that CSV URL directly with `d3.csv` above. If you need data to update faster, try the Google Sheets API: https://stackoverflow.com/questions/30082277/accessing-a-new-style-public-google-sheet-as-json/44479726#44479726\n\ngetCsvUrl = url => {\n url = new URL(url);\n const id = url.pathname.split(\"/\")[3]\n const gid = new URLSearchParams(url.hash.slice(1)).get(\"gid\") || 0;\n return `https://docs.google.com/spreadsheets/d/${id}/export?format=csv&gid=${gid}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":98,"value":"import {textcolor} from \"@observablehq/text-color-annotations-in-markdown\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1218,"value":"import { styles } from \"@sgregson/styles\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"styles","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"#### Icon Credit\n[Joystick](https://thenounproject.com/icon/joystick-4449841/) by Zach Bogart from Noun Project","pinned":false,"hidden":false,"mode":"md"}],"files":"$W32","stdlib":"1","titling":"auto"}