2c:null 2d:["$","title",null,{"children":"Designing for Your Data | Amber Hoak | Observable"}] 32:T515,html`Here are a couple of articles that contain data visuals that may help you:

"The Easy Part of The Economic Recovery Might Be Over" by Amelia Thomson-DeVeaux, Niel Paine, and Julia Wolfe (FiveThirtyEight)
"Demographics, earnings, and family characteristics of workers in sectors initially affected by COVID-19 shutdowns" , Monthly Labor Review (BLS)
"Unemployment rose higher in three months of COVID-19 than it did in two years of the Great Recession" by Rakesh Kochhar (Pew Research Center)
"Where U.S. coronavirus cases are rising and falling" by Chris Canipe and Lisa Shumaker (Reuters Graphics)

`33:T66d,viewof strokes = { const context = DOM.context2d(width, height); const strokes = context.canvas.value = []; const curve = d3.curveBasis(context); const redo = []; context.lineJoin = "round"; context.lineCap = "round"; // Render and report the new value. function render() { context.clearRect(0, 0, width, height); for (const stroke of strokes) { context.beginPath(); curve.lineStart(); for (const point of stroke) { curve.point(...point); } if (stroke.length === 1) curve.point(...stroke[0]); curve.lineEnd(); context.lineWidth = stroke.lineWidth; context.strokeStyle = stroke.strokeStyle; context.stroke(); } context.canvas.value = strokes; context.canvas.dispatchEvent(new CustomEvent("input")); } d3.select(context.canvas).call(d3.drag() .container(context.canvas) .subject(dragsubject) .on("start drag", dragged) .on("start.render drag.render", render)); context.canvas.undo = () => { if (strokes.length === 0) return; redo.push(strokes.pop()); render(); }; context.canvas.redo = stroke => { if (redo.length === 0) return; strokes.push(redo.pop()); render(); }; // Create a new empty stroke at the start of a drag gesture. function dragsubject() { const stroke = []; stroke.lineWidth = viewof lineWidth.value; stroke.strokeStyle = viewof strokeStyle.value; strokes.push(stroke); redo.length = 0; return stroke; } // Add to the stroke when dragging. function dragged({subject, x, y}) { subject.push([x, y]); } return context.canvas; }34:[] 30:{"id":"8d4cdd1032794043","slug":"designing-for-your-data","title":"Designing for Your Data","thumbnail":"0db8403ff01f2318e600baa359796350ff78f3b635c176432411e7ced1754640","access_level":"public","create_time":"$D2020-09-22T13:48:21.430Z","update_time":"$D2020-09-27T03:40:12.224Z","view_time":null,"first_public_time":"$D2020-09-22T21:03:31.189Z","has_unpublished_edits":null,"fork":{"id":"c36363a3d71a4530","slug":"draw-me","title":"Draw Me","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"11b00269dbb427c5","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":"starter_2024"},"version":276,"publish_version":276,"role":null,"authored":false,"authors":[{"type":"individual","id":"0e1449d1cfd33d3e","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":null}],"members":[{"type":"individual","id":"0e1449d1cfd33d3e","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Designing for Your Data","cells":[{"id":145,"value":"md`# Designing for Your Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"md`## Choosing a chart type`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"md`Pick a starting point for your visual based on your dataset. Choose a dataset from: \n- Unemployment Rate\n- Employment-Population Rate\n- Not in the Labor Force\n- Looking for Part-Time Employment\n- Looking for Full-Time Employment `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"md`What would you like to show with your visual? Do you want to show comparisons over time? Then a line chart works great! Do you want to show the overall composition of the data? Try a tree map.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"md`Workshop series: http://aka.ms/ghc20workshop`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"html`This is not an all-encompassing list of chart types but a starting point. For a comprehensive list of charts, check out this awesome project . `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md`### Comparisons`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"html` $\"Comparison$ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"md`### Composition`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"html` $\"composition$ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"md`### Distribution`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"html` $\"distribution$ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"md`### Relationship/Flow`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"html` $\"flow-relationship$ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"md`# Inspiration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"md`It helps to understand what visuals have currently been implemented for similar data. This will allow you to get inspiration your chart and disregard data representations that you find distracting or unclear.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`# Draw Me\n\nDraw a rough sketch below on what your chart design might look like! Feel free to use plain old paper-pencil if that is easier for you. \n\nThink about what type of interactions would help the target audience understand the data better. How can we augment the dataset that you choose with one of the other datasets to provide a richer understanding? Maybe this means that on a click event, we filter our other datasets on that datapoint or maybe we combine multiple chart types. \n\nCommand-Z to undo and Shift-Command-Z to redo.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"viewof lineWidth = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber}px width`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"viewof strokeStyle = {\n const form = html``;\n form.i.oninput = () => form.value = form.i.value;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"undo = {\n const keydowned = event => {\n if (event.keyCode === 90 && event.metaKey && !event.altKey) {\n if (event.shiftKey) viewof strokes.redo();\n else viewof strokes.undo();\n event.preventDefault();\n }\n };\n const form = html``;\n form.redo.onclick = () => viewof strokes.redo();\n form.undo.onclick = () => viewof strokes.undo();\n addEventListener(\"keydown\", keydowned);\n invalidation.then(() => removeEventListener(\"keydown\", keydowned));\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"strokes // It’s a view!","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"html` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"