2d:null 2e:["$","title",null,{"children":"A Literate User Study Example | tyr1981 | Observable"}] 33:T484,

**Data:** We analysed the densities and structures (node degree distributions) of 17 real-life networks of different sizes. We then chose two networks that are representative of this set, larger than those by _Ghoniem et al._ yet sufficiently small to be tested in browsers: - *Ingredients (258 nodes and 1090 edges):* Ingredients that are connected if they commonly appear together in recipes. This network is about 2.5 times larger than the largest network evaluated by Ghoniem et al. - *USAir97 (332 nodes and 2126 edges):* US airports sharing connectinng flights. This network is about 3 times larger than the largest network evaluated by Ghoniem et al. and denser than the _Ingredients_ one. We included two networks to be used for training and introductory purposes: - *Les Miserables (77 nodes and 254 edges):* interactions between characters in Victor Hugo's book with the same title - *Demo* - a very small synthethic network Finally, we created random instances of the _9 synthetic networks_ used by _Ghoniem et al._ and included those in our test-suite. We do not use them here, but we added them to support future replication efforts.34:T592,

**Tasks:** We chose to evaluate 2 tasks from _Ghoniem et al._ (_commonNeighbor_ and _findPath_) and 8 new ones. The new ones were designed to **(i)** test similar abilities to those explored by _Ghoniem et al._ and **(ii)** to cover the task taxonomy of [_Lee et al._ (2006)](https://dl.acm.org/doi/abs/10.1145/1168149.1168168) exhaustively. For example: - _compareDegrees_ overlaps _Ghoniem et al._'s _mostConnected_ task and is an adjacency task in _Lee et al._'s taxonomy - _namedConnected_ overlaps _Ghoniem et al._'s _areConnected_ and _findNode_ tasks and is an adjacency and attribute task in _Lee et al._'s taxonomy - _withinTwoHops_ is an accessability task in _Lee et al._'s taxonomy. Additionally, we added 2 memorability tasks and 1 estimation task: - _rememberConnection_ asks participants if they remember the answer they gave to a previous (_namedConnected_) task, but without access to the visualisation - _rememberNeighbors_ asks participants if they remember elements involved in a previous (_namedCommonNeighbors_) task - _pathCompare_ asks participants to estimate - rather than determine precisely - the length of paths betweeen two pairs of nodes. We also included a qualitative question - _rateVis_ asks participants to rate the visualisation and provide an open ended reasoning for that rating Consult the [test suite](https://observablehq.com/@tyr1981/networktestsuite) for more information.35:T43b,

**Visualisations:** We implemented the node link diagram and adjacency matrix from _Ghoniem et al._'s study but extended their set of interactions slightly (their implementation is [here](https://observablehq.com/@tyr1981/network-vis)): - Both visualisation can be zoomed and panned to enable the exploration of larger networks. - *Node Link (NL):* Nodes are arranged using the D3 layouter. Nodes can be hovered to highlight them and their incident edges. Clicking on nodes does the same but in a different color and with more permanent effets. An addition over _Ghoniem et al._'s version is that individual nodes can be picked and moved. - *Adjacency Matrix (AM)*: Column and row headers can be hovered to highlight their respective columns and rows while clicking selects (and highlights) them. Hovering over connections (cells in the matrix) highlights their corresponding rows and columns (endpoints). To pick these interactions and ensure they are representative of real use of these visualisations, we reviewed multiple popular systems that implement the visualisations. 36:Tc19,designIterations = [ { name : "iteration 1", discussion : "First we wanted to get a sense of how long each task might take. We generated a sequence containing all viewers, datasets, and tasks (one repeat each) and ran an informal pilot with colleagues from our lab and a few friends.

We then filled in the time estimates in our sequence and changed this to include one training and three normal repeats for each task (an approximation of how we wanted to run the study). We found that int this form the study would extend to more than 2 hours.", design : design1 }, { name : "iteration 2", discussion : "As this was exceptionally long, we experimented with evaluating the two visualisations between participants. Unsuprisingly, the duration for each condition was still over an hour.", design : design2 }, { name : "iteration 3", discussion : "We decided it was impossible to evaluate all tasks at once and we would need to split them between participants. We thus changed the evaluation of the studies to between tasks and focused on deciding on our ideal number of repeats for each task and training. We settled on 6 repeats for short tasks (*areConnected*, *compareDegrees*) and 3 repeats for longer tasks such as *findPath* or *withinTwoHops*. Additionally, we increased the training to two repeats for each task. We also note that we chose random selection of repeats so as to distribute the chance of unrepresentative repeats across participants. One exception was made: the two memorability tasks should have repeats in the same order as the tasks that they are paired with (so for those 4 tasks we pick repeats in order).

This yielded the *2 visualisations x 10 tasks = 20* participant groups shown below, ranging from between 6 to 17 minutes (approximately).", design : design3 }, { name : "iteration 4", discussion : "Finally, we decided to group tasks in a way that yielded uniformly timed, relatively short sessions. We converged on four groups - captured as separate study designs - extending to between 20-25 minutes, which we deemed acceptable. This and the next three iterations capture these sub-studies. Additionally, we included a brief introduction to the capabilities of the visualisations (zooming, panning, selections, etc.) at the beginning of the study.

**Final sub-study 1** includes paired tasks _nameConnected_ and _rememberConnection_; _selectCommonNeighbors_ was placed in between. We reduced the latter to 4 repeats to shorten the session.", design : design4 }, { name : "iteration 5", discussion : "**Final sub-study 2:** included paired tasks _namedCommonNeighbors_ and _rememberNeighbors_; _selectNeighbors_ was placed in between.", design : design5 }, { name : "iteration 6", discussion : "**Final sub-study 3:** included tasks _findPath_ and _comparePath_", design : design6 }, { name : "iteration 7", discussion : "**Final sub-study 4:** included tasks _compareDegrees_ and _withinTwoHops_", design : design7 } ]37:T1ccd,design1 = ({ viewers : { which : [nodeLinkViewer1, matrixViewer1], how : "within" }, datasets : { //against two datasets; selections above determine the testing strategies which : [data.ingredients, data.usair97], how : "within" }, tasks : { which : [ { task : tasks.compareDegrees, repeats : { number : 3}, max_duration : 30, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 30, }, { task : tasks.selectNeighbors, repeats : { number : 3}, max_duration : 20, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 20 }, { task : tasks.selectCommon, repeats : { number : 3}, max_duration : 60, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 60, }, { task : tasks.namedConnected, repeats : { number : 3}, max_duration : 40, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 40 }, { task : tasks.namedCommon, repeats : { number : 3}, max_duration : 60, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 60, }, { task : tasks.comparePaths, repeats : { number : 3}, max_duration : 20, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 20 }, { task : tasks.findPath, repeats : { number : 3}, max_duration : 120, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 120 }, { task : tasks.withinTwoHops, repeats : { number : 3}, max_duration : 120, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 120 }, { task : tasks.rememberConnection, repeats : { number : 3}, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 60 }, { task : tasks.rememberNeighbors, repeats : { number : 3}, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 60 } ], how : "within" }, blocking : "vtd", block_tasks : [ { task : studyInformation.askConsent, //start by showing study info. and asks for participant show : "before", //these to attributes indicate that the task is to be shown block : "s", //before the main (s)tudy starts viewer : studyInformation.viewer, //it relies on showing some simple HTML dataset : studyInformation.data, //content repeats : {number : 1}, min_accuracy : 1, //indicates participant needs to agree (acc=1), otherwise study exits estimated_duration : 60 }, { task : announceDemographics, //alerts the user that demographic questions follow show : "before", //also shown at the beginning of (s)tudy but after block : "s", //the consent task viewer : null, //only the task instruction is shown (no other information below) estimated_duration : 10, bridging : true //this is just an annotation to indicate that }, //the task in purely informational { task : demographicQuestions.ask_age, //a question about age follows show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, { task : demographicQuestions.ask_education, //question about participant's education show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, { task : demographicQuestions.ask_vis_expertise, //queston about experience using vis show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, //here are a two tasks that are to be shown before and after //visualisation blocks { task : networkTesting.tasks.introduceVis, //this will give the visualisation that's about to follow show : "before first", //a chance to introduce itself; shown whenever a new vis block : "v", //is about to be introduced. dataset : networkTesting.data.demoNetwork, //vis. should be introduced using the demo dataset estimated_duration : 20, repeats : {number : 2} //two "steps" of introduction }, { task : tasks.rateVis, //visualisations that's just been used can be rated show : "after last", //shown after the last use of each visualisation block : "v", estimated_duration : 15, }, //two tasks to be shown before the first tasks is shown and //whenever tasks are switched { task : announceTasks, //before the first task starts we let participants know how show : "before first", //tasks in general work block : "t*", //the * indicates that this is to be shown before the first viewer : null, //showing of any task (rather than first of each kind of task) estimated_duration : 10, bridging : true }, { task : announceSwitchTasks, //alert participant that tasks are about to change show : "between", //show between any(*) task switch block : "t*", viewer : null, estimated_duration : 10, bridging : true } ] });38:T1cd2,design2 = ({ viewers : { which : [nodeLinkViewer1, matrixViewer1], how : "between" }, datasets : { //against two datasets; selections above determine the testing strategies which : [data.ingredients, data.usair97], how : "within" }, tasks : { which : [ { task : tasks.compareDegrees, repeats : { number : 3}, max_duration : 30, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 30, }, { task : tasks.selectNeighbors, repeats : { number : 3}, max_duration : 20, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 20 }, { task : tasks.selectCommon, repeats : { number : 3}, max_duration : 60, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 60, }, { task : tasks.namedConnected, repeats : { number : 3}, max_duration : 40, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 40 }, { task : tasks.namedCommon, repeats : { number : 3}, max_duration : 60, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 60, }, { task : tasks.comparePaths, repeats : { number : 3}, max_duration : 20, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 20 }, { task : tasks.findPath, repeats : { number : 3}, max_duration : 120, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 120 }, { task : tasks.withinTwoHops, repeats : { number : 3}, max_duration : 120, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 120 }, { task : tasks.rememberConnection, repeats : { number : 3}, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 60 }, { task : tasks.rememberNeighbors, repeats : { number : 3}, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 60 } ], how : "within" }, blocking : "vtd", block_tasks : [ { task : studyInformation.askConsent, //start by showing study info. and asks for participant show : "before", //these to attributes indicate that the task is to be shown block : "s", //before the main (s)tudy starts viewer : studyInformation.viewer, //it relies on showing some simple HTML dataset : studyInformation.data, //content repeats : {number : 1}, min_accuracy : 1, //indicates participant needs to agree (acc=1), otherwise study exits estimated_duration : 60 }, { task : announceDemographics, //alerts the user that demographic questions follow show : "before", //also shown at the beginning of (s)tudy but after block : "s", //the consent task viewer : null, //only the task instruction is shown (no other information below) estimated_duration : 10, bridging : true //this is just an annotation to indicate that }, //the task in purely informational { task : demographicQuestions.ask_age, //a question about age follows show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, { task : demographicQuestions.ask_education, //question about participant's education show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, { task : demographicQuestions.ask_vis_expertise, //queston about experience using vis show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, //here are a two tasks that are to be shown before and after //visualisation blocks { task : networkTesting.tasks.introduceVis, //this will give the visualisation that's about to follow show : "before first", //a chance to introduce itself; shown whenever a new vis block : "v", //is about to be introduced. dataset : networkTesting.data.demoNetwork, //vis. should be introduced using the demo dataset estimated_duration : 20, repeats : {number : 2} //two "steps" of introduction }, { task : tasks.rateVis, //visualisations that's just been used can be rated show : "after last", //shown after the last use of each visualisation block : "v", estimated_duration : 15, }, //two tasks to be shown before the first tasks is shown and //whenever tasks are switched { task : announceTasks, //before the first task starts we let participants know how show : "before first", //tasks in general work block : "t*", //the * indicates that this is to be shown before the first viewer : null, //showing of any task (rather than first of each kind of task) estimated_duration : 10, bridging : true }, { task : announceSwitchTasks, //alert participant that tasks are about to change show : "between", //show between any(*) task switch block : "t*", viewer : null, estimated_duration : 10, bridging : true } ] });39:T1cce,design3 = ({ viewers : { which : [nodeLinkViewer1, matrixViewer1], how : "between" }, datasets : { //against two datasets; selections above determine the testing strategies which : [data.ingredients, data.usair97], how : "within" }, tasks : { which : [ { task : tasks.compareDegrees, repeats : { number : 6}, max_duration : 30, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 2}, estimated_duration : 30, }, { task : tasks.selectNeighbors, repeats : { number : 6}, max_duration : 20, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 2}, estimated_duration : 20 }, { task : tasks.selectCommon, repeats : { number : 6}, max_duration : 60, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 2}, estimated_duration : 60, }, { task : tasks.namedConnected, repeats : { number : 3}, max_duration : 40, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 2}, estimated_duration : 40 }, { task : tasks.namedCommon, repeats : { number : 3}, max_duration : 60, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 2}, estimated_duration : 60, }, { task : tasks.comparePaths, repeats : { number : 6}, max_duration : 20, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 2}, estimated_duration : 20 }, { task : tasks.findPath, repeats : { number : 3}, max_duration : 120, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 2}, estimated_duration : 120 }, { task : tasks.withinTwoHops, repeats : { number : 3}, max_duration : 120, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 2}, estimated_duration : 120 }, { task : tasks.rememberConnection, repeats : { number : 3}, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 2}, estimated_duration : 60 }, { task : tasks.rememberNeighbors, repeats : { number : 3}, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 2}, estimated_duration : 60 } ], how : "between" }, blocking : "vtd", block_tasks : [ { task : studyInformation.askConsent, //start by showing study info. and asks for participant show : "before", //these to attributes indicate that the task is to be shown block : "s", //before the main (s)tudy starts viewer : studyInformation.viewer, //it relies on showing some simple HTML dataset : studyInformation.data, //content repeats : {number : 1}, min_accuracy : 1, //indicates participant needs to agree (acc=1), otherwise study exits estimated_duration : 60 }, { task : announceDemographics, //alerts the user that demographic questions follow show : "before", //also shown at the beginning of (s)tudy but after block : "s", //the consent task viewer : null, //only the task instruction is shown (no other information below) estimated_duration : 10, bridging : true //this is just an annotation to indicate that }, //the task in purely informational { task : demographicQuestions.ask_age, //a question about age follows show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, { task : demographicQuestions.ask_education, //question about participant's education show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, { task : demographicQuestions.ask_vis_expertise, //queston about experience using vis show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, //here are a two tasks that are to be shown before and after //visualisation blocks { task : networkTesting.tasks.introduceVis, //this will give the visualisation that's about to follow show : "before first", //a chance to introduce itself; shown whenever a new vis block : "v", //is about to be introduced. dataset : networkTesting.data.demoNetwork, //vis. should be introduced using the demo dataset estimated_duration : 20, repeats : {number : 2} //two "steps" of introduction }, { task : tasks.rateVis, //visualisations that's just been used can be rated show : "after last", //shown after the last use of each visualisation block : "v", estimated_duration : 15, }, //two tasks to be shown before the first tasks is shown and //whenever tasks are switched { task : announceTasks, //before the first task starts we let participants know how show : "before first", //tasks in general work block : "t*", //the * indicates that this is to be shown before the first viewer : null, //showing of any task (rather than first of each kind of task) estimated_duration : 10, bridging : true }, { task : announceSwitchTasks, //alert participant that tasks are about to change show : "between", //show between any(*) task switch block : "t*", viewer : null, estimated_duration : 10, bridging : true } ] });3a:T1498,design4 = ({ viewers : { which : [nodeLinkViewer1, matrixViewer1], how : "between" }, datasets : { //against two datasets; selections above determine the testing strategies which : [data.ingredients, data.usair97], how : "within" }, tasks : { which : [ { task : tasks.namedConnected, repeats : { number : 3}, max_duration : 40, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 2}, estimated_duration : 40 }, { task : tasks.selectCommon, repeats : { number : 4}, max_duration : 60, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 60, }, { task : tasks.rememberConnection, viewer : null, repeats : { number : 3}, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 2}, estimated_duration : 60 } ], how : "within" }, blocking : "vtd", block_tasks : [ { task : studyInformation.askConsent, //start by showing study info. and asks for participant show : "before", //these to attributes indicate that the task is to be shown block : "s", //before the main (s)tudy starts viewer : studyInformation.viewer, //it relies on showing some simple HTML dataset : studyInformation.data, //content repeats : {number : 1}, min_accuracy : 1, //indicates participant needs to agree (acc=1), otherwise study exits estimated_duration : 60 }, { task : announceDemographics, //alerts the user that demographic questions follow show : "before", //also shown at the beginning of (s)tudy but after block : "s", //the consent task viewer : null, //only the task instruction is shown (no other information below) estimated_duration : 10, bridging : true //this is just an annotation to indicate that }, //the task in purely informational { task : demographicQuestions.ask_age, //a question about age follows show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, { task : demographicQuestions.ask_education, //question about participant's education show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, { task : demographicQuestions.ask_vis_expertise, //queston about experience using vis show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, //here are a two tasks that are to be shown before and after //visualisation blocks { task : networkTesting.tasks.introduceVis, //this will give the visualisation that's about to follow show : "before first", //a chance to introduce itself; shown whenever a new vis block : "v", //is about to be introduced. dataset : networkTesting.data.demoNetwork, //vis. should be introduced using the demo dataset estimated_duration : 20, repeats : {number : 4} //two "steps" of introduction }, { task : tasks.rateVis, //visualisations that's just been used can be rated show : "after last", //shown after the last use of each visualisation block : "v", estimated_duration : 15, }, //two tasks to be shown before the first tasks is shown and //whenever tasks are switched { task : announceTasks, //before the first task starts we let participants know how show : "before first", //tasks in general work block : "t*", //the * indicates that this is to be shown before the first viewer : null, //showing of any task (rather than first of each kind of task) estimated_duration : 10, bridging : true }, { task : announceSwitchTasks, //alert participant that tasks are about to change show : "between", //show between any(*) task switch block : "t*", viewer : null, estimated_duration : 10, bridging : true } ] });3b:T1665,design5 = ({ viewers : { which : [nodeLinkViewer1, matrixViewer1], how : "between" }, datasets : { //against two datasets; selections above determine the testing strategies which : [data.ingredients, data.usair97], how : "within" }, tasks : { which : [ { task : tasks.namedCommon, repeats : { number : 3}, max_duration : 60, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 2}, estimated_duration : 60, }, { task : tasks.selectNeighbors, repeats : { number : 6}, max_duration : 20, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 20 }, { task : tasks.rememberNeighbors, repeats : { number : 3}, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 2}, estimated_duration : 60 } ], how : "within" }, blocking : "vtd", block_tasks : [ { task : studyInformation.askConsent, //start by showing study info. and asks for participant show : "before", //these to attributes indicate that the task is to be shown block : "s", //before the main (s)tudy starts viewer : studyInformation.viewer, //it relies on showing some simple HTML dataset : studyInformation.data, //content repeats : {number : 1}, min_accuracy : 1, //indicates participant needs to agree (acc=1), otherwise study exits estimated_duration : 60 }, { task : announceDemographics, //alerts the user that demographic questions follow show : "before", //also shown at the beginning of (s)tudy but after block : "s", //the consent task viewer : null, //only the task instruction is shown (no other information below) estimated_duration : 10, bridging : true //this is just an annotation to indicate that }, //the task in purely informational { task : demographicQuestions.ask_age, //a question about age follows show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, { task : demographicQuestions.ask_education, //question about participant's education show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, { task : demographicQuestions.ask_vis_expertise, //queston about experience using vis show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, //here are a two tasks that are to be shown before and after //visualisation blocks { task : networkTesting.tasks.introduceVis, //this will give the visualisation that's about to follow show : "before first", //a chance to introduce itself; shown whenever a new vis block : "v", //is about to be introduced. dataset : networkTesting.data.demoNetwork, //vis. should be introduced using the demo dataset estimated_duration : 20, repeats : {number : 2} //two "steps" of introduction }, { task : tasks.rateVis, //visualisations that's just been used can be rated show : "after last", //shown after the last use of each visualisation block : "v", estimated_duration : 15, }, //two tasks to be shown before the first tasks is shown and //whenever tasks are switched { task : announceTasks, //before the first task starts we let participants know how show : "before first", //tasks in general work block : "t*", //the * indicates that this is to be shown before the first viewer : null, //showing of any task (rather than first of each kind of task) estimated_duration : 10, bridging : true }, { task : announceSwitchTasks, //alert participant that tasks are about to change show : "between", //show between any(*) task switch block : "t*", viewer : null, estimated_duration : 10, bridging : true }, { task : tasks.introduceVis, //introduce the NL and its interactions show : "before", //at the start block : "s", //of the study dataset : data.lesMis, //use lesMis dataset for testing viewer : nodeLinkViewer, estimated_duration : 20, repeats : {number : 4} //four "steps" of introduction } ] });3c:T155c,design6 = ({ viewers : { which : [nodeLinkViewer1, matrixViewer1], how : "between" }, datasets : { //against two datasets; selections above determine the testing strategies which : [data.ingredients, data.usair97], how : "within" }, tasks : { which : [ { task : tasks.findPath, repeats : { number : 3}, max_duration : 120, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 2}, estimated_duration : 120 }, { task : tasks.comparePaths, repeats : { number : 6}, max_duration : 20, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 2}, estimated_duration : 20 }, ], how : "within" }, blocking : "vtd", block_tasks : [ { task : studyInformation.askConsent, //start by showing study info. and asks for participant show : "before", //these to attributes indicate that the task is to be shown block : "s", //before the main (s)tudy starts viewer : studyInformation.viewer, //it relies on showing some simple HTML dataset : studyInformation.data, //content repeats : {number : 1}, min_accuracy : 1, //indicates participant needs to agree (acc=1), otherwise study exits estimated_duration : 60 }, { task : announceDemographics, //alerts the user that demographic questions follow show : "before", //also shown at the beginning of (s)tudy but after block : "s", //the consent task viewer : null, //only the task instruction is shown (no other information below) estimated_duration : 10, bridging : true //this is just an annotation to indicate that }, //the task in purely informational { task : demographicQuestions.ask_age, //a question about age follows show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, { task : demographicQuestions.ask_education, //question about participant's education show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, { task : demographicQuestions.ask_vis_expertise, //queston about experience using vis show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, //here are a two tasks that are to be shown before and after //visualisation blocks { task : networkTesting.tasks.introduceVis, //this will give the visualisation that's about to follow show : "before first", //a chance to introduce itself; shown whenever a new vis block : "v", //is about to be introduced. dataset : networkTesting.data.demoNetwork, //vis. should be introduced using the demo dataset estimated_duration : 20, repeats : {number : 2} //two "steps" of introduction }, { task : tasks.rateVis, //visualisations that's just been used can be rated show : "after last", //shown after the last use of each visualisation block : "v", estimated_duration : 15, }, //two tasks to be shown before the first tasks is shown and //whenever tasks are switched { task : announceTasks, //before the first task starts we let participants know how show : "before first", //tasks in general work block : "t*", //the * indicates that this is to be shown before the first viewer : null, //showing of any task (rather than first of each kind of task) estimated_duration : 10, bridging : true }, { task : announceSwitchTasks, //alert participant that tasks are about to change show : "between", //show between any(*) task switch block : "t*", viewer : null, estimated_duration : 10, bridging : true }, { task : tasks.introduceVis, //introduce the NL and its interactions show : "before", //at the start block : "s", //of the study dataset : data.lesMis, //use lesMis dataset for testing viewer : nodeLinkViewer, estimated_duration : 20, repeats : {number : 4} //four "steps" of introduction } ] });3d:T1562,design7 = ({ viewers : { which : [nodeLinkViewer1, matrixViewer1], how : "between" }, datasets : { //against two datasets; selections above determine the testing strategies which : [data.ingredients, data.usair97], how : "within" }, tasks : { which : [ { task : tasks.compareDegrees, repeats : { number : 6}, max_duration : 30, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 1}, estimated_duration : 30, }, { task : tasks.withinTwoHops, repeats : { number : 3}, max_duration : 100, train : { dataset : networkTesting.data.demoNetwork, with : "v", when : "first showing", repeats : 2}, estimated_duration : 120 }, ], how : "within" }, blocking : "vtd", block_tasks : [ { task : studyInformation.askConsent, //start by showing study info. and asks for participant show : "before", //these to attributes indicate that the task is to be shown block : "s", //before the main (s)tudy starts viewer : studyInformation.viewer, //it relies on showing some simple HTML dataset : studyInformation.data, //content repeats : {number : 1}, min_accuracy : 1, //indicates participant needs to agree (acc=1), otherwise study exits estimated_duration : 60 }, { task : announceDemographics, //alerts the user that demographic questions follow show : "before", //also shown at the beginning of (s)tudy but after block : "s", //the consent task viewer : null, //only the task instruction is shown (no other information below) estimated_duration : 10, bridging : true //this is just an annotation to indicate that }, //the task in purely informational { task : demographicQuestions.ask_age, //a question about age follows show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, { task : demographicQuestions.ask_education, //question about participant's education show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, { task : demographicQuestions.ask_vis_expertise, //queston about experience using vis show : "before", block : "s", viewer : null, //no other info shown other than question estimated_duration : 10 }, //here are a two tasks that are to be shown before and after //visualisation blocks { task : networkTesting.tasks.introduceVis, //this will give the visualisation that's about to follow show : "before first", //a chance to introduce itself; shown whenever a new vis block : "v", //is about to be introduced. dataset : networkTesting.data.demoNetwork, //vis. should be introduced using the demo dataset estimated_duration : 20, repeats : {number : 2} //two "steps" of introduction }, { task : tasks.rateVis, //visualisations that's just been used can be rated show : "after last", //shown after the last use of each visualisation block : "v", estimated_duration : 15, }, //two tasks to be shown before the first tasks is shown and //whenever tasks are switched { task : announceTasks, //before the first task starts we let participants know how show : "before first", //tasks in general work block : "t*", //the * indicates that this is to be shown before the first viewer : null, //showing of any task (rather than first of each kind of task) estimated_duration : 10, bridging : true }, { task : announceSwitchTasks, //alert participant that tasks are about to change show : "between", //show between any(*) task switch block : "t*", viewer : null, estimated_duration : 10, bridging : true }, { task : tasks.introduceVis, //introduce the NL and its interactions show : "before", //at the start block : "s", //of the study dataset : data.lesMis, //use lesMis dataset for testing viewer : nodeLinkViewer, estimated_duration : 20, repeats : {number : 4} //four "steps" of introduction } ] });3e:[] 31:{"id":"f248974d8477c61a","slug":"okoe-replica","title":"A Literate User Study Example","thumbnail":"3020e5a80b3dd1b8cf3404a89a2740264a3f89f995125631375f305663bca7a2","access_level":"public","create_time":"$D2024-09-16T08:44:02.589Z","update_time":"$D2024-12-10T13:08:45.049Z","view_time":null,"first_public_time":"$D2024-09-18T13:55:15.225Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"0eea6200fa793072","login":"tyr1981","name":"tyr1981","avatar_url":"https://avatars-next.observableusercontent.com/66f967001deee18aef0611cb3db26e44b3673352ea83d80f5c042b1d468d7b3a","tier":"starter_2024"},"version":336,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e7e6bc615f03bb8a","login":"tyr1981","name":"tyr1981","avatar_url":"https://avatars-next.observableusercontent.com/dfb74df6c39ed24d6e79e44cfc79136ab36233a17d1e111ef6dfd91050833ec8","tier":null}],"members":[{"type":"team","id":"0eea6200fa793072","login":"tyr1981","name":"tyr1981","avatar_url":"https://avatars-next.observableusercontent.com/66f967001deee18aef0611cb3db26e44b3673352ea83d80f5c042b1d468d7b3a","tier":"starter_2024","role":"editor"},{"type":"individual","id":"e7e6bc615f03bb8a","login":"tyr1981","name":"tyr1981","avatar_url":"https://avatars-next.observableusercontent.com/dfb74df6c39ed24d6e79e44cfc79136ab36233a17d1e111ef6dfd91050833ec8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"2479ec79deb66c52","slug":"visunit","title":"VisUnit","owner":{"id":"0eea6200fa793072","login":"tyr1981","name":"tyr1981"}},"type":"notebook","body":{"title":"A Literate User Study Example","cells":[{"id":0,"value":"# A Literate User Study Example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":" The purpose of this notebook is to illustrate how VisUnit can support *literate* user study design by replicating part of the study **\"Revisited Experimental Comparison of Node-Link and Matrix Representations\" (Okoe et al.)** We: \n- focus on its 10 topology tasks (original study included 15 tasks targeting both group and topology aspects)\n- we keep the narrative concise\n\n**The rest of the notebook reads as if written by Okoe et al.**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"We built on work by [Ghoniem et al.](https://ieeexplore.ieee.org/abstract/document/1382886) who conducted an empirical comparative evaluation between Node Link Diagrams (NL) and Adjacency Matrices (AM) as means to visualise network data. _Ghoniem et al._ evaluated:\n- synthetic data: networks combining three different densities (0.2, 0.4, 0.6) and three different sizes (20, 50, 100 nodes)\n- seven network overview and topology tasks (e.g., fiding the most connected node, finding a path between two nodes)\n- interactive visualisations\n\nThe goals of our extension were:\n- To explore how the two visualisations perform on **real-life and larger** networks. Networks studied by Ghoniem et al. were relatively small and very dense (as resulting from their definition of density)\n- To explore how a more extended yet realistic set of interactions impact performance and whether they can offset the size increase of the network\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"# 1. Materials","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"In preparation for the study we assembled [a network test-suite](https://observablehq.com/@tyr1918/networktestsuite) (explore for full details) containing:\n- Ghoniem et al.'s 9 types of synthetic networks\n- 2 new test networks and 2 training networks\n- 19 tasks, 7 inherited from Ghoniem et al. and 12 new ones. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"import {networkTesting} from \"@tyr1981/networktestsuite\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"**Materials use in this study can be browsed interactively** at the end of this section.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"//data used in the study, imported from our networkTesting suite\ndata = ({\n demo : networkTesting.data.demoNetwork,\n ingredients : networkTesting.data.ingredients,\n usair97 : networkTesting.data.usair97,\n lesMis : networkTesting.data.lesMis\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"$34","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"tasks = ({\n compareDegrees : networkTesting.tasks.compareDegrees,\n selectNeighbors : networkTesting.tasks.selectNeighbors,\n selectCommon : networkTesting.tasks.selectCommon,\n namedConnected : networkTesting.tasks.namedConnected,\n namedCommon : networkTesting.tasks.namedCommon,\n comparePaths : networkTesting.tasks.comparePaths,\n findPath : networkTesting.tasks.findPath,\n withinTwoHops : networkTesting.tasks.withinTwoHops,\n rememberConnection : networkTesting.tasks.rememberConnection,\n rememberNeighbors : networkTesting.tasks.rememberNeighbors,\n rateVis : networkTesting.tasks.rateVis,\n introduceVis : networkTesting.tasks.introduceVis\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"import {NodeLinkViewer,MatrixViewer} from \"@tyr1981/network-vis\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"nodeLinkViewer = new NodeLinkViewer(500, 500, true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"matrixViewer = new MatrixViewer(500, 500, true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"

\n**Other materials:** We imported a **consent task** from a *study-forms test-suite* our research group uses regularly and a **demographic-questions** *test-suite* with questions commonly asked as part of visualisation studies. We also created a few **functional** tasks to guide participants through the study: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"import {studyInformation} from \"@tyr1981/study-information\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"import {demographicQuestions} from \"@tyr1981/demographic-questions\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"announceDemographics = ({\n name : \"ann. demo\",\n description : \"Lets the participant know that a series of demographic questions are coming.\",\n question : \"We will now ask you a few questions about yourself.\",\n inputs : [],\n outputs : []\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"announceTasks = ({\n name : \"ann. tasks\",\n description : \"Lets the participant know that a series of tasks are upcoming.\",\n question : \"You will now use the visualisation to answer different questions about the data. For each question you will get a chance to practice it first. We may ask the same question multiple times, about different data.\",\n inputs : [],\n outputs : []\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"announceSwitchTasks = ({\n name : \"ann. sw tasks\",\n description : \"Lets the participant know that the tasks will be switched.\",\n question : \"We will move on to a different task now. Again, you will be able to practice it first.\",\n inputs : [],\n outputs : []\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"

\n**Browse materials** as combinations of viewers, datasets and tasks. Tasks typically have multiple repeat (instantiations of generic tasks onto specific dataset elements). You can advance through those repeats and check their true answers.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"viewof viewerName = Inputs.radio([\"NodeLink\", \"Matrix\"], {\n label: \"Select a viewer\",\n value: \"NodeLink\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"viewof datasetName = Inputs.radio(Object.values(data).map( d => d.name), {\n label: \"Dataset\",\n value: Object.values(data)[0].name\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof taskName = Inputs.select(Object.values(tasks).map( t => t.name), {\n label : \"Task\",\n value: Object.keys(tasks)[0]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"# 2. Study design","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"We conducted the study online with Amazon Mechanical Turk workers. We wanted to **keep the study short** as online turkers tend not to engage with long studies. \n\nThis had to be balanced against generalisability and rigour. Speficically, we wanted participants to do:\n- multiple repeats of each task/dataset combination and\n- at least one training repeat before each task\n\nWe hoped to balance these competing requirements to **study sessions at between 10-15 minutes. **\n\nTo arrive at an optimal design **we underwent multiple study-design iterations**. We show these below as fully explorable study alterantives. Choose an iteration to see a narratives justifying its emergence and see a schematic as well as experience how it would present to participants.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"viewof designIteration = Inputs.select(designIterations.map( (i1,i2) => (i2+1)), {\n label : \"Design iteration\",\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"md `

${designIterations[designIteration-1].discussion}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"**Delivery plan:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"{\n updateStudyViewer;\n\n let d = document.createElement(\"div\");\n d.style = \"overflow : scroll\";\n d.appendChild(studyViewer.draw());\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"**Participant view**:","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"viewof participantGroup = Inputs.select(studySequences.map ( (s,i) => i+1), {\n label : \"Participant group:\",\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"studydiv","database":"$undefined"},{"id":280,"value":"## 3. Study delivery\n\nThe 4 sub-studies for each of the two participant groups were stored for dissemination at the links. Their results are stored in a database and can be seen in the next section.\n- [Study 1, NL](https://uduna1981.github.io/okoe_study1_nl.html)\n- [Study 1, AM](https://uduna1981.github.io/okoe_study1_am.html)\n- [Study 2, NL](https://uduna1981.github.io/okoe_study2_nl.html)\n- [Study 2, AM](https://uduna1981.github.io/okoe_study2_am.html)\n- [Study 3, NL](https://uduna1981.github.io/okoe_study3_nl.html)\n- [Study 3, AM](https://uduna1981.github.io/okoe_study3_am.html)\n- [Study 4, NL](https://uduna1981.github.io/okoe_study4_nl.html)\n- [Study 4, AM](https://uduna1981.github.io/okoe_study4_am.html)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":298,"value":"## 4. Results","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"Participant responses, time and accuracy:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":300,"value":"getdata ={\n const data = await getData(apiURL);\n let studyData = data.filter( d => \"study\" in d);\n\n let participants = new Object();\n studyData.map( d => {\n let p = null;\n if (d.data.sessionId in participants)\n p = participants[d.data.sessionId];\n else{\n p = {\n study : d.study,\n participant : d.data.sessionId,\n };\n participants[d.data.sessionId] = p;\n }\n\n let qn = Object.keys(p).length-1;\n\n p[\"q\"+qn+\"_time\"] = d.data.time;\n p[\"q\"+qn+\"_accuracy\"] = d.data.accuracy;\n d.data.response.map( (r,i) => p[\"q\"+qn+\"_response\" + (i+1)] = r); \n });\n \n return Inputs.table(Object.values(participants));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"_Result analysis not included. _","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"

\n**Design specs, iterations and justifications:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"$3a","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"$3b","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"$3c","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"$3d","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"**Other supporting computation:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"visUnit.previewTask(document.getElementById(\"preview\"), \n Object.values(networkTesting.tasks).find( t => t.name == taskName), \n viewerName == \"NodeLink\" ? nodeLinkViewer : matrixViewer,\n Object.values(networkTesting.data).find ( d => d.name == datasetName))","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"studyViewer = new StudyViewer(studySequences, () => mutable updateStudyViewer = true,true);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"studySequences = visUnit.createStudySchedules(designIterations[parseInt(designIteration)-1].design)\n//studySequences = visUnit.createStudySchedules(designIterations[6].design) //3 is first","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"visUnit.startStudy(document.getElementById(\"studydiv\"), \n studySequences[participantGroup-1], //one of the study sequences\n (b,i) => {\n let url = apiURL;\n let data = {\n study : \"okoe_study\" + (designIteration-3) + (participantGroup == 1 ? \"_NL\" : \"_AM\"),\n data : b\n };\n postData(url, data);\n }); //callback to store results (see below)\n\n/*visUnit.startStudy(document.getElementById(\"studydiv\"), \n studySequences[1], //one of the study sequences\n (b,i) => {\n let url = apiURL;\n let data = {\n study : \"okoe_study4_AM\",\n data : b\n };\n postData(url, data);\n }); //callback to store results (see below)*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"nodeLinkViewer1 = new NodeLinkViewer(500, 500, true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"matrixViewer1 = new MatrixViewer(500, 500, true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"mutable updateStudyViewer = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"import {VisUnit,StudyViewer} from \"@tyr1981/visunit\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"visUnit = new VisUnit();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"### Infrastructure to save and get results","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":208,"value":"apiURL = \"https://observable-api-vv72p3e57a-nw.a.run.app/data/\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"async function postData(apiUrl, data) {\n // Check if data is a valid JSON object\n if (typeof data !== \"object\" || data === null) {\n throw new Error(\"Data must be a valid JSON object\");\n }\n\n try {\n const response = await fetch(apiUrl, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\"\n },\n body: JSON.stringify(data)\n });\n\n if (!response.ok) throw new Error(response.statusText);\n\n const responseMsg = await response.json();\n return responseMsg;\n } catch (error) {\n console.error(\"Error:\", error);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"async function getData(apiUrl) {\n try {\n const response = await fetch(apiUrl, {\n headers: {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\"\n },\n method: \"GET\",\n mode: \"cors\"\n });\n\n if (!response.ok) throw new Error(response.statusText);\n\n const data = await response.json();\n return data;\n } catch (error) {\n console.error(\"Error:\", error);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"test = {\n let someData = {radu : \"tests\"};\n const apiResponse = await postData(apiURL, someData);\n return apiResponse.message; // POST message from the API\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1","titling":"auto"}} 32:"$31:body"