31:T612,Plot.plot({ caption: `Estimated sales by industry ${monthFormat(dateExtent[0])} through ${monthFormat(advancedDate)}`, marks: [ Plot.ruleY([0]), recessionMarks(d3.max(dataIndustries, d => d.sales)), Plot.ruleX([date]), Plot.lineY( dataIndustries,//.filter(d => advancedIndustries.indexOf(d.naics) >= 0), { filter: d => d.date > date, x: "date", y: "sales", z: "business", stroke: "lightgray", title: "business", strokeWidth: 1, clip: true } ), Plot.lineY( dataIndustries,//.filter(d => advancedIndustries.indexOf(d.naics) >= 0), { filter: d => d.date <= date, x: "date", y: "sales", z: "business", stroke: d => industryCategories[d["business"]], title: "business", strokeWidth: 2, clip: true } ), Plot.text( dataIndustries,//filter(d => advancedIndustries.indexOf(d.naics) >= 0), Plot.selectLast({ text: (d) => `${d.business}: ${percent(industryDateMap.get(d.naics).get(date)?.monthChange)}`, x: date, y: d => industryDateMap.get(d.naics).get(date)?.sales,//"sales", z: "business", textAnchor: "start", dx: 5, fill: d => industryCategories[d["business"]], }) ) ], x: { domain: dateExtent }, y: { label: "Est. Sales (USD, in millions)", tickFormat: d3.format("$,.3r") }, color: { legend: true }, marginLeft: 70, marginRight: 450, height: 400, width })32:T59b,industryCategories = ({ "All other gen. merchandise stores": "General", "Automobile and other motor vehicle dealers": "Auto", "Automotive parts, acc., and tire stores": "Auto", "Beer, wine and liquor stores": "Food", "Building mat. and garden equip. and supplies dealers": "Home", "Building mat. and supplies dealers": "Home", "Clothing and clothing access. stores": "Fashion", "Clothing stores": "Fashion", "Department stores": "General", "Electronic shopping and mail order houses": "Other", "Electronics and appliance stores": "Home", "Food and beverage stores": "Food", "Food services and drinking places": "Food", "Fuel dealers": "Auto", "Furniture and home furnishings stores": "Home", "Furniture, home furn, electronics, and appliance stores": "Home", "Gasoline stations": "Auto", "General merchandise stores": "General", "Grocery stores": "Food", "Health and personal care stores": "Other", "Jewelry stores": "Fashion", "Men's clothing stores": "Fashion", "Miscellaneous stores retailers": "General", "Motor vehicle and parts dealers": "Auto", "Nonstore retailers": "Other", "Other general merchandise stores": "General", "Pharmacies and drug stores": "Other", "Shoe stores": "Fashion", "Sporting goods, hobby, musical instrument, and book stores": "Other", "Warehouse clubs and superstores": "General", "Women's clothing stores": "Fashion", })33:Ta3f,function Scrubber(values, { format = value => value, initial = 0, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; let direction = 1; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }34:[] 2f:{"title":"Monthly Retail Trade Report: Time machine","cells":[{"id":0,"value":"# Monthly Retail Trade Report: Time machine\nThe U.S. Census Bureau [publishes a monthly report](https://www.census.gov/retail/index.html) on estimated sales of retail industries going back to 1992 (adjusted for inflation). \n\nThis notebook allows you to travel back in time and see the monthly change for a particular month in the past.","pinned":false,"hidden":false,"mode":"md"},{"id":333,"value":"For a broader overview of this data see our [Monthly Retail Trade Report notebook](https://observablehq.com/@observablehq/monthly-retail-trade-report).\n\nThe data shown here has been processed from the two Excel spreadsheets published by the Census Bureau, for more detail on the process see \n[this notebook](https://observablehq.com/@observablehq/monthly-retail-trade-report-data).\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":322,"value":"_Try November 2008, April 2020 and March 2021 for months with large changes_","pinned":false,"hidden":false,"mode":"md"},{"id":234,"value":"viewof date = Scrubber(dates, { initial: 250, autoplay: true, delay: 500, format: monthFormat})","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"| Industry | Change | Sales (millions)\n| -- | -- |\n${allIndustries.map(d => d).sort((a,b) => (industryDateMap.get(b).get(date)?.monthChange || -100) - (industryDateMap.get(a).get(date)?.monthChange || -100)).map(ind => {\n let d = industryDateMap.get(ind).get(date)\n let business = d?.business\n if(!business) business = industryDateMap.get(ind).get(dates[0]).business\n return `| ${business} | 0 ? 'darkgreen' : d3.schemeTableau10[2]}; font-weight:bold\">${ d?.monthChange ? percent(d.monthChange) : \"NA\" } | ${d? d3.format(\"$,.4r\")(d?.sales) : \"NA\"} | \\n`\n})}","pinned":false,"hidden":false,"mode":"md"},{"id":212,"value":"## Appendix\nThe code and data powering these visualizations is available below.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"import { data, advancedDate, industryDateMap } from \"@observablehq/monthly-retail-trade-report-data\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"// we define the limits of our data to be 2019 to the date of the latest report\ndateExtent = [d3.utcParse(\"%Y-%m-%d\")(\"1999-01-01\"), d3.utcMonth.offset(advancedDate, 2)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"dataTotals = data.filter(\n (d) =>\n d.naics.indexOf(\"*\") >= 0 && // this is all the totals, including GAFO\n +d.naics[0] < 6 && // this removes 2 categories that don't have advanced numbers\n d.date >= dateExtent[0] &&\n d.date <= dateExtent[1]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"dataIndustries = data.filter(d => d.naics.indexOf(\"*\") < 0 && d.date >= dateExtent[0] && d.date <= dateExtent[1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"advancedIndustries = Array.from(industryDateMap.keys()).filter(d => d.indexOf(\"*\") < 0 && industryDateMap.get(d).get(advancedDate))","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"allIndustries = Array.from(industryDateMap.keys()).filter(d => d.indexOf(\"*\") < 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"dates = Array.from(new Set(dataIndustries.map(d => d.date)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"function pointIndex(index) {\n return function (series) {\n return series.map((d, i) => {\n return (d / series[index] - 1);\n });\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"percent = d3.format(\"+0.2%\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"percentColor = (n) => textcolor(percent(n), { color: n > 0 ? 'darkgreen' : d3.schemeTableau10[2] })","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"dateFormat = d3.utcFormat(\"%b. %d, %Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"monthFormat = d3.utcFormat(\"%B %Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"recessionMarks = (max) => [\n // recession annotations from https://www.nber.org/research/data/us-business-cycle-expansions-and-contractions\n Plot.rect([{}], {\n x1: d3.utcParse(\"%Y-%m-%d\")(\"2020-02-01\"),\n x2: d3.utcParse(\"%Y-%m-%d\")(\"2020-06-01\"),\n y1: 0,\n y2: max,\n stroke: \"lightgray\",\n fillOpacity: 0.5,\n clip: true\n }),\n Plot.text([{}], { text: d => \"COVID-19 Recession\", x: d3.utcParse(\"%Y-%m-%d\")(\"2020-02-01\"), dy: -15, frameAnchor: \"top\", textAnchor: \"start\", clip: true}),\n Plot.rect([{}], {\n x1: d3.utcParse(\"%Y-%m-%d\")(\"2007-12-01\"),\n x2: d3.utcParse(\"%Y-%m-%d\")(\"2009-06-01\"),\n y1: 0,\n y2: max,\n stroke: \"lightgray\",\n fillOpacity: 0.5,\n clip: true\n }),\n Plot.text([{}], { text: d => \"2008 Recession\", x: new Date(\"2007-12-01\"), dy: -15, frameAnchor: \"top\", textAnchor: \"start\", clip: true}),\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"import { Plot } from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"import {textcolor} from \"@observablehq/text-color-annotations-in-markdown\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"// import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}