The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Sep 23, 2022
2 forks
7 stars
Data wrangling essentials: comparisons in JavaScript, Python, SQL, R, and ExcelMethods of Comparison, ComparedSeasonality IndexCorrelation over timeDescriptive statistics: comparisons in JavaScript, Python, SQL, R, and ExcelDiscovering Date PatternsSeasonal SpiralsPizza ParadiseHacking Power BI Charts with PlotSQL Mystery GameShark Tank: Tech Pitches ExplorationWatch the NBA Finals Players Data Jam on Observable
Monthly Retail Trade Report
Also listed in…
Retail
import { data, advancedDate, industryDateMap } from "@observablehq/monthly-retail-trade-report-data"
// we define the limits of our data to be 2019 to the date of the latest report
dateExtent = [d3.utcParse("%Y-%m-%d")("2019-09-01"), d3.utcMonth.offset(advancedDate, 2)]
dataIndustries = data.filter(d => d.naics.indexOf("*") < 0 && d.date >= dateExtent[0] && d.date <= dateExtent[1])
advancedIndustries = Array.from(industryDateMap.keys()).filter(d => d.indexOf("*") < 0 && industryDateMap.get(d).get(advancedDate))
dates = Array.from(new Set(dataIndustries.map(d => d.date)))
function pointIndex(index) {
return function (series) {
return series.map((d, i) => {
return (d / series[index] - 1);
});
};
}
percent = d3.format("+0.2%")
percentColor = (n) => textcolor(percent(n), { color: n > 0 ? 'darkgreen' : d3.schemeTableau10[2] })
dateFormat = d3.utcFormat("%b. %d, %Y")
monthFormat = d3.utcFormat("%B %Y")
recessionMarks = (max) => [
// recession annotations from https://www.nber.org/research/data/us-business-cycle-expansions-and-contractions
Plot.rect([{}], {
x1: d3.utcParse("%Y-%m-%d")("2020-02-01"),
x2: d3.utcParse("%Y-%m-%d")("2020-06-01"),
y1: 0,
y2: max,
fill: "lightgray",
fillOpacity: 0.5,
clip: true
}),
Plot.text([{}], { text: d => "COVID-19 Recession", x: d3.utcParse("%Y-%m-%d")("2020-02-01"), dy: -15, frameAnchor: "top", textAnchor: "start", clip: true}),
Plot.rect([{}], {
x1: d3.utcParse("%Y-%m-%d")("2007-12-01"),
x2: d3.utcParse("%Y-%m-%d")("2009-06-01"),
y1: 0,
y2: max,
fill: "lightgray",
fillOpacity: 0.5,
clip: true
}),
Plot.text([{}], { text: d => "2008 Recession", x: new Date("2007-12-01"), dy: -15, frameAnchor: "top", textAnchor: "start", clip: true}),
]
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",
})
import { Plot } from "@mkfreeman/plot-tooltip"
import {textcolor} from "@observablehq/text-color-annotations-in-markdown"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
