2c:null 2d:["$","title",null,{"children":"Line halo in pure svg (#870) | Fil | Observable"}] 32:T93d,{ const random = d3.randomLcg(42); const a = Plot.plot({ height: 350, width: 600, marginRight: 30, marks: [ Plot.ruleY([1], { strokeWidth: 0.5 }), Plot.ruleX([0, 9], { strokeDasharray: [2, 4] }), Plot.text([0, 9], { x: [0, 9], y: [1 + 7 / 100, 1 - 7 / 100], textAnchor: "start", text: [ "← Final quarter before recession", "← 9 quarters into recession" ], dx: 4 }), Plot.line( fredSeries, Plot.normalizeY({ filter: (d) => d.start === recession[0], x: "quarters", y: "gdpc1", stroke: "start", halo: "lightblue" }) ), Plot.line( fredSeries, Plot.normalizeY({ filter: (d) => d.start === recession[1], x: "quarters", y: "gdpc1", stroke: "start", halo: true }) ), Plot.line( fredSeries, Plot.normalizeY({ filter: (d) => d.start === recession[2], x: "quarters", y: "gdpc1", stroke: "start", strokeWidth: () => 3 + 2 * random() }) ), Plot.line( fredSeries, Plot.normalizeY({ filter: (d) => d.start === recession[3], x: "quarters", y: "gdpc1", stroke: "start", halo: 7 }) ), Plot.line( fredSeries, Plot.normalizeY({ filter: (d) => d.start === recession[4], x: "quarters", y: "gdpc1", stroke: "start", halo: { stroke: "pink", strokeWidth: 14, strokeDasharray: "7 17" } }) ) ], x: { insetLeft: 20, insetRight: 0, ticks: quarters, tickFormat: (d) => (d === 0 ? "" : d % 4 ? "" : d), label: null, line: true }, y: { type: "log", grid: true, tickSize: 0, tickFormat: (d1) => d1 === 1 ? "0" : d3.format("+")(Math.round(100 * (d1 - 1))), label: "↑ cumulative change in GDP from the start of the last 5 recessions (%)", insetTop: -10, insetBottom: 15 }, color: { range: d3.schemeBlues[6].slice(-4).concat("red") } }); d3.select(a).selectAll("g[aria-label=line]").attr("filter", "url(#outline)"); return a; }33:[] 30:{"id":"e293a1c02b1e123e","slug":"line-halo-in-pure-svg","title":"Line halo in pure svg (#870)","thumbnail":"841c54fc7ce827a5778564c412e99788d6621b327391c6146bc26bea9af51cef","access_level":"unlisted","create_time":"$D2022-05-28T15:38:07.413Z","update_time":"$D2022-07-11T10:03:51.650Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"da2a32154638c457","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":"starter_2024"},"version":95,"publish_version":95,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Line halo in pure svg (#870)","cells":[{"id":0,"value":"# Line halo in pure svg ([#870](https://github.com/observablehq/plot/pull/870))\n\ntodo:\n- [ ] with variable aesthetics, regroup each line in a <g> element\n- [ ] update the PR\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"\n\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"d3\n .select(\n Plot.plot({\n y: {\n grid: true,\n label: \"↑ Unemployment (%)\"\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(bls, {\n x: \"date\",\n y: \"unemployment\",\n stroke: \"division\"\n })\n ]\n })\n )\n .call((svg) =>\n svg.selectAll(\"g[aria-label=line] path\").attr(\"filter\", \"url(#outline)\")\n )\n .node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"/*\n \n## us-gdp.csv\nU.S. Gross Domestic Product, chained dollars, Jan 1947-Jan 2022\nFederal Reserve Economic Data\nhttps://fred.stlouisfed.org/\n\n*/\ngdp = d3.csv(\n \"https://raw.githubusercontent.com/observablehq/plot/11cc7cc383b28234d80bdf6794c3e47f2012c7c1/test/data/us-gdp.csv\",\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"recession = [\"1980-04-01\", \"1990-10-01\", \"2001-04-01\", \"2008-01-01\", \"2020-01-01\"].map(d3.isoParse);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"quarters = 16","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"fredSeries = recession.flatMap((start) => {\n const min = d3.utcMonth.offset(start, -3);\n const max = d3.utcMonth.offset(start, quarters * 3);\n return gdp\n .filter((d) => d.date >= min && d.date < max)\n .map((d) => ({\n ...d,\n start,\n quarters: d3.utcMonth\n .every(3)\n .range(d3.utcMonth.offset(start, -3), d.date).length\n }));\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"import { bls } from \"@observablehq/plot-line\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"