2c:null 2d:["$","title",null,{"children":"ResBaz AZ 2022 Web Visualization Workshop | ResBaz AZ 2022 | Observable"}] 32:T1dd0,slides = { var dom = html`

`; var shadow = dom.shadowRoot || dom.attachShadow({ mode: "open" }); var reveal = html`

${md` ## Some Visualization Terminology ### + Web Visualization Basics `}

Data Tables

${images.table()}

Types of Attributes

Quantitative data has order and allows mathematical operations

${images.intervals({ class: "simple", height: "25px" })}

Ordinal data has order but not mathematical relationships

${images.tShirts({ class: "simple", height: "50px" })}

Categorical (aka "nominal") data has neither order nor mathematical relationships

${images.glyphs({ class: "simple", height: "50px" })}

Data Tables

${images.table()}

Quantitative, Ordinal, or Categorical?

${images.table1()}

Quantitative, Ordinal, or Categorical?

${images.table2()}

Marks

Graphical primitives (shapes, points, surfaces…) that correspond to items

Channels

Properties of mark appearance (position, color, shape…) that correspond to attribute values

Encodings

Marks + Channels

${images.encodings({ class: "simple" })}

Marks

Channels

${ufoVertical()}

Marks

rectangles

Channels

count -> height

month -> x position

${ufoVertical()}

Marks

Channels

${ufoHorizontal()}

Marks

rectangles

Channels

count -> width

month -> y position

${ufoHorizontal()}

Marks

Channels

${ufoLine()}

Marks

line (just one!)

Channels

count -> y shape

month -> x shape

(anchor point position)

${ufoLine()}

Marks

Channels

${starbucksScatterplot()}

Marks

circles

Channels

sugar (g) -> y position

calories -> x position

caffeine (mg) ->

saturation + brightness

${starbucksScatterplot()}

Marks

circles

Channels

sugar (g) -> y position

calories -> x position

caffeine (mg) ->

saturation + brightness

Bar vs Line vs Scatterplot?

${starbucksScatterplot()}

Marks

Channels

${starbucksHistogram()}

Marks

rectangles

Channels

calories (binned) -> x position

(count) -> height

${starbucksHistogram()}

${md` ## Web Visualization Options ### (way too many to cover!) `}

A (completely) unbiased perspective

on the Usability vs Expressiveness of different web vis tools

${images.usabilityVsExpressiveness({ class: "simple", width: "100%" })}

Nothing is a hack

(or everything is?)

RAWGraphs -> Inkscape / Illustrator / Powerpoint still makes the most sense in a lot of cases

`; shadow.appendChild(reveal); var deck = new Reveal(reveal, { embedded: true }); deck.initialize(); return dom; }33:T668,A few things going on in this code: **Converting data structures** `Object.entries` is a Javascript function that converts an unordered javascript object like: `{ key1: value1, key2, value2 }` into a list of lists like: `[ [key1, value1], [key2, value2] ]` **Optional chaining** The `?.` syntax is a way to *optionally*: - get properties: `value?.match` - call functions: `match?.(` - or get array entries: `)?.[1]` if something is actually missing (for example, if `value` is `null` or a number and doesn't have the `match` function), then the whole expression evaluates to `undefined`. **Regular expressions** The `/^(\d+)%$/` mess of characters is a regular expression to pull out true percentages; we want to match strings that look like `"20%"`, not `"2% Milk"`: - `^` means that the expression should only match from the beginning of the string, not anywhere - `()` is a capturing group that lets us extract its contents in `percentageMatchObject` - `\d` matches digit characters - `+` matches one or more of the thing that came before it (in this case, digits) - `%` is the percent sign we expect to see in the string; we shouldn't match if it isn't there - `$` means that the expression should only match the end of the string, so we don't accidentally pick up things like `"2% Milk"` A really handy tool for learning + building + testing regular expressions is [https://regexr.com/](https://regexr.com/) **Removing whitespace** Some of the keys come in from CSV parsing with extra whitespace, e.g. `" Sugars (g)"` `.trim()` is a Javascript string function that will remove whitespace from the beginning or end.34:T446,paperclip = html``35:[{"id":"4554180e39af8fdaf97855c14cabc8690db586439f862876280ec48091d0bf7f0ed7efcf2e70d41be81e89ed356c098a14d32b603a94742b13ceed31ccb716a0","href":"https://static.observableusercontent.com/files/4554180e39af8fdaf97855c14cabc8690db586439f862876280ec48091d0bf7f0ed7efcf2e70d41be81e89ed356c098a14d32b603a94742b13ceed31ccb716a0","name":"chart@3.svg","type":"image/svg+xml","lastModified":1653488478418.138,"size":5943},{"id":"8ade58c1980bb7711729b2ba1b1cd95c616748c383a66029bb7a16855bf9bf6d07db42bd729d1a69f639e247aba96fb12b0f003f4bf74dfe79ca38d1ad25b856","href":"https://static.observableusercontent.com/files/8ade58c1980bb7711729b2ba1b1cd95c616748c383a66029bb7a16855bf9bf6d07db42bd729d1a69f639e247aba96fb12b0f003f4bf74dfe79ca38d1ad25b856","name":"intervals.png","type":"image/png","lastModified":1653178476471.792,"size":2404},{"id":"175ab8e2af06bd0681ad52be1046250d692c4bdc4509cd6a45107d5af9ecde2bdec5ddd75173cbb5d7e403f6714d033e6b268d98e63ee080b22a7b69d911fbc1","href":"https://static.observableusercontent.com/files/175ab8e2af06bd0681ad52be1046250d692c4bdc4509cd6a45107d5af9ecde2bdec5ddd75173cbb5d7e403f6714d033e6b268d98e63ee080b22a7b69d911fbc1","name":"glyphs.png","type":"image/png","lastModified":1653178476472.802,"size":8861},{"id":"55e33ff92dc135f284dbd6fe5ad172bd3bfffde24ad0109884e100eb9fa5443d84655bde8b8c1819bf6e7145ddf0abe0cbca22a665ef816ea95c7c8f4f200a4c","href":"https://static.observableusercontent.com/files/55e33ff92dc135f284dbd6fe5ad172bd3bfffde24ad0109884e100eb9fa5443d84655bde8b8c1819bf6e7145ddf0abe0cbca22a665ef816ea95c7c8f4f200a4c","name":"tShirts.png","type":"image/png","lastModified":1653178476483.928,"size":13412},{"id":"805336712ec90b00568259e4de01f491753ed42662c0a303f934abcbba393b79c10753c3ca8a2e28201f281837c8acacffaa6bbe2ab163dcf791fce4d8894b4c","href":"https://static.observableusercontent.com/files/805336712ec90b00568259e4de01f491753ed42662c0a303f934abcbba393b79c10753c3ca8a2e28201f281837c8acacffaa6bbe2ab163dcf791fce4d8894b4c","name":"encodings@2.png","type":"image/png","lastModified":1653181893878.632,"size":379106},{"id":"887ae44d83d5c39c05a3b9b9b8652e2f9bf573230a7582b9a48729ef44fe45b0395657ce6ebd1df9a4368c98a6fc69bc56155b70806fce3affa5cb10911986d7","href":"https://static.observableusercontent.com/files/887ae44d83d5c39c05a3b9b9b8652e2f9bf573230a7582b9a48729ef44fe45b0395657ce6ebd1df9a4368c98a6fc69bc56155b70806fce3affa5cb10911986d7","name":"sbucksBar.png","type":"image/png","lastModified":1653182687407.938,"size":131985},{"id":"1cb91d1907bd69603dbc4f1077c4736523e0037bd3e9fba798cb637257ca01cb70d340192b316d1852be72abf3841f3d1f9069918b7c6ed25608471fb874721f","href":"https://static.observableusercontent.com/files/1cb91d1907bd69603dbc4f1077c4736523e0037bd3e9fba798cb637257ca01cb70d340192b316d1852be72abf3841f3d1f9069918b7c6ed25608471fb874721f","name":"table.png","type":"image/png","lastModified":1653177695111.976,"size":1309708},{"id":"fb6f90437458c8c0d2fa2594d29b733eef21eb1fd18f32d6f6633ee9bf16e0af42ed7c50033bab49d390e341660bfb8585e35fb315c45b35ae614a80ca4ae227","href":"https://static.observableusercontent.com/files/fb6f90437458c8c0d2fa2594d29b733eef21eb1fd18f32d6f6633ee9bf16e0af42ed7c50033bab49d390e341660bfb8585e35fb315c45b35ae614a80ca4ae227","name":"table1.png","type":"image/png","lastModified":1653177899967.34,"size":1309357},{"id":"f4e6621db43b0ed9d49a42b9a6e598f907d9228222b5ab4bf8efd6a217a33d70442c37015ca7ef927aa908a4bc2e194029ef38a84a0b4aae3af4b5a1c23e5fa5","href":"https://static.observableusercontent.com/files/f4e6621db43b0ed9d49a42b9a6e598f907d9228222b5ab4bf8efd6a217a33d70442c37015ca7ef927aa908a4bc2e194029ef38a84a0b4aae3af4b5a1c23e5fa5","name":"table2.png","type":"image/png","lastModified":1653177928537.829,"size":1634072},{"id":"6aa0088a26971eeb5a98422e46a77300cd0568b09925650cf2183263c88e1b309c9544bfc0992cdb701aaaa04f51dc23511fd5b21d71fb4c46b2913d8b45a22a","href":"https://static.observableusercontent.com/files/6aa0088a26971eeb5a98422e46a77300cd0568b09925650cf2183263c88e1b309c9544bfc0992cdb701aaaa04f51dc23511fd5b21d71fb4c46b2913d8b45a22a","name":"starbucks_drinkMenu_expanded.csv","type":"text/csv","lastModified":1653235730114.704,"size":26898},{"id":"c225b9934e44db79e3f9b95f369b16775838a028ae362108698b1fe8ff8309664d89899c9304a5415846d8e8e3bc7b086b1e7f0724519ee783f655ce4b27e0ba","href":"https://static.observableusercontent.com/files/c225b9934e44db79e3f9b95f369b16775838a028ae362108698b1fe8ff8309664d89899c9304a5415846d8e8e3bc7b086b1e7f0724519ee783f655ce4b27e0ba","name":"ufoSightings.json","type":"application/json","lastModified":1653235708733.57,"size":120220}] 30:{"id":"34ef91768dbecb12","slug":"resbaz-az-2022","title":"ResBaz AZ 2022 Web Visualization Workshop","thumbnail":"c47797e1cee7c8356943386ea84962647f3c3ded2052728d7a3e72d39dfb1681","access_level":"public","create_time":"$D2022-05-21T21:30:22.648Z","update_time":"$D2022-05-25T18:59:05.823Z","view_time":null,"first_public_time":"$D2022-05-25T14:33:51.454Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"5ab49d1beef079b0","login":"resbazaz-2022","name":"ResBaz AZ 2022","avatar_url":"https://avatars-next.observableusercontent.com/7259a3e6038d807450b5a2413c3ca76965a484c8d1b1cbc77960cf87623f2290","tier":"starter_2024","bio":""},"version":524,"publish_version":524,"role":null,"authored":false,"authors":[{"type":"individual","id":"1853a7a3247c7072","login":"alex-r-bigelow","name":"Alex Bigelow","avatar_url":"https://avatars-next.observableusercontent.com/b2c6a4853ee3fa353081e9dffbe7706390f8bb8d5d673a38c001b8f8f885bde4","tier":null,"bio":""}],"members":[{"type":"individual","id":"1853a7a3247c7072","login":"alex-r-bigelow","name":"Alex Bigelow","avatar_url":"https://avatars-next.observableusercontent.com/b2c6a4853ee3fa353081e9dffbe7706390f8bb8d5d673a38c001b8f8f885bde4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"ResBaz AZ 2022 Web Visualization Workshop","cells":[{"id":0,"value":"# ResBaz AZ 2022 Web Visualization Workshop","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":167,"value":"We're going to use this Observable notebook as an environment to learn about visualization on the web. A quick preview of what we're going (attempt) to cover:\n\n1. Introduction to [Observable Notebooks](#cell-286)\n2. [Some visualization terminology + web visualization basics](#slides)\n3. [Dipping our toes into d3.js](#cell-352)\n4. Time check / survey\n\n### Choose our own adventure!\nA. [d3.js Interactivity, Transitions](https://observablehq.com/d/34ef91768dbecb12#cell-356)\n\nB. [Making basic charts with Plot](#cell-244)\n\nC. [Importing / cleaning data with Javascript](#cell-178)\n\n### Footnotes\n- [Acknowledgements](#cell-11)\n- [Appendix](#cell-18)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"## Observable Notebooks\n - [An overview](https://observablehq.com/@observablehq/a-taste-of-observable?collection=@observablehq/getting-started)\n - [How cells work](https://observablehq.com/@observablehq/how-observable-runs): this is a little different from things like Jupyter!\n - Hot tip: When googling bugs, etc., use \"observablehq\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"fullscreen = {\n const button = html``;\n button.onclick = () => slides.parentElement.requestFullscreen(); // so we apply fullscreen on parent..\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"Links to tools at the end there that might be less familiar:\n\n- [The Vega stack: vega, vega-lite, Voyager 2, Lyra, etc](https://vega.github.io/)\n- [RAWGraphs](https://rawgraphs.io/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":352,"value":"---\n\n## Dipping our toes into `d3.js`\n- [Gallery](https://observablehq.com/@d3/gallery?collection=@observablehq/visualization) of some of the wild things you can do with d3\n- D3's biggest conceptual hurdle: [joins](https://observablehq.com/@d3/learn-d3-joins?collection=@d3/learn-d3)\n- [An excellent intro to D3 if you want to know more](https://d3-graph-gallery.com/intro_d3js.html)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"---\n## Making basic charts with Plot\nPlot.js is a great library for making simple plots with less code—if you just need a bar chart and don't need to customize interactivity, etc.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":402,"value":"ufoVertical()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"ufoVertical = () =>\n Plot.plot({\n marks: [\n Plot.barY(ufosBinnedByMonth, {\n x: \"month\",\n y: \"count\",\n fill: \"steelblue\"\n }),\n Plot.ruleY([0])\n ],\n // Weird bug in plot.js: without specifying a domain, it auto-alphabetizes everything\n // (contradicting its docs!), and specifying a domain seems to reverse things...\n x: { domain: monthNames, reverse: true },\n style: {\n \"font-family\": \"Josefin Sans\",\n \"font-size\": 14,\n \"font-weight\": 600\n },\n marginTop: 50,\n marginBottom: 50\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"ufoHorizontal()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"ufoHorizontal = () =>\n Plot.plot({\n marks: [\n Plot.barX(ufosBinnedByMonth, {\n y: \"month\",\n x: \"count\",\n fill: \"steelblue\"\n }),\n Plot.ruleX([0])\n ],\n marginLeft: 100,\n // Weird bug in plot.js: without specifying a domain, it auto-alphabetizes everything\n // (contradicting its docs!), and specifying a domain seems to reverse things...\n y: { domain: monthNames, reverse: true },\n style: {\n \"font-family\": \"Josefin Sans\",\n \"font-size\": 14,\n \"font-weight\": 600\n },\n marginBottom: 50\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"ufoLine()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"ufoLine = () =>\n Plot.plot({\n marks: [\n Plot.lineY(ufosBinnedByMonth, {\n x: \"shortMonth\",\n y: \"count\",\n stroke: \"steelblue\",\n strokeWidth: 3\n }),\n Plot.ruleY([0])\n ],\n // Weird bug in plot.js: without specifying a domain, it auto-alphabetizes everything\n // (contradicting its docs!), and specifying a domain seems to reverse things...\n x: { domain: shortMonthNames, reverse: true },\n style: {\n \"font-family\": \"Josefin Sans\",\n \"font-size\": 14,\n \"font-weight\": 600\n },\n marginTop: 50,\n marginBottom: 50\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"starbucksScatterplot()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"starbucksScatterplot = () => {\n return Plot.plot({\n marks: [\n Plot.dot(starbucksData, {\n x: \"Calories\",\n y: \"Sugars (g)\",\n fill: \"Caffeine (mg)\"\n })\n ],\n color: {\n legend: true,\n scheme: \"blues\"\n },\n grid: true,\n style: {\n \"font-family\": \"Josefin Sans\",\n \"font-size\": 14,\n \"font-weight\": 600\n },\n marginTop: 50,\n marginBottom: 50\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"starbucksHistogram()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"starbucksHistogram = () =>\n Plot.plot({\n marks: [\n Plot.rectY(\n starbucksData,\n Plot.binX({ y: \"count\" }, { x: \"Calories\", fill: \"steelblue\" })\n ),\n Plot.ruleY([0])\n ],\n style: {\n \"font-family\": \"Josefin Sans\",\n \"font-size\": 14,\n \"font-weight\": 600\n },\n marginTop: 50,\n marginBottom: 50\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"---\n\n## `d3.js` Interactivity, Transitions\n- [Animating a bar chart in response to button clicks](https://observablehq.com/@uvizlab/d3-tutorial-4-bar-chart-with-transition)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"---\n\n## Importing / cleaning data with Javascript\nThis section has a little more background into the data that we import. We can load data from file attachments (see the ${paperclip} Data icon on the right side of the screen) into the notebook:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":202,"value":"### Starbucks CSV data\n\nLoading CSV data can sometimes be tricky. Observable has *some* type inference capabilities:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"rawStarbucksData = FileAttachment(\"starbucks_drinkMenu_expanded.csv\").csv({\n typed: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"...but if you expand that `rawStarbucksData = ▶ Array(242)` object, you should be able to see that it's unable to auto-detect that the percentages are numbers, not strings. We can do that conversion manually by writing our own Javascript:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":164,"value":"starbucksData = rawStarbucksData.map((rawDrink) => {\n const drink = {};\n\n for (const [key, value] of Object.entries(rawDrink)) {\n const percent = value?.match?.(/^(\\d+)%$/)?.[1];\n drink[key.trim()] = percent === undefined ? value : parseFloat(percent);\n }\n\n return drink;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":379,"value":"### UFO JSON data\nJSON is often a bit more straightforward:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":151,"value":"ufoData = await FileAttachment(\"ufoSightings.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"We can also do some aggregation by month (this is just an example for how to do this with Javascript; both D3 and Plot also have support for binning by date internally!)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":394,"value":"monthNames = [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"shortMonthNames = monthNames.map((month) => month.slice(0, 3))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"ufosBinnedByMonth = {\n const counts = {};\n\n ufoData.forEach((sighting) => {\n const monthIndex = new Date(sighting.Date).getMonth();\n if (counts[monthIndex] === undefined) {\n counts[monthIndex] = 0;\n }\n counts[monthIndex] += 1;\n });\n\n return Object.entries(counts).map(([monthIndex, count]) => ({\n monthIndex,\n month: monthNames[monthIndex],\n shortMonth: shortMonthNames[monthIndex],\n count\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"---\n\n## Acknowledgements\n- Vis basics and terminology adapted from [vega-lite workshops by Dr. Katherine E. Isaacs](http://hdc.cs.arizona.edu/people/kisaacs/projects/gvss/hackathons/index.html)\n- Some ideas, concepts, and several figures adapted from Munzner, Tamara. *Visualization analysis and design*. CRC press, 2014.\n- The [Observable workshop by Devin Bayly](https://observablehq.com/@devinbayly/observable-resbaz-workshop) at last year's ResBaz festival\n- [Embedding Reveal.js slides in Observable](https://observablehq.com/@a10k/hello-reveal-js)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"---\n\n## Appendix\nImports, dependencies, etc. Messing with stuff down here (while encouraged!) is likely to break things","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"Reveal = require(\"reveal.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"images = {\n const images = {\n table: FileAttachment(\"table.png\"),\n table1: FileAttachment(\"table1.png\"),\n table2: FileAttachment(\"table2.png\"),\n intervals: FileAttachment(\"intervals.png\"),\n tShirts: FileAttachment(\"tShirts.png\"),\n glyphs: FileAttachment(\"glyphs.png\"),\n encodings: FileAttachment(\"encodings@2.png\"),\n sbucksBar: FileAttachment(\"sbucksBar.png\"),\n usabilityVsExpressiveness: FileAttachment(\"chart@3.svg\")\n };\n await Promise.all(\n Object.entries(images).map(async ([imgName, attachment]) => {\n const templateImgElement = await attachment.image();\n images[imgName] = (extraAttrs = {}) => {\n const imgCopy = d3.select(templateImgElement.cloneNode());\n Object.entries(extraAttrs).forEach(([key, value]) => {\n imgCopy.attr(key, value);\n });\n return imgCopy.node();\n };\n })\n );\n return images;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"