45:["$","title",null,{"children":"From Sketching to Coding | Eric Alexander | Observable"}] 4d:T423,Observable is a dynamic notebook tool built on Javascript. It is much more than just a tool for data visualization, as it supports many different types of analysis and hosts a vibrant community of analysts, developers, and designers. However, for our purposes in this workshop, we will be primarily showing how it can be used to combine the processes of data wrangling, visualization, and analysis. We will be specifically focusing on Observable's [Plot library](https://observablehq.com/@observablehq/plot) (which takes heavy inspiration from [Vega-Lite](https://vega.github.io/vega-lite/) and [Vega](https://vega.github.io/vega/)). Plot is a visualization paradigm that seeks to give users control over the _encodings_ of their visualizations: how individual data fields are mapped to the visual attributes of the marks on the page. In this exercise, you'll get a taste of Plot's features. At the end, we will share some links showing the wider breadth of the tool, as well as some others (like [D3.js](https://d3js.org/)) that pair well with Observable.4e:T62b,## How to use this notebook For this exercise, we encourage working with a partner side-by-side on the same computer. This is a technique called "pair programming," and it is employed both in classrooms and in industry as a means of being able to collaborate on your code and debug what you and your partner are doing along the way. You may wish to switch who is at the keyboard every 10 minutes or so. Everything in this notebook (from data input to visualizations to prose) is contained within an Observable "cell." Each of these cells is _editable_ (by interacting with the menu to the left of each cell). **To save the changes you make in a cell (or execute the code you write), you can click the blue arrow in the upper-right of the cell (or hit _Shift+Enter_).** Throughout the exercise, we will encourage you to both edit cells we have created as well as to create some of your own. Making changes will create a new copy of the notebook (called a "fork") rather than altering the original. In particular, there will be a number of cells labeled YOU TRY that contain small exercises and tasks that we hope you use as an opportunity to get your hands dirty with the tool and process. Initially, your copy of the notebook will be temporary. Should you wish to return to your copy later, you can click the "Fork" button that appears in the upper banner of the page after making changes. Note that doing so will require you to sign up for a (free) Observable account. However, you should not need an account to follow along.4f:T79a,## Putting it all together Up until now, we've mostly just shown you how Plot works--how it uses the concept of encodings to let us create novel visualizations. However, we haven't yet put any thought into our _design_. _Why_ should budget be mapped to x-position, and milk choice to color? Better yet, are their _better_ sets of encodings that we could identify that would make intelligent use of our perception to answer specific questions? Though the idea of encodings is simple, the sheer number of combinations and possibilities ends up being enormous, making it important for us to make careful and informed choices about what variables we are encoding with what. Plot currently supports about a dozen mark types: [Area](/@observablehq/plot-area?collection=@observablehq/plot), [Bar](/@observablehq/plot-bar?collection=@observablehq/plot), [Cell](/@observablehq/plot-cell?collection=@observablehq/plot), [Dot](/@observablehq/plot-dot?collection=@observablehq/plot), [Frame](/@observablehq/plot-frame?collection=@observablehq/plot), [Line](/@observablehq/plot-line?collection=@observablehq/plot), [Link](/@observablehq/plot-link?collection=@observablehq/plot), [Rect](/@observablehq/plot-rect?collection=@observablehq/plot), [Rule](/@observablehq/plot-rule?collection=@observablehq/plot), [Text](/@observablehq/plot-text?collection=@observablehq/plot), and [Tick](/@observablehq/plot-tick?collection=@observablehq/plot). Mark types do not just determine shape — they also determine which channels and options are supported, and what scales are associated with each channel, if any. Some of the most common channels include `x`, `y`, `fill`, `stroke`, `opacity`, `title` (for the mouseover text of a mark), and many more. Generally, it is good to refer to the documentation for the specific mark you are trying to create. Channels and marks are also described in greater detail [here](https://observablehq.com/@observablehq/plot-marks).50:T71d,{ // Filter the data we will be showing based off of what is checked in the boxes above let dataToShow = data.filter(function(d) { for (let i = 0; i < checkboxes.length; i++) { try { if (d.items_to_buy.search(checkboxes[i]) !== -1) { return true; } } catch { return false; } } return false; }) // Return a Plot of the filtered data return Plot.plot({ height: 300, marginLeft: 120, // "facet" allows us to effectively stack visualizations, // in this case creating a different dot plot for each value of "milk_choice" facet: { data: dataToShow, y: 'milk_choice', label: 'Milk preference', grid: true}, marks: [ Plot.dot(dataToShow, // The "dodgeY" transform keeps us from drawing dots overtop of one another // https://observablehq.com/plot/transforms/dodge Plot.dodgeY('middle', { // Rather than taking just a data attribute, encodings can take functions // that calculate a value for a given data object. Here, we add a slight // random jittering to the x value of each dot to create a "beeswarm" plot x: d => d['num_cups'] + (Math.random()*.2-.1), // Here, we add a black outline to dots that specify a favorite cafe // and allow the user to inspect each dot's value by mousing over it. stroke: d => d['favorite_cafe'] !== null ? 'black' : 'none', title: 'favorite_cafe', // Other encodings or scalar values. Note that some values can be constant! fill: 'milk_choice', r: 4 }) ) ] }) }51:[{"id":"108b1ad2ef671d0ae2e562a9021d1b9e695ae1de53af1093ed429921daa09dbd5f0e7318ce72af04552b5318462b00568d667c4571953994b4e3f9628fac7724","href":"https://static.observableusercontent.com/files/108b1ad2ef671d0ae2e562a9021d1b9e695ae1de53af1093ed429921daa09dbd5f0e7318ce72af04552b5318462b00568d667c4571953994b4e3f9628fac7724","name":"dh_coffee_heatmap.png","type":"image/png","lastModified":1689047279029.754,"size":54378}] 49:{"id":"75ee24fc2388fd96","slug":"from-sketching-to-coding","title":"From Sketching to Coding","thumbnail":"a77ef27bf66d778fbb8a130413ef99b02a52d19801a2b3ec5cfe03efeea088ec","access_level":"unlisted","create_time":"$D2023-06-27T20:38:47.816Z","update_time":"$D2023-07-11T14:16:31.198Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0d71b28330200c43","login":"ealexander","name":"Eric Alexander","avatar_url":"https://avatars-next.observableusercontent.com/bfb4fca6017e70ace6dcc909a3343f136de2169fa60773cd22e9c900153cfe6a","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":603,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"78bdd9d86e520c7f","login":"ealexander","name":"Eric Alexander","avatar_url":"https://avatars-next.observableusercontent.com/bfb4fca6017e70ace6dcc909a3343f136de2169fa60773cd22e9c900153cfe6a","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"8fc58010f6b9d6ae","login":"compomento","name":"Menna","avatar_url":"https://avatars-next.observableusercontent.com/eaeca0197936f6d327acba7a6a72fe34729102e587f2b5a8a4fb8541051374a9","tier":null,"role":"editor"},{"type":"individual","id":"78bdd9d86e520c7f","login":"ealexander","name":"Eric Alexander","avatar_url":"https://avatars-next.observableusercontent.com/bfb4fca6017e70ace6dcc909a3343f136de2169fa60773cd22e9c900153cfe6a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"From Sketching to Coding","cells":[{"id":0,"value":"# From Sketching to Coding\n## Visualization as a Thinking Process","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"## Getting the data\n\nFor this exercise, we will use some data that pertains to us all--namely because it is about us! If you haven't already, please [fill out this Google form](https://forms.gle/CDKv6oDfZ1ynT4Wz5) about your coffee-drinking habits. This will populate a sheet that we can access and begin to play around with.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"// Data from the workshop Google form\ndata_url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vSgUm54n2kd-NglGUJvSWeg5xkaglY_tR8p5mssPDrEHwGEGKoeDaAl_jqKdZBgCPEGK6OPlxk1LrfP/pub?gid=323598732&single=true&output=csv\"\n\n// Data from Menna's sample data\n//data_url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQKuSpa8bNeUI3_8otnCuAwIr9QIMcSG75TajsCUl-ODhmhM5pXrhECK_BoE3S3ST8qFaPRPZhw9Gta/pub?gid=738441424&single=true&output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"unfiltered_data = d3.csv(data_url, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"data = unfiltered_data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"data","database":"$undefined"},{"id":185,"value":"---\n### YOU TRY #1:\n\nSpend a minute or two navigating the table above. What are you able to learn without the use of any additional visualizations? Does anything about the data (its distribution, its format, etc.) seem likely to cause us problems as we try to analyze/visualize it?\n\nRecord your answer/thoughts in the cell below. Once you've recorded your thoughts, click the button to see some things we noted about the data, and what we might want to do about it!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"**YOUR ANSWER(S) HERE**","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":448,"value":"// This technique inspired by Bostock's: https://observablehq.com/@mbostock/wait-until-button\nviewof youTryForm_lookAtData = {\n const form = html`