3e:null 3f:["$","title",null,{"children":"Macro data graphs | Stevenson and Wolfers | Observable"}] 45:T4bd,html` `46:T5d3,viewof annotateChoices = Inputs.form( { annotate: Inputs.button( [ [ "Annotate", (value) => value.concat([ { text: "annotation_" + value.length, x: 0.05 * value.length * d3.max(graphData_range.data.map((d) => d.date)) + (1 - 0.05 * value.length) * d3.min(graphData_range.data.map((d) => d.date)), y: d3.max(graphData_range.data.map((d) => +d.value)), id: "annotation_" + value.length, width: "15%", height: "3em" } ]) ] ], { value: [] } ), arrowList: Inputs.button( [ [ "\u2193", (value) => value.concat([ { text: "arrow_" + value.length, x1: 100 + 20 * value.length, y1: 30 + 20 * value.length, x2: 100 + 20 * value.length, y2: 80 + 20 * value.length, id: "arrow_" + value.length, color: "gray" } ]) ] ], { value: [] } ) }, { template: (inputs) => htl.html`

${Object.values( inputs )}

` //source: https://observablehq.com/@tophtucker/horizontal-inputs } )47:T6e2,viewof focus = { const focusHeight = 100; const margin = { top: 20, right: 20, bottom: 30, left: 40 }; const height = 440; let x = d3 .scaleUtc() .domain(d3.extent(graphData, (d) => d.date)) .range([margin.left, width - margin.right]); let y = d3 .scaleLinear() .domain([0, d3.max(graphData, (d) => d.value)]) .range([height - margin.bottom, margin.top]); let line = (x, y) => d3 .line() .defined((d) => !isNaN(d.value)) .x((d) => x(d.date)) .y((d) => y(d.value)); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, focusHeight]) .style("display", "block"); const brush = d3 .brushX() .extent([ [margin.left, 0.5], [width - margin.right, focusHeight - margin.bottom + 0.5] ]) .on("brush", brushed) .on("end", brushended); const defaultSelection = [ x(d3.utcYear.offset(x.domain()[1], -1)), x.range()[1] ]; const xAxis = (g, x, height) => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(x) .ticks(width / 80) .tickSizeOuter(0) ); svg.append("g").call(xAxis, x, focusHeight); svg .append("path") .datum(graphData) .attr("fill", "none") .attr("stroke", "red") .attr("d", line(x, y.copy().range([focusHeight - margin.bottom, 4]))); const gb = svg.append("g").call(brush).call(brush.move, defaultSelection); function brushed({ selection }) { if (selection) { svg.property("value", selection.map(x.invert, x).map(d3.utcDay.round)); svg.dispatch("input"); } } function brushended({ selection }) { if (!selection) { gb.call(brush.move, defaultSelection); } } return svg.node(); }48:T490,frequencyChoices = [ // Source: https://fred.stlouisfed.org/docs/api/fred/series_observations.html#frequency { Name: "Daily", frequency: "d", perYear: 365 }, { Name: "Daily, 7-Day", frequency: "D", perYear: 365 }, { Name: "Weekly", frequency: "w", perYear: 52 }, { Name: "Biweekly", frequency: "bw", perYear: 26 }, { Name: "Monthly", frequency: "m", perYear: 12 }, { Name: "Quarterly", frequency: "q", perYear: 4 }, { Name: "Semiannual", frequency: "sa", perYear: 2 }, { Name: "Annual", frequency: "a", perYear: 1 }, { Name: "Weekly, Ending Friday", frequency: "wef", perYear: 52 }, { Name: "Weekly, Ending Thursday", frequency: "weth", perYear: 52 }, { Name: "Weekly, Ending Wednesday", frequency: "wew", perYear: 52 }, { Name: "Weekly, Ending Tuesday", frequency: "wetu", perYear: 52 }, { Name: "Weekly, Ending Monday", frequency: "wem", perYear: 52 }, { Name: "Weekly, Ending Sunday", frequency: "wesu", perYear: 52 }, { Name: "Weekly, Ending Saturday", frequency: "wesa", perYear: 52 }, { Name: "Biweekly, Ending Wednesday", frequency: "bwew", perYear: 26 }, { Name: "Biweekly, Ending Monday", frequency: "bwem", perYear: 26 } ]49:[] 43:{"id":"b5642c9e02ea6f99","slug":null,"title":"Macro data graphs","thumbnail":"dfd86d9a672f1b18b6344d54241906fbd9ae569facb59e2c07cf0c3f3b0906b5","access_level":"public","create_time":"$D2023-03-02T04:20:11.703Z","update_time":"$D2025-02-19T22:17:27.820Z","view_time":null,"first_public_time":"$D2023-03-02T04:20:11.703Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"28d85ddf7b82db71","login":"stevensonwolfers","name":"Stevenson and Wolfers","avatar_url":"https://avatars-next.observableusercontent.com/9d55cdad1d5650955034297eaa7e144b4de574ebcf436d5eff55b9198ced303f","tier":"starter_2024","bio":"Working on interactive graphics for intro econ pedagogy","following":false},"version":3930,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc564bcf2081989e","login":"jwolfers","name":"Justin Wolfers","avatar_url":"https://avatars-next.observableusercontent.com/4d33134949c7317b44fe2f420aa05c7ad094e1a5d1b50be01c4da0f751f18b4a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"dc564bcf2081989e","login":"jwolfers","name":"Justin Wolfers","avatar_url":"https://avatars-next.observableusercontent.com/4d33134949c7317b44fe2f420aa05c7ad094e1a5d1b50be01c4da0f751f18b4a","tier":null,"role":"editor"},{"type":"team","id":"28d85ddf7b82db71","login":"stevensonwolfers","name":"Stevenson and Wolfers","avatar_url":"https://avatars-next.observableusercontent.com/9d55cdad1d5650955034297eaa7e144b4de574ebcf436d5eff55b9198ced303f","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Macro data graphs","cells":[{"id":0,"value":"# Macro data graphs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":761,"value":"viewof search = Inputs.text({\n label: \"Series to search for\",\n placeholder: \"Unemployment\",\n value: \"Employment\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1573,"value":"viewof chosenSeries1 = Inputs.select(\n seriesSearch.seriess\n // .filter((d) => d.seasonal_adjustment_short == \"SA\")\n .sort(function (a, b) {\n return b.popularity - a.popularity;\n })\n .map((d) => d.title),\n { label: \"Choose the series to graph\", width: \"100%\" }\n)\n//Add some synchronized inputs for graphing other codes: https://observablehq.com/@observablehq/synchronized-inputs","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"viewof chosenUnits = Inputs.select(unitsChoices.map(d=>d.Name),{label:\"Choose the series to graph\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3253,"value":"viewof chosenSeries2 = Inputs.select(\n /// Doesn't do anything (yet)\n seriesSearch.seriess\n // .filter((d) => d.seasonal_adjustment_short == \"SA\")\n .sort(function (a, b) {\n return b.popularity - a.popularity;\n })\n .map((d) => d.title),\n { label: \"Choose the 2nd series to graph\", width: \"100%\" }\n)\n//Add some synchronized inputs for graphing other codes: https://observablehq.com/@observablehq/synchronized-inputs","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3638,"value":"import { LineChart } from \"@stevensonwolfers/line-chart\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3740,"value":"viewof dataChoices = Inputs.form(\n {\n frequency: Inputs.select(\n frequencyChoices\n .filter(\n (d) =>\n d.perYear <=\n frequencyChoices.find((d) => d.Name == dataFrequency).perYear\n )\n .map((d) => d.Name),\n { label: \"Frequency\", value: dataFrequency }\n ), // to do this manually: https://stackoverflow.com/questions/19595972/d3-js-converting-months-to-quarter\n state: Inputs.select([\"All\", \"MA\"], { label: \"State\" })\n },\n {\n template: (inputs) =>\n htl.html`

${Object.values(\n inputs\n )}

` //source: https://observablehq.com/@tophtucker/horizontal-inputs\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3597,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1651,"value":"ch = html`

${chartTitle}${chartSubtitle}${chart}${footer}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3873,"value":"focus","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3846,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2595,"value":"viewof graphData_range = rangeSlider(\n graphData,\n (d) => new Date(d.date),\n (value) => d3.mean(value.values.map((d) => d.value)),\n {\n height: 90,\n width: width,\n yTicks: 1,\n marginRight: width - 720,\n marginLeft: 70\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3875,"value":"graphData_range","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3868,"value":"graphData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3670,"value":"(graphData_range.range[0] = formatDate(\n graphData_range.range[1] - 365 * 24 * 60 * 60 * 1000\n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3691,"value":"null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3687,"value":"graphData_range","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3802,"value":"d3.mean(graphData_range.data.map((d) => d.value))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3120,"value":"downloadButton(graphData_range.data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1445,"value":"chartTitle = {\n let cT = d3\n .create(\"h1\")\n .text(seriesDescription.seriess[0].title)\n .style(\"width\", \"800px\")\n .attr(\"class\", \"chartTitle\")\n .call(makeEditable);\n cT.append(\"span\")\n .text(\"\")\n .style(\"color\", \"white\")\n .style(\"background\", \"#0066b3\")\n .style(\"padding\", \"1px 0px\");\n return cT.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1506,"value":"chartSubtitle = d3\n .create(\"h2\")\n .text(\n units == \"lin\"\n ? seriesDescription.seriess[0].units\n : unitsChoices.find((d) => d.units == units).Name\n )\n .style(\"max-width\", \"100%\")\n .attr(\"class\", \"chartSubtitle\")\n .call(makeEditable)\n .node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"chart = LineChart(graphData_range.data, {\n x: (d) => d.date,\n y: (d) => +d.value,\n // z: (d) => d.series,\n yLabel: seriesDescription.seriess[0].units, // Fix this for transformations\n yFormat: \",s\",\n width: 800,\n height: 400,\n annotations: annotateChoices.annotate,\n arrows: annotateChoices.arrowList,\n // color: (z) => swColors[0].color,\n lineLabelText: (d) => d.value,\n lineLabelTextWidth: 50,\n marginLeft: 70,\n eliminateOutliers: true,\n outlierSD: 4\n\n // yDomain: [0, 5]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1757,"value":"footer = d3\n .create(\"h3\")\n .html(\n 'Chart: @justinwolfers • ' +\n \"Source: \" +\n source.sources[0].name +\n \" • \" +\n \"Release: \" +\n release.releases[0].name +\n \" • \" +\n ' Series: ' +\n seriesId +\n \" \"\n )\n .style(\"max-width\", \"100%\")\n .attr(\"class\", \"chartFooter\")\n .call(makeEditable)\n .node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2645,"value":"

Data from ${formatDate(graphData_range.range[0])} to ${formatDate(graphData_range.range[1])}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":412,"value":"### UserannotateChoices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":519,"value":"viewof option_other = Inputs.text({placeholder:\"Type the FRED series code here (eg UNRATE)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2835,"value":"graphData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":290,"value":"## Choices, summarized","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3505,"value":"seriesSearch","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"seriesId = seriesSearch.seriess.find((d) => d.title == chosenSeries1).id","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"dataFrequency = seriesDescription.seriess[0].frequency","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"frequency = frequencyChoices.find((d) => d.Name == dataChoices.frequency).frequency","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"units = unitsChoices.find((d) => d.Name == chosenUnits).units","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"## Fetch Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3922,"value":"Here's the bacon problem","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3924,"value":"link = corsProxy +\n apiUrl +\n \"series?\" +\n \"api_key=\" +\n api_key +\n \"&series_id=\" +\n seriesId +\n \"&file_type=json\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3926,"value":"fetch(link).then((r) => r.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"seriesDescription = fetch(corsProxy+apiUrl+\"series?\"+\"api_key=\"+api_key+\"&series_id=\"+seriesId+\"&file_type=json\").then(response => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"seriesObservations = fetch(\n corsProxy +\n apiUrl +\n \"series/observations?\" +\n \"api_key=\" +\n api_key +\n \"&series_id=\" +\n seriesId +\n \"&frequency=\" +\n frequency +\n \"&units=\" +\n units +\n \"&file_type=json\"\n).then((response) => response.json())\n// .then((response) => isNan(response.observations[observations.length-1].value) ? response.observations.slice(0,-1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2270,"value":"graphData = seriesObservations.observations.map((d) => ({\n date: Date.parse(d.date),\n fredValue: d.value, // the raw value downloaded from FRED\n value: d.value, // transformations have been applied to fredValue to obtain value, which we graph\n series: seriesId\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1591,"value":"allCategories = fetch(\n corsProxy +\n apiUrl +\n \"category/children?\" +\n \"category_id=\" +\n \"0&\" +\n \"api_key=\" +\n api_key +\n \"&file_type=json\"\n).then((response) => response.json())\n// https://api.stlouisfed.org/fred/category/children?category_id=13&api_key=abcdefghijklmnopqrstuvwxyz123456","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1730,"value":"release = fetch(\n corsProxy +\n apiUrl +\n \"series/release?series_id=\" +\n seriesId +\n \"&api_key=\" +\n api_key +\n \"&file_type=json\"\n).then((response) => response.json())\n// https://api.stlouisfed.org/fred/series/release?series_id=IRA&api_key=abcdefghijklmnopqrstuvwxyz123456","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1744,"value":"source.sources[0].name\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1742,"value":"source = fetch(\n corsProxy +\n apiUrl +\n \"release/sources?release_id=\" +\n release.releases[0].id +\n \"&api_key=\" +\n api_key +\n \"&file_type=json\"\n).then((response) => response.json())\n// https://api.stlouisfed.org/fred/release/sources?release_id=51&api_key=abcdefghijklmnopqrstuvwxyz123456","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"---\n# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":625,"value":"### Fred API parameters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":152,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"unitsChoices = [\n { Name: \"Levels (no transformation)\", units: \"lin\" },\n { Name: \"Change\", units: \"chg\" },\n { Name: \"Change from a year ago\", units: \"ch1\" },\n { Name: \"Percent Change\", units: \"pch\" },\n { Name: \"Percent change from a year ago\", units: \"pc1\" },\n { Name: \"Compounded Annual Rate of Change\", units: \"pca\" },\n { Name: \"Continuously Compounded Rate of Change\", units: \"cch\" },\n { Name: \"Continuously Compounded Annual Rate of Change\", units: \"cca\" },\n { Name: \"Natural Log\", units: \"log\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"### Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":898,"value":"fontSize = 14 + Math.round((8 * Math.max(width - 400, 0)) / 800, 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3135,"value":"html` `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"### Helper functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2575,"value":"import { rangeSlider } from \"@bumbeishvili/utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3124,"value":"import { button as downloadButton } from \"@jeremiak/download-data-button\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2143,"value":"makeEditable = function makeEditable(el) {\n // calling this on an element will make it click editable\n el.attr(\"contentEditable\", \"true\")\n .style(\"max-width\", \"100%\")\n .on(\n \"blur\",\n (\n event // Read this: https://observablehq.com/@d3/click-vs-drag\n ) => event.currentTarget.setHTML(event.currentTarget.innerText)\n )\n .on([\"focus\"], (event) => {\n event.currentTarget.setHTML(\n event.currentTarget.innerHTML.trim().replace(/
$/i, \"\")\n );\n event.currentTarget.innerText = event.currentTarget.innerHTML;\n });\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2173,"value":"makeEditableOnClick = function makeEditableonClick(event, d) {\n // calling this on an element will make it click editable\n if (event.defaultPrevented) return; // dragged\n d3.select(this)\n .attr(\"contentEditable\", \"true\")\n .style(\"max-width\", \"100%\")\n .on(\n \"blur\",\n (\n event // Read this: https://observablehq.com/@d3/click-vs-drag\n ) => event.currentTarget.setHTML(event.currentTarget.innerText)\n )\n .on([\"focus\"], (event) => {\n event.currentTarget.setHTML(\n event.currentTarget.innerHTML.trim().replace(/
$/i, \"\")\n );\n event.currentTarget.innerText = event.currentTarget.innerHTML;\n });\n return;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2647,"value":"formatDate = d3.utcFormat(\"%b %Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2480,"value":"Data transformations: (FRED definitions are [here](https://fredhelp.stlouisfed.org/fred/data/understanding-the-data/formulas-calculate-growth-rates/))","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2274,"value":"function lag(grphDta, T=1) {\n grphDta.map(\n (d, i) => (d.value = grphDta.map((d) => d.fredValue)[i - T])\n );\n return grphDta;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2397,"value":"function chg(grphDta, T=1) {\n grphDta.map(\n (d, i) => (d.value = d.fredValue - grphDta.map((d) => d.fredValue)[i - T])\n );\n return grphDta;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2421,"value":"function freq(frq=frequency) { // use frequency as the input\n return frequencyChoices.filter((d) => d.frequency == frq)[0].perYear;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2412,"value":"function ch1(grphDta, frq=frequency) {\n let T = frequencyChoices.filter((d) => d.frequency == frq)[0].perYear;\n grphDta.map(\n (d, i) => (d.value = d.fredValue - grphDta.map((d) => d.fredValue)[i - T])\n );\n return grphDta;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2455,"value":"function pch(grphDta) { // Percent change\n grphDta.map(\n (d, i) =>\n (d.value =\n (d.fredValue - grphDta.map((d) => d.fredValue)[i - 1]) /\n grphDta.map((d) => d.fredValue)[i - 1])\n );\n return grphDta;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2467,"value":"function pc1(grphDta, frq = frequency) {\n // Percent change from a year ago\n let T = frequencyChoices.filter((d) => d.frequency == frq)[0].perYear;\n grphDta.map(\n (d, i) =>\n (d.value =\n (d.fredValue - grphDta.map((d) => d.fredValue)[i - T]) /\n grphDta.map((d) => d.fredValue)[i - T])\n );\n return grphDta;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2487,"value":"function pca(grphDta, frq = frequency) {\n // Percent change at an annual rate\n let T = frequencyChoices.filter((d) => d.frequency == frq)[0].perYear;\n grphDta.map(\n (d, i) =>\n (d.value =\n (d.fredValue / grphDta.map((d) => d.fredValue)[i - 1]) ** T - 1)\n );\n return grphDta;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2553,"value":"function cch(grphDta, T = 1) {\n grphDta.map(\n (d, i) =>\n (d.value =\n Math.log(d.fredValue) -\n Math.log(grphDta.map((d) => d.fredValue)[i - T]))\n );\n return grphDta;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2562,"value":"UNFINISHED function cca(grphDta, lag = 1, frq=frequency) {\n let T = frequencyChoices.filter((d) => d.frequency == frq)[0].perYear;\n\n grphDta.map(\n (d, i) =>\n (d.value =\n (Math.log(d.fredValue) -\n Math.log(grphDta.map((d) => d.fredValue)[i - T])))\n );\n return grphDta;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2511,"value":"function index(grphDta, dt = \"2020-01-01\") { \n let base = grphDta.filter((d) => d.date == dt).map((d) => d.fredValue);\n grphDta.map((d) => (d.value = (100 * d.fredValue) / base));\n return grphDta;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2472,"value":"function log(grphDta) {\n grphDta.map((d) => (d.value = Math.log(d.fredValue)));\n return grphDta;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2405,"value":"unitsChoices","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"### Links","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"apiUrl = \"https://api.stlouisfed.org/fred/\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"api_key = \"8e4e52895e6f4ffef6e8b7ee882d6f76\"\n\n//api_key = Secret(\"fredApiKey\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"corsProxy = \"https://corsproxy.io/?\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"## Experiments","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":754,"value":"### Searching for a series","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":834,"value":"seriesSearch = fetch(\n corsProxy +\n apiUrl +\n \"series/search?search_text=\" +\n search +\n \"&limit=200\" +\n \"&order_by=search_rank\" +\n \"&api_key=\" +\n api_key +\n \"&file_type=json\"\n).then((response) => response.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"viewof top100 = Inputs.select({\n label: \"Series to search for\",\n placeholder: \"Unemployment\",\n submit: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":"## Wish list and to dos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":873,"value":"* Multiple lines\n* [Control panel](https://observablehq.com/@analyzer2004/control-panel) for options.\n* Right click context menu to recolor lines, etc. Refs: [1](https://www.npmjs.com/package/d3-context-menu) with [example](https://plnkr.co/edit/hAx36JQhb0RsvVn7TomS?p=info&preview), [2](https://stackoverflow.com/questions/13090321/custom-context-menu-in-d3-and-svg)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":926,"value":"// swColors = [\n// { name: \"blue\", color: d3.color(\"#0066b3\") },\n// { name: \"red\", color: d3.color(\"#d12244\") },\n// { name: \"purple\", color: d3.color(\"#92278f\") },\n// { name: \"green\", color: d3.color(\"#007f3e\") },\n// { name: \"brown\", color: d3.color(\"#8f5001\") },\n// { name: \"orange\", color: d3.color(\"#c74a1b\") },\n// { name: \"pink\", color: d3.color(\"#ec008c\") },\n// { name: \"black\", color: d3.color(\"#333333\") },\n// { name: \"dkgray\", color: d3.color(\"#6E6E70\") },\n// { name: \"gray\", color: d3.color(\"#818284\") },\n// { name: \"ltgray\", color: d3.color(\"#A8A9AC\") },\n// { name: \"vltgray\", color: d3.color(\"#D2D3D5\") }\n// ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2195,"value":"displayPalettes = (palettes = [], showText = false, displayIndex = false) => {\n const w = 300\n const h = 20\n const margin = 5\n \n if(typeof palettes[0] === 'string') palettes = [palettes]\n\n return svg``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2203,"value":"[swColors.map(d=>d.color)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2197,"value":"displayPalettes([swColors.map((d) => d.color)], false)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3817,"value":"swColors = [\n \"#0066b3\",\n \"#d12244\",\n \"#92278f\",\n \"#007f3e\",\n \"#8f5001\",\n \"#c74a1b\",\n \"#ec008c\",\n \"#333333\",\n \"#6E6E70\",\n \"#818284\",\n \"#A8A9AC\",\n \"#D2D3D5\"\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 44:"$43:body"