2b:null 2c:["$","title",null,{"children":"2022 FES Survey Report | A M Chung | Observable"}] 31:T64f,viewof fig_purpose = { const chart = Plot.plot({ marginLeft: 60, marginTop: 30, marginBottom: 60, height: 500, width: 500, style: { fontSize: 14 }, y: { percent: true, label: "↑ responses (%)" }, x: { type: "band", domain: d3.sort(creative_purpose_data, d => -d.purpose).map(d => d.purpose), label: "Reported purpose category", tickSize: 12, fontSize: 12 }, marks: [ Plot.barY(creative_purpose_data, {x: "purpose", y: "value", fill: "creative"}), Plot.ruleY([0]) ], color: { type: "categorical", range: color_greenblue, fontSize: 12 } }); const legend = displayLegend(creative_purpose_data, d => d.creative, color_greenblue); const plot = html`

Main Purpose for Using p5js reported by ~70 responses collected online from Oct 2021 to Mar 2022. Most of the respondents chose more than one answer.

Breakdown of the responses that included the answer "for making" (+ making) and not included the answer "for making" (- making):

${legend}

${chart}

`; return plot; } 32:T5b9,viewof fig_read = { const chart = Plot.plot({ marginLeft: 60, marginBottom: 60, height: 120, width: 660, style: { fontSize: 14 }, x: { percent: true, label: "responses (%) →" }, y: { type: "band", domain: d3.sort(read_purpose_data.filter(d => d.group === "all"), d => d.group).map(d => d.label), tickSize: 12, fontSize: 12, label: null }, marks: [ Plot.barX(read_purpose_data.filter(d => (d.group === "all")&&(d.value > 0)), Plot.stackX({x: "value", y: "label", fill: "response"})), Plot.text(read_purpose_data.filter(d => (d.group === "all")&&(d.value > 0)), Plot.stackX({x: "value", y: "label", text: d => (d.value * 100).toFixed(0)+"%", dy: -1})), Plot.ruleX([0]) ], color: { type: "categorical", range: color_greenblue, fontSize: 12 } }); const legend = displayLegend(read_purpose_data, d => d.response, color_greenblue); const plot = html`

${chart}

${legend}

Responses on how often people read friendly errors on the scale of Frequently , Sometimes, Never and Just learned about it.

`; return plot; }33:T51e,viewof fig_new_info = { const legend = displayLegend(newinfo_freq_data, d => d.label, color_bluegreen); const chart = Plot.plot({ marginLeft: 60, marginBottom: 60, height: 120, width: 660, style: { fontSize: 14 }, x: { percent: true }, y: { type: "band", tickSize: 12, fontSize: 12, label: null }, marks: [ Plot.barX(newinfo_freq_data, Plot.stackX({x: "value", y: "group", fill: "label"})), Plot.text(newinfo_freq_data, Plot.stackX({x: "value", y: "group", text: d => (d.value * 100).toFixed(0)+"%", dy: -1})), Plot.ruleX([0]) ], color: { type: "categorical", range: color_bluegreen, fontSize: 12 } }); const plot = html`

${chart}

${legend}

Responses on how often people learn new information from friendly errors on the scale of Often (~50% of the time), Occasionally (~25% of the time), Rarely (~10% of the time) and Never (~0% of the time).

`; return plot; } 34:Ta60,viewof compass = { const chart = Plot.plot({ marginLeft: 60, marginTop: 50, marginBottom: 60, height: 500, width: 500, style: { fontSize: 14 }, x: { domain: [0,5], ticks: [1,2,3,4], tickFormat: d3.format(".0f"), label: `digital art tool skills →` }, y: { domain: [0,5], ticks: [1,2,3,4], tickFormat: d3.format(".0f"), label: `↑ programming skills` }, r: { range: [0, 36] }, marks: [ Plot.dot(bubble_data, {x: "x", y: "y", r: d => d.value, fill: "group"}), Plot.ruleX(bubble_data, {x: "x", y: 0.05, fill: "black"}), Plot.ruleY(bubble_data, {x: 0.05, y: "y", fill: "black"}), Plot.link([1], { x1: () => 2.5, y1: () => 0, x2: () => 2.5, y2: () => 5, stroke: "#000000", strokeWidth: 2, markerEnd: "arrow" }), Plot.link([1], { x1: () => 0, y1: () => 2.5, x2: () => 5, y2: () => 2.5, stroke: "#000000", strokeWidth: 2, markerEnd: "arrow" }) ], color: { type: "categorical", range: getColor("all") } }); const legend = Plot.legend({ color: { type: "categorical", domain: ["1-Beginner", "2-Intermediate", "3-Proficient", "4-Fully Proficient"], range: [null, null, null, null] }, swatchSize: 14, style: { fontSize: "14px" }, width: 200 }); const plot = html`

Digital Art Tool Skills × Programming Skills matrix based on the self-reported confidence levels. Each bubble's radius on the matrix presents the number of respondents with corresponding self-reported skill levels. These bubbles are then subdivided into four groups: bottom-right quadrant "(1,2)(1,2)", bottom-left quadrant "(1,2)(3,4)", top-right quadrant "(3,4)(1,2)", and top-left quadrant "(3,4)(3,4)".

Self-reported skill levels:

${legend}

${chart}

`; return plot; }35:T6c5,viewof fig_learn_quad_groups = { const chart = Plot.plot({ marginLeft: 220, marginTop: 30, marginBottom: 60, height: 280, width: 500, style: { fontSize: 14 }, x: { percent: true, domain: [0, 40] }, y: { type: "band", domain: d3.sort(newinfo_avg_data.filter(d => d.group == "arttool-coding"), d => d.group).map(d => d.label), tickSize: 12, fontSize: 12 }, marks: [ Plot.barX( newinfo_avg_data.filter(d => d.group == "arttool-coding"), {x: "value", y: "label", fill: "label"} ), Plot.link( newinfo_avg_data, { x1: d => d.value - d.sem, y1: "label", x2: d => d.value - d.sem + d.sem * 2, // d.value + d.sem doesn't work y2: "label", stroke: "#000000", strokeWidth: 2 } ), Plot.ruleX([0]) ], color: { type: "categorical", range: getColor("all"), fontSize: 12 } }); const legend = displayLegend(bubble_data, d => d.group, getColor("all")); const plot = html`

${chart}

${legend}

Average of the responses on how often people learn new information from friendly errors on the scale of Often (~50% of the time), Occasionally (~25% of the time), Rarely (~10% of the time) and Never (~0% of the time) for each Digital Art Tool Skills × Programming Skills matrix groups.

`; return plot; }36:T907,#### ⇢ Confusing Messages * _Failure to trace the exact location of the error_: * "claims that there is an error on a specific line, when the issue may have been something else that may interact with said line." * "it refers to errors, not inside my code, but inside the p5js library" * "logic errors in code may cause errors to pop up many steps removed from the source." * _Wrong suggestion/solution_: * "it often suggests I should pack methods into the setup, even though they definitely shouldn’t be in the setup method" * "it can confuse me by guessing solutions not related to my problem, because what I wrote is similar to something else." #### ⇢ Unmatched Needs * _Not resourceful enough for beginners_: * "a lot of guessing involved in beginner learning" * "when the FES shows several libraries related to the error. Eg the min.js file etc. this becomes intimidating and also makes it tougher to quickly spot the error." * _Tone outside of artist/designer culture_: * "the error’s grammar/tone is occasionally outside of the vernacular of artists/designers" * _Advanced users don't need friendly errors_: * "I know why things aren’t working so they are very useful most of the time" #### ⇢ Incomplete/Missing Information * _Not specific enough, not explicit_: * "FES doesn’t fully explain the problem" * _Silent errors_: * "it's a quiet fail and things are still working, but it still tells me there's a problem." #### ⇢ UI/UX Problems * _Competition with the browser debugger errors_: * "when it obscures the default error message so i'm confused about the type of error I'm getting" * _Too much text_: * "messages getting lost in pile" "as a teacher I find my students skipping all the info because they see a lot of text" * "I have to parse through the information to see what really went wrong." * _Readability_ (fixed): * "Sometimes it's annoying that the line number is written at the very end" #### ⇢ Performance Issues * _Slow performance_: * "When things start to get slow ..." #### ⇢ False Positives * _Unconventional uses_: * "Sometimes, I use the "isKeyPressed()" function for a math thing, there are no errors but the FES keeps on telling me that the function is expecting code, just annoying."37:T9d8,#### ⇢ Rethink Friendly Errors * _Center browser JS error messages_: * "Might it be useful to provide a link to a page of interpretations, rather than re-writing them in "friendly" terms in the browser? Often the attempts to predict "intent" (e.g. for a ReferenceError) add to the confusion by incorrectly interpreting the situation." #### ⇢ Improve the current UI/UX Design * _Good error writing_: * "make it less verbose" "Some TLDR version." * vs. "more information possible" "it could be more descriptive" * _Support better workflow_: * "It could scroll to where the errors are and highlight the line or the code that’s causing the error." * _Intuitive enable/disable UI_: * "Have the option to turn it off in the p5js editor" * "Making it an 'opt-in' system for beginners. At the moment it seems the opposite, global code is required to disable it. Could be helpful to actively know you are asking for FES as a student, requesting it in the setup (with lang pref as param) to help you out if you need it." #### ⇢ Utilize Interaction/Visualization * _Better integration with the web editor_: * "Integrate it more into the interface so that it does not get lost in the console log" * _Typography/visualization_: * "It could have different colors for different data types, variables, classes, etc to make recognizing problems easier." * "maybe provide some sort of visualizations. like showing how far things are being rendered outside the canvas. I could use that when using translate and rotate and I get things wrong. normally turns up because I forget to include push and pop in a loop." #### ⇢ Add New Features * _Map to source code (for advanced users)_: * "I really like how the p5 reference links to the source in GitHub. I would love it if there were a way to get that in errors too (maybe just in specific p5 builds so you don't have to clutter all builds with source map info?)" * _Customization_: * "Figure out some kind of user-controlled allow list for JavaScript functions that the user has renamed so that it doesn't throw up an error when I define my own sine function for example. I do this a lot so I can use JavaScript math functions outside of the draw function without using Math.sin() or whatever other function. I like to hide the setup function from the students I teach with p5.js for simplicity" * _High level suggestions_: * "In addition to syntax error, it might be helpful to hint on potential logical errors usually involved."38:T768,p5(sketch => { let system; const c_h1 = sketch.color('#7c8deb'); const c_title = sketch.color('#232323'); const c_body = sketch.color('#484848'); const c_p5 = sketch.color('#FF005A'); const fontsize = 14; const columnNum = 4; const columnWidth = 160; let maxlength = []; sketch.setup = function() { sketch.createCanvas(640, 740); sketch.textAlign(sketch.LEFT, sketch.CENTER); wordsetsdata.sort((a, b) => (a.count < b.count) ? 1 : -1) for(let i=0; i0)&&(i%columnNum==0)){ y = y + 1.05* fontsize * (maxlength[i-columnNum] + 3); } sketch.listset(wordsetsdata[i], x, y); } }; sketch.listset = function(wordset, x, y) { for(let [key, word] of Object.entries(wordset)){ sketch.translate(x, y); sketch.textSize(fontsize); let id = parseInt(key); if(id == 0){ sketch.textStyle(sketch.BOLD); sketch.fill(c_p5); }else{ sketch.textStyle(sketch.NORMAL); sketch.fill(c_body); } if(word != null){ sketch.text(word, 0, fontsize * (id+1)); } sketch.translate(-x, -y); } } })39:[{"id":"3541e417c51cbdd918344580934469d060a6c6aff909c589e8492296591b4ac44564604ae1f9cda123b792e03265fef824e1b06b08e5471d7ded493102b66f18","href":"https://static.observableusercontent.com/files/3541e417c51cbdd918344580934469d060a6c6aff909c589e8492296591b4ac44564604ae1f9cda123b792e03265fef824e1b06b08e5471d7ded493102b66f18","name":"newinfo_avg.csv","type":"text/csv","lastModified":1652212776660.339,"size":593},{"id":"14a56045b9e5502f2f0998cd5cb8f10707c22b8d4d8aadbd45a3c54b76bfbcae318900c68c54d9bc86630af2b8ee04b2d9854b5e7d6fda5da6855ec1bb36f072","href":"https://static.observableusercontent.com/files/14a56045b9e5502f2f0998cd5cb8f10707c22b8d4d8aadbd45a3c54b76bfbcae318900c68c54d9bc86630af2b8ee04b2d9854b5e7d6fda5da6855ec1bb36f072","name":"voteCount@5.csv","type":"text/csv","lastModified":1651982650818.401,"size":366},{"id":"a0a6a7c94ee03f4da3974b81394b7e6fdd3a458e542c21ef2ebe8206040ae7397dae4004abeb5100d28ae03545b41d637eef8cb5d4478e2875ca411043071abd","href":"https://static.observableusercontent.com/files/a0a6a7c94ee03f4da3974b81394b7e6fdd3a458e542c21ef2ebe8206040ae7397dae4004abeb5100d28ae03545b41d637eef8cb5d4478e2875ca411043071abd","name":"adj_sets@3.csv","type":"text/csv","lastModified":1651872723979.668,"size":1167},{"id":"e0ae0adb852d8b1baa2be2c7d4e17965d65f5001d1cc74b86c4e78c380856ce6ed801b33862ea9dcb830b77c4c9b48ee6e41ae7bf20b48740850d949d0e63b8b","href":"https://static.observableusercontent.com/files/e0ae0adb852d8b1baa2be2c7d4e17965d65f5001d1cc74b86c4e78c380856ce6ed801b33862ea9dcb830b77c4c9b48ee6e41ae7bf20b48740850d949d0e63b8b","name":"read_freq_purpose.csv","type":"text/csv","lastModified":1652150569546.979,"size":1772},{"id":"77952c1407f6dc48076ea295e8ef2100b825f4cb6e89fc7b008ea372e020d0e78f5944ebeb6e3c15027b82206981779c7d6d497bb4be314bfeca159c6f83bade","href":"https://static.observableusercontent.com/files/77952c1407f6dc48076ea295e8ef2100b825f4cb6e89fc7b008ea372e020d0e78f5944ebeb6e3c15027b82206981779c7d6d497bb4be314bfeca159c6f83bade","name":"read_freq_skill@1.csv","type":"text/csv","lastModified":1652204650262.382,"size":3346},{"id":"32eb8bf5d752d6ee15e61ef37d7e0361b67faa2ce23af428f2ac258463639c0ca79acf9fcbc44197d9ba48fe90d33c863a39fe475bb943d36083e730876351d5","href":"https://static.observableusercontent.com/files/32eb8bf5d752d6ee15e61ef37d7e0361b67faa2ce23af428f2ac258463639c0ca79acf9fcbc44197d9ba48fe90d33c863a39fe475bb943d36083e730876351d5","name":"adj_compass_curve.png","type":"image/png","lastModified":1652139875359.033,"size":243031},{"id":"811e8a2f6a627242f3c4916b7a814144dbae8742bd6e2b2b8a931c0d20984ba5e088b7b283ffc9a6acef12e798f10d825dbe81b7911bf6055ccbbc20922fb95d","href":"https://static.observableusercontent.com/files/811e8a2f6a627242f3c4916b7a814144dbae8742bd6e2b2b8a931c0d20984ba5e088b7b283ffc9a6acef12e798f10d825dbe81b7911bf6055ccbbc20922fb95d","name":"creative_task@2.csv","type":"text/csv","lastModified":1652152680082.319,"size":380},{"id":"1083984506522b121bda6a0d5a9c9e094a9ec5dcd15b270fd001a5d53a16e10bdb9b7f1982dc155354504698f31614b16da70171bf5a63a1a82cec48ef0513b9","href":"https://static.observableusercontent.com/files/1083984506522b121bda6a0d5a9c9e094a9ec5dcd15b270fd001a5d53a16e10bdb9b7f1982dc155354504698f31614b16da70171bf5a63a1a82cec48ef0513b9","name":"adj_venndiagram.png","type":"image/png","lastModified":1652139046972.359,"size":108373},{"id":"fe04c700f95dd16b1774dfdfe4fa818e408da20d208dca4e17cb0a74d7462eccc271f880672fa2e16c733f09f5249174a54e9b3729f1f489a2be6afde8a8ca76","href":"https://static.observableusercontent.com/files/fe04c700f95dd16b1774dfdfe4fa818e408da20d208dca4e17cb0a74d7462eccc271f880672fa2e16c733f09f5249174a54e9b3729f1f489a2be6afde8a8ca76","name":"bubble_skills@1.csv","type":"text/csv","lastModified":1652217156909.966,"size":710},{"id":"67d7205ad8bcb497e68e12d08ec1b1f22aea88b31cfccb1552080d249312098c88a390f712b45d85a3a29fa75a014e94d74f16679a89dfbd97896393d2c50d99","href":"https://static.observableusercontent.com/files/67d7205ad8bcb497e68e12d08ec1b1f22aea88b31cfccb1552080d249312098c88a390f712b45d85a3a29fa75a014e94d74f16679a89dfbd97896393d2c50d99","name":"newinfo_freq.csv","type":"text/csv","lastModified":1652212009218.115,"size":146},{"id":"9255b496a7f61f69c3b24aaedab8eb334bb5300ae628d70f8a51525a9d09ec0bd0c61aa84ccdb6b4a50b4ce30ceadaa57f7fc9b168df088f5ce5605c5eb89788","href":"https://static.observableusercontent.com/files/9255b496a7f61f69c3b24aaedab8eb334bb5300ae628d70f8a51525a9d09ec0bd0c61aa84ccdb6b4a50b4ce30ceadaa57f7fc9b168df088f5ce5605c5eb89788","name":"voteCount_by_group - voteCount_by_group.csv","type":"text/csv","lastModified":1654271848543.659,"size":5242}] 2f:{"id":"2f0c7a9a539975d4","slug":"p5-fes-21-survey","title":"2022 FES Survey Report","thumbnail":"051baf9b31203d52b0900391647c93101ae96f4ceb6f33a19af832ff3f2b331e","access_level":"unlisted","create_time":"$D2022-04-13T21:03:28.967Z","update_time":"$D2022-06-03T16:34:23.857Z","view_time":null,"first_public_time":null,"fork":{"id":"9551de4ced039cab","slug":"plot-histogram","title":"Plot: Histogram","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bf5c3cab15b69a72","login":"almchung","name":"A M Chung","avatar_url":"https://avatars-next.observableusercontent.com/9859d67988ef9ba88b4b84a9edae34195e1f0b1aa4ff18522636f0711eb85b68","tier":"starter_2024"},"version":2567,"publish_version":2567,"role":null,"authored":false,"authors":[{"type":"individual","id":"52134d192b4129e0","login":"almchung","name":"A M Chung","avatar_url":"https://avatars-next.observableusercontent.com/9859d67988ef9ba88b4b84a9edae34195e1f0b1aa4ff18522636f0711eb85b68","tier":null}],"members":[{"type":"individual","id":"52134d192b4129e0","login":"almchung","name":"A M Chung","avatar_url":"https://avatars-next.observableusercontent.com/9859d67988ef9ba88b4b84a9edae34195e1f0b1aa4ff18522636f0711eb85b68","tier":null,"role":"editor"}],"comments":[{"id":"8fec5267b951ba21","reply_to_id":null,"content":"for this section, maybe you can name/summarize the quadrants? otherwise, user has to scroll back up to remember which is which.","create_time":"$D2022-06-01T21:21:51.264Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"0ac0d9f101dc1f52","login":"kjhollen","name":"kate hollenbach","avatar_url":"https://avatars-next.observableusercontent.com/e99752ad2aeecefa57bad47a1b773109fda4ead02224866ab56ce793dad3f383","tier":null}},{"id":"b2e31840e0d654d5","reply_to_id":"8fec5267b951ba21","content":"Thank you, this is a great suggestion! I will add some descriptors here.","create_time":"$D2022-06-03T15:39:56.325Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"52134d192b4129e0","login":"almchung","name":"A M Chung","avatar_url":"https://avatars-next.observableusercontent.com/9859d67988ef9ba88b4b84a9edae34195e1f0b1aa4ff18522636f0711eb85b68","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"2022 FES Survey Report","cells":[{"id":4,"value":"# 2022 FES Survey Report\nA report for the p5js community survey on Friendly Errors, data visualized using p5.js and Observable Plot.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":215,"value":"## Introduction\nAs a part of Google Season of Docs 2021, we ran a survey within the p5.js community to gather feedback on the Friendly Errors system (FES), a system to generate supplementary error messages as a soft guide to the p5.js library. This report summarizes ~70 responses we gathered online from October 2021 to March 2022.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1132,"value":"The FES survey serves two goals:\n1. To better understand p5.js FES usage and demand.\n2. To provide a guide for future contributors.\n\n👉 To read more about the motivation of the survey, please take a look at this post: [**Survey for Friendly Errors (Part I)**](https://medium.com/@mirarim/survey-for-friendly-errors-part-i-24788286d4b5).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2040,"value":"#### Notes on data collection\nWe only included results that we had permission to publish online in this report. All retained data is fully anonymized, and we are only publishing summarized results instead of the raw dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1717,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1190,"value":"This report comes in two parts. In **[Part I](https://observablehq.com/d/2f0c7a9a539975d4#cell-1162)**, we analyzed the collected responses to understand the _basic usage pattern_ of friendly errors. To do this, we asked the following questions:\n* What is people's primary purpose for using p5js?\n* How often do people read friendly errors?\n* How often do people learn new information from friendly errors?\n\nIn **[Part II](https://observablehq.com/d/2f0c7a9a539975d4#cell-1172)**, we analyzed the submitted _feedback and wishes_ for imagining the future of the friendly error. Specifically, we considered the following questions::\n* What can we learn from the feedback on our friendly errors?\n* How do people's expectations for the design of friendly errors diverge/converge?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1739,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1162,"value":"# Part I","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":716,"value":"## What is the main purpose for using p5js?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":720,"value":"We begin our survey by asking the respondent's main purpose for using p5js. From the given list of categories, \"`for learning`,\" \"`for teaching`,\" \"`for experimenting`,\" and \"`for making`,\" many chose more than one category as their answer.\n\nThe following plot shows the percentage of people who chose each category as their main purpose. The plot also shows the proportion of people who answered with creative (\"`for making`\") purposes within each category:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":956,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":724,"value":"Our respondents indicated that they mainly use p5js for diverse reasons such as for `learning`(54%), `teaching` (45%), `experimenting` (82%) and `making` (57%). There were many overlaps between these categories. For example, people using p5js for creative tasks (\"`for making`\") were evenly distributed within all other three groups (\"`for learning`,\" \"`for teaching`,\" \"`for experimenting`\"). Other answers outside the given categories included using p5js for software development and streaming.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1807,"value":"🌸 _With the purpose answers more than half for creative tasks (57%) and experimentation (82%), what does the result inform us about our users?_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":654,"value":"## How often do people read friendly errors?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1746,"value":"For p5js, friendly errors are enabled by default. However, not everyone will use or know about supplementary features such as friendly errors. So, how often do people read friendly error messages?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":999,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":931,"value":"Overall, about 91% of our respondents reported that they read friendly errors to some extent (\"`Frequently`,\" \"`Sometimes`\"). About 4% responded they never read friendly errors and another 4% answered that they learned about friendly errors through this survey.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":941,"value":"To identify more-frequent or less-frequent users of the friendly errors, we subdivided the responses based on these two lenses: (1) the purpose for using p5js and (2) confidence level in technical skills. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1765,"value":"#### Explore Subgroups: Main Purposes\nHere we will create subgroups based on respondents' main purposes for using p5js. You can select one of the lenses (\"`for making`,\" \"`for learning`,\" ...) to compare responses from two subgroups: a subgroup whose responses included the selected condition and another that did not include the condition.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":819,"value":"viewof read_purpose_group = Inputs.radio([\"for making\", \"for learning\", \"for teaching\", \"for experimenting\"], {value: 'for making', label: \"Try it! Select a lens:\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1627,"value":"displayLegend(read_purpose_data, d => d.response, color_greenblue)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":749,"value":"Plot.plot({\n marginLeft: 140,\n marginBottom: 60,\n height: 160,\n width: 720,\n style: {\n fontSize: 14\n },\n x: {\n percent: true,\n label: \"responses (%) →\"\n },\n y: {\n type: \"band\",\n domain: d3.sort(read_purpose_data.filter(d => d.group === read_purpose_group), d => d.group).map(d => d.label),\n label: null,\n tickSize: 12,\n fontSize: 12\n },\n marks: [\n Plot.barX(read_purpose_data.filter(d => (d.group === read_purpose_group)&&(d.value > 0)), \n Plot.stackX({x: \"value\", y: \"label\", fill: \"response\"})),\n Plot.text(read_purpose_data.filter(d => (d.group === read_purpose_group)&&(d.value > 0)), \n Plot.stackX({x: \"value\", y: \"label\", text: d => (d.value * 100).toFixed(0)+\"%\", dy: -1})),\n Plot.ruleX([0])\n ],\n color: {\n type: \"categorical\",\n range: color_greenblue,\n fontSize: 12\n }\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1786,"value":"For example, choose the \"`for making`\" lens. You will see the responses divided into the \"`makers`\" sub-group (all answers containing the condition \"`for making`\") and the \"`non-makers`\" sub-group(all answers not containing the condition \"`for making`\").","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":935,"value":"#### Explore Subgroups: Skill Confidence Levels\nThis time, we will create subgroups based on respondents' confidence levels in programming, Javascript, p5js, and digital art tool skills. Like the previous section, you can select one of the lenses (programming skill, art tool skill, etc.) and explore the result.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":896,"value":"viewof read_skill_group = Inputs.radio([\"programming skill\", \"Javascript skill\", \"p5js skill\", \"art tool skill\"], {value: 'programming skill', label: 'Try it! Select a lens:'});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1617,"value":"displayLegend(read_skill_data, d => d.response, color_greenblue)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":894,"value":"Plot.plot({\n marginLeft: 140,\n marginBottom: 60,\n height: 240,\n width: 720,\n style: {\n fontSize: 14\n },\n x: {\n percent: true,\n label: \"responses (%) →\"\n },\n y: {\n type: \"band\",\n domain: d3.sort(read_skill_data.filter(d => d.group === read_skill_group), d => d.group).map(d => d.label),\n label: \"Self-reported \" + read_skill_group + \" level\",\n tickSize: 12,\n fontSize: 12\n },\n marks: [\n Plot.barX(read_skill_data.filter(d => (d.group === read_skill_group)&&(d.value > 0)), \n Plot.stackX({x: \"value\", y: \"label\", fill: \"response\"})),\n Plot.text(read_skill_data.filter(d => (d.group === read_skill_group)&&(d.value > 0)), \n Plot.stackX({x: \"value\", y: \"label\", text: d => (d.value * 100).toFixed(0)+\"%\", dy: -1})),\n Plot.ruleX([0])\n ],\n color: {\n type: \"categorical\",\n range: color_greenblue\n }\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1791,"value":"🌸 _Do you see any sub-group(s) who read the friendly errors more/less frequently than others? Who are they, and why would they need/want to do that? How can we support them?_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1211,"value":"## How often do people learn new information from friendly errors?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1215,"value":"In this section, we asked people to estimate how often they learn new information from friendly errors on the scale of `often` (~50% of the time), `occasionally` (~25% of the time), `rarely` (~10% of the time) and `never` (~0% of the time).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1235,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1221,"value":"About 60% of respondents said they learn new information `often` (17%) or `occasionally` (43%). About 33% of respondents said they `rarely` learn new information, and about 8% answered they `never` learn new information from friendly errors. On average, people feel they learned new information from friendly errors ~23% of the time (SEM ~2%).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1835,"value":"#### Quadrant Analysis: Digital Art Tool Skills x Programming Skills","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":664,"value":"After looking at the overall result, we may wonder whether certain factors such as comfort levels in different tasks (such as programming or digital art-making) affect the responses. To investigate these factors and further identify corresponding subgroups, we borrowed methods from quadrant analysis.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1840,"value":"We set up a matrix and plotted bubbles based on the self-reported confidence levels for digital art tools skills (x-axis, left: low confidence → right: high confidence) and programming skills (y-axis, down: low confidence ↑ up: high confidence).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1383,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1898,"value":"Each bubble's radius on the matrix presents the number of respondents with corresponding self-reported skill levels [`1: beginner`, `2: intermediate`, `3: proficient`, `4: fully proficient`]. These bubbles are then subdivided into four groups, forming four quadrants: bottom-right `\"(1,2)(1,2)\"`, bottom-left `\"(1,2)(3,4)\"`, top-right `\"(3,4)(1,2)\"`, and top-left `\"(3,4)(3,4)\"`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1690,"value":"Then we looked at each group's reported frequency of learning new information from friendly errors. We found the average values of reported frequency of learning new information along with their standard errors in mean (SEM, a range is displayed as a bar in the plot), which is presented in the following plot:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1250,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1847,"value":"As expected, the bottom-right \"`(1,2)(1,2)`\" quadrant shows the most frequent instances of new learning from friendly errors, and the top-left\"`(3,4)(3,4)`\" quadrant shows the least. However, considering the SEM into consideration, all quadrants benefit from friendly errors without no significant difference, except for the top-left \"`(3,4)(3,4)`\" quadrant, where the learning instance significantly drops. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1864,"value":"🌸 _If not only beginners in programming but beginners in digital art also benefit from friendly errors, how can we best support these groups of people coming from different backgrounds?_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1172,"value":"# Part II","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1536,"value":"## What can we learn from the feedback on our friendly errors?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1955,"value":"To gather feedback on friendly errors, we asked two questions in the survey:\n1. When do friendly errors stop being resourceful for you?\n2. How can we improve our Friendly Errors?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2054,"value":"In the following two sections, we will identify and summarize the limitations of friendly errors and suggestions to improve reported by the survey participants.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1951,"value":"### Limitations of the Current Design","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2062,"value":"We asked the survey participants to identify where our current design of friendly errors stops being helpful. The identified cases are grouped into the following categories: confusing information, unmatched needs, incomplete information, UI/UX problems, performance issues, and false positives. Below we list the specifics of each case with representative quotes from the survey.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1961,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2004,"value":"### Suggestions for Improvement","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2074,"value":"In the following section, we asked the survey participants to share ideas to improve the current design of friendly errors. The collected suggestions are grouped into rethinking friendly errors, improving UI/UX design, and adding new features. Below we list the specifics of each category with representative quotes from the survey.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2008,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":649,"value":"## How do people's expectations for the design of friendly errors diverge/converge?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2094,"value":"In the last section, we wanted to conclude the survey with an open-end question to imagine the core value for the design of friendly errors. We asked the participants to list three English adjectives describing their \"dream\" or ideal friendly error system. What adjectives are most frequently mentioned, and how do the answers differ among people from different skill backgrounds?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":68,"value":"### Adjective for FES\nWe counted the submitted English adjective words for describing \"dream FES.\" The collected words were grouped into synonyms, and the groups were sorted from the most popular choice to the least.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":37,"value":"viewof adj_all = {\n const chart = Plot.plot({\n marginLeft: 150,\n marginBottom: 60,\n x: {\n grid: true\n },\n y: {\n domain: d3.sort(votedata, d => -d.count).map(d => d.adjective),\n tickSize: 12,\n label: null,\n fontsize: 12\n },\n marks: [\n Plot.barX(votedata, {y: 'adjective', x: 'count', fill: '#FF005A'})\n ]\n });\n\n d3.select(chart).selectAll(\"svg > g > text\").style(\"font-size\", \"16px\");\n d3.select(chart).selectAll(\"svg > g > g > text\").style(\"font-size\", \"16px\");\n\n const plot = html`\n

English Adjectives for Friendly Errors, sorted by the number of responses.

${chart}

`;\n return plot;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":675,"value":"To investigate how the answer may change according to a respondent's comfort levels in technical skills, we brought back the skills quadrant groups (`digital art tools x programming`) from the previous section to subdivide the adjectives and sort the result. Using the radio button, try to see how the top adjectives change for the different groups in the below plot. The numbers correspond to self-reported skill levels (1: beginner, 2: intermediate, 3: proficient, 4: fully proficient).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":571,"value":"viewof displaygroup = Inputs.radio([\"all\", \"art tool (1,2) coding (1,2)\", \"art tool (1,2) coding (3,4)\", \"art tool (3,4) coding (1,2)\", \"art tool (3,4) coding (3,4)\"], {value: 'all', label: 'Try it! Select a quadrant subgroup:'});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1696,"value":"displayLegend(votegroupdata, d => d.group, getColor(\"all\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":466,"value":"Plot.plot({\n marginLeft: 140,\n marginBottom: 60,\n style: {\n fontSize: 14\n },\n x: {\n grid: true,\n domain: [0,16]\n },\n y: {\n domain: sortData(votegroupdata, displaygroup),\n tickSize: 12,\n label: null,\n fontsize: 14,\n min: 16\n },\n color: {\n type: \"categorical\",\n range: getColor(displaygroup)\n },\n marks: [\n Plot.barX(getFilteredData(votegroupdata, displaygroup), {y: 'word', x: 'vote', fill: 'group'})\n ]\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":680,"value":"As you may see in the plot, certain adjectives were more represented in a particular quadrant than others. We plotted the top adjectives in the below quadrant and Vann diagram to show the overlap and difference among groups.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":685,"value":"figure2 = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":697,"value":"figure3 = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2190,"value":"🌸 How can a single system/design best support all these desires/values? What values are shared among all groups, and which ones are conflicting?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":434,"value":"Here is the complete list of the collected adjective words, grouped by synonyms:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":92,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2213,"value":"----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2087,"value":"## Thank you","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2121,"value":"The survey was circulated through our official social media accounts plus Discord channel and conducted in English. This report is based on a limited sample and nowhere close to representing the overall experience of p5js. To form a more comprehensive understanding of the limitations of friendly errors and continue improving the design, we may want to think about setting up a channel for feedback and discussion.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2200,"value":"We thank everyone who generously took their time to participate in the survey. Especially we want to thank Dave Pagurek, Jordanne Chan, Matt Martin, Norm Krumpe, and Jorge Ledezma for the follow-up feedback sessions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2256,"value":"We also like to thank Kate Hollenbach, Aren Davey, and Philip Guo for their warm mentorship and project leads Qianqian Ye, evelyn masso, and the Processing Foundation for their endless support throughout the project.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2209,"value":"----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":443,"value":"# Appendix\nHere we list all data and helper functions used to draw the plots.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":219,"value":"**Original Survey Prompt**:\n1. What do you use p5.js mainly for?\n2. How would you rate your proficiency in ... `[🎨 Digital art tools, 🧮 Programming, 💻 Javascript, 🌸 p5.js]`\n3. How often do you read Friendly Error System (FES) messages when you code in p5.js? `[1: frequently, 2: sometimes, 3: never, 4: just learned]`\n4. How often do you learn new information from FES? `[0.00: never, 0.10: rarely, 0.25: occasionally, 0.50: often]`\n5. When does the Friendly Error System stop being resourceful for you? _(Optional)_\n6. How can we improve our Friendly Error System? _(Optional)_\n7. What is your favorite debugging tool/aid/resources? _(Optional)_\n8. If you describe your dream Friendly Error System with three adjectives, what would they be? (ex: melted, sturdy, tangy)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":90,"value":"import {p5} from \"@tmcw/p5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1610,"value":"function displayLegend(data, func, colorarray) {\n let legend = Plot.legend({\n color: {\n type: \"categorical\",\n domain: [...new Set(data.map(func))],\n range: colorarray\n },\n legend: \"swatches\",\n swatchSize: 14,\n style: {\n fontSize: \"14px\"\n }\n })\n return legend\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":948,"value":"creative_purpose_data = FileAttachment(\"creative_task@2.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":754,"value":"read_purpose_data = FileAttachment(\"read_freq_purpose.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":907,"value":"read_skill_data = FileAttachment(\"read_freq_skill@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1238,"value":"newinfo_freq_data = FileAttachment(\"newinfo_freq.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1280,"value":"newinfo_avg_data = FileAttachment(\"newinfo_avg.csv\").csv();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1385,"value":"bubble_data = FileAttachment(\"bubble_skills@1.csv\").csv();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":455,"value":"votegroupdata = FileAttachment(\"voteCount_by_group - voteCount_by_group.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"votedata = FileAttachment(\"voteCount@5.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"wordsetsdata = FileAttachment(\"adj_sets@3.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":587,"value":"function getFilteredData(data, group) {\n if(group == \"all\"){\n return data\n }\n else{\n\t return data.filter(function(point) { return (point.group === group)&&(point.vote > 0); });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":605,"value":"getFilteredData(votegroupdata, 'all')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":619,"value":"function sortData(data, group){\n if(group == \"all\"){\n return d3.sort(votedata, d => -d.count).map(d => d.adjective)\n }\n else{\n\t return d3.sort(getFilteredData(votegroupdata, displaygroup), d => -d.vote).map(d => d.word);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1622,"value":"color_greenblue = [\"#34a853\", \"#93c47d\", \"#d9ead3\", \"#4285f4\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1639,"value":"color_bluegreen = [\"#4285f4\", \"#d9ead3\", \"#93c47d\",\"#34a853\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":611,"value":"function getColor(group){\n var arrColor = [\"#b0da92ff\", \"#eade4aff\", \"#2782e5ff\", \"#58A65C\"];\n var lookup = {\n \"art tool (1,2) coding (1,2)\": 0,\n \"art tool (1,2) coding (3,4)\": 1,\n \"art tool (3,4) coding (1,2)\": 2,\n \"art tool (3,4) coding (3,4)\": 3\n }\n if(group == \"all\"){\n return arrColor;\n }\n else{\n return new Array(arrColor[lookup[group]]);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 30:"$2f:body"