40:null 41:["$","title",null,{"children":"From Sketching to Coding | Lucy Havens | Observable"}] 47: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.48: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.49: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).4a: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 }) ) ] }) }4b:[] 45:{"id":"6553826f93511f1d","slug":null,"title":"From Sketching to Coding","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-07-10T18:24:50.457Z","update_time":"$D2023-07-11T14:22:06.984Z","view_time":null,"first_public_time":"$D2023-07-10T18:24:50.457Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"35a39322a43e627b","login":"thegoose20","name":"Lucy Havens","avatar_url":"https://avatars-next.observableusercontent.com/f23639ecfc69b1cf2c4f5535d7fdf31433a1bb63e8a37bf93443c06860f18720","tier":"starter_2024","bio":"","following":false},"version":551,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f80e4ea4d37afc4f","login":"thegoose20","name":"Lucy Havens","avatar_url":"https://avatars-next.observableusercontent.com/f23639ecfc69b1cf2c4f5535d7fdf31433a1bb63e8a37bf93443c06860f18720","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"f80e4ea4d37afc4f","login":"thegoose20","name":"Lucy Havens","avatar_url":"https://avatars-next.observableusercontent.com/f23639ecfc69b1cf2c4f5535d7fdf31433a1bb63e8a37bf93443c06860f18720","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"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":"$47","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"$48","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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"data = unfiltered_data.filter(d=>d.week_budget < 1000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"unfiltered_data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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.","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** \n* There are `None`, `null`, and `NaN` values in the table\n* Some of the `items_to_buy` are lists while others are single values\n* One of the `week_budget` values is incredibly high: `12,009,764,433,678`!!! (Though the data filter takes care of that if we use the `data` variable instead of the `unfiltered data` variable.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":187,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"## A simple Plot chart\n\nCharts in Plot are created by calling the `Plot.plot()` function, providing it with a list of **\"marks\"** (i.e., dots, bars, lines, etc.), and defining how the visual variables of those marks will be mapped to different data.\n\nTo create a mark in a simple chart in Plot, we will have to specify a few things:\n\n* The **mark type**: what sort of shapes will we be using to plot our data?\n* The **data**: what data are we going to plot?\n* A list of **encodings**: what data attributes do we want to plot, and what visual channels do we want to map them to?\n\nOnce we have decided these things, the Plot library will do much of the rest of the work for us. Consider the following chart:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"Plot.plot({\n marks: [\n Plot.dot(data, { x: 'week_budget' })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"In this chart, we've specified that we are going to use the **```dot``` mark** (i.e., each row in our dataset will be represented by a single dot). \n\nOur single _encoding_ specifies that the **x position** of each dot will be mapped to its corresponding **```week_budget```** value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"## Combining encodings\n\nThe univariate visualization above is called a \"dot plot.\" These can be valuable for getting a sense of the distribution of a single variable, but hopefully Plot can do more than that...\n\nWell, of course it can! It turns out that we can give the `dot` method whatever encodings we like, and the library will mostly figure out what to do with what we give it.\n\nWe can add an encoding for the **y position**, the **radius of the dots**, the **fill color**, and more, all by specifying additional mappings within the specification we give to `Plot.dot`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"--- \n### YOU TRY #2:\nIn the Plot below, add encodings (separated by commas) to create the following mappings on top of our original dot plot. \n\nTry outputting your results (_Shift + Enter_, or click the blue rectangle in the cell) after adding each encoding to watch how the visualization changes at each step.\n\n* `y: 'num_cups'` \n (show the # of cups of coffee a person drinks per day using y position)\n* `r: 'days_on_campus'` \n (show the # of days a person spends in the office per week using dot radius)\n* `fill: 'milk_choice'` \n (show a person's milk preference using dot fill color)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"Plot.plot({\n marks: [\n Plot.dot(data, { x: 'week_budget', r: 'days_on_campus', fill: 'milk_choice' })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"Each different mark-type has a variety of visual variables we can decide to employ for our encodings. Plot also allows us to control our visualization in other ways besides just these encodings. For example, we might want to add a legend so that we know what those different colors tell us!\n\nOne of the strengths of Plot over some other coding-based tools is its generally strong defaults, but if we want to control other specific details of our visualization, such as its dimensions, the [color scheme](https://observablehq.com/@d3/color-schemes), etc., these can generally be specified outside of the `marks` parameter:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"Plot.plot({\n width: 400,\n height: 200,\n color: { legend: true, scheme:'Dark2' },\n marks: [\n Plot.dot(data, { x: 'week_budget', y: 'num_cups', r: 'days_on_campus', fill: 'milk_choice' })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"## Other marks\n\nOf course, there are many other types of visualizations we might choose besides dot plots. Many of the common ones act more or less as we'd expect them to within Plot, with us merely needing to specify the encodings. Say we want to build a line chart: we can then use the mark type `Plot.line`, as shown below on some \"stock\" stock data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":233,"value":"stockData_raw = (await require('vega-datasets'))['stocks.csv']()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"stockData = stockData_raw.map(d => {\n d.date = new Date(d.date);\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"Plot.plot({\n color: { legend: true }, \n marks: [\n Plot.line(stockData, { x: 'date', y: 'price', stroke: 'symbol'})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"Once we start learning about different mark types, we can even overlay them _on top of_ each other. By separating out mark types within the `marks:` specification by commas, we could, say, put labels on the points of our line graph using the `text` mark:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":476,"value":"Plot.plot({\n color: { legend: true },\n marks: [\n Plot.line(stockData, { x: 'date', y: 'price', stroke: 'symbol', tip: true}),\n // Plot.text(stockData.filter(d => d.date.getMonth() == 1), { x: 'date', y: 'price', text: 'price' }),\n // Plot.text(stockData.filter((d,i) => i % 10 == 0), { x: 'date', y: 'price', text: 'price' }),\n ],\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"addTooltips(\n Plot.line(stockData, {\n color: { legend: true },\n x: 'date',\n y: 'price',\n stroke: 'symbol',\n title: (d) =>\n `${d.symbol} \\n Date: ${d.date.getDay()}/${d.date.getMonth()}/${d.date.getFullYear()} \\n Price: ${d.price}`\n }).plot()\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\" // https://observablehq.com/@mkfreeman/plot-tooltip","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"Note that we are mapping both `y` and `text` to our price attribute for our text mark. This is what is called a \"redundant encoding.\" In this case, the text mark is adding some potentially useful information, but at a cost.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":300,"value":"---\n### YOU TRY #3:\nIn the box below, come up with at least one critique of the visualization above, as well as at least one way to address your critique. Once you have come up with an answer, click on the button below to see if your solution matches any of ours!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":302,"value":"* The text could be applied only once per year, at the start of the year, so it's readable\n* The text could appear upon hovering over one of the lines","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":307,"value":"// This technique inspired by Bostock's: https://observablehq.com/@mbostock/wait-until-button\nviewof checkAnswerForm = {\n const form = html`