The avatar for @rdjianu
Radu Jianu
Public
Edited
Apr 24
Fork of Case study: Test Suite for Network Visualisation
Importers
1 star
15
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
networkTesting
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Type Markdown, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
findNode_ = {

let computeAccuracy = (network, label) => (response) => {
if (response.length != 1) //only one node should be selected
return 0;
let nodeIndex = network.nodes.findIndex( n => n.label == label);
if (response[0] == nodeIndex)
return 1;
else return 0;
}

return {
name : "findNode",
question: "Find and select the node labeled $1.",
description: "Given the label of a node, the participant should find and select it.",
params : [{type : "question"}],
responses : [
{type : "vis", state : "SelectedNodes"}],
instances : [
{data : lesMis,
instances : [
{args : ["Myriam"], accuracy : computeAccuracy(lesMis, "Myriam")},
{args : ["Napoleon"], accuracy : computeAccuracy(lesMis, "Napoleon")}
]}
]
}
}
Insert cell
Insert cell
Insert cell
nodesConnected_ = {

//method to compute the accuracy of a nodesConnected answer
let computeAccuracy = (network, nodes) =>
(response) => {
let connected = areConnected(network,nodes[0],nodes[1]);
if ((connected && response[0] === "yes") ||
(!connected && response[0] === "no"))
return 1;
else
return 0;
};

return {
name : "nodesConnected",
question : "Are the two highlighted nodes directly connected?",
description : "Given two selected nodes the participant decides if they are connected.",
params : [{ type : "vis", state : "HighlightedNodes"}],
responses : [ {type : "select", options : ["select","yes","no"]}],
instances : [
{ data : lesMis,
instances : [
{ args : [[27,58]], accuracy : computeAccuracy(lesMis, [27,58]) },
{ args : [[23,43]], accuracy : computeAccuracy(lesMis, [23,43]) },
{ args : [[35,38]], accuracy : computeAccuracy(lesMis, [35,38]) }]},
{ data : ingredients,
instances : [
{ args : [[102,67]], accuracy : computeAccuracy(ingredients, [102,67]) },
{ args : [[173,184]], accuracy : computeAccuracy(ingredients, [173,184]) },
{ args : [[111,123]], accuracy : computeAccuracy(ingredients, [111,123]) }]}
]
}
}

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
networkTesting = ({
data : testData,
tasks : { nodeCount : nodeCount,
edgeCount : edgeCount,
mostConnected : mostConnected,
compareDegrees : compareDegrees,
findNode : findNode,
nodesConnected : nodesConnected,
namedConnected : namedConnected,
selectNeighbors : selectNeighbors,
areNeighbors : areNeighbors,
commonNeighbor : commonNeighbor,
selectCommon : selectCommonNeighbors,
namedCommon : namedCommonNeighbor,
withinTwoHops : withinTwoHops,
findPath : findPath,
comparePaths : comparePaths,
rememberConnection : rememberConnection,
rememberNeighbors : rememberNeighbors,
rateVis : rateVis,
introduceVis : introduceVis
}
})
Insert cell
testData = ({demoNetwork : demoDataset,
lesMis : lesMis,
ingredients : ingredients,
usair97 : usair97,
ecoli : ecoli,
weavers : weavers,
dblp : dblp,
ghoniem1 : ghoniem[0],
ghoniem2 : ghoniem[1],
ghoniem3 : ghoniem[2],
ghoniem4 : ghoniem[3],
ghoniem5 : ghoniem[4],
ghoniem6 : ghoniem[5],
ghoniem7 : ghoniem[6],
ghoniem8 : ghoniem[7],
ghoniem9 : ghoniem[8]});
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
visUnit.previewTask(document.getElementById("studydiv"),
Object.values(networkTesting.tasks).find( t => t.name == tasksview),
nodeLinkViewer,
Object.values(networkTesting.data).find ( d => d.name == instanceview))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
graphEdgeCount = (g) => g.edges.length
Insert cell
graphNodeCount = (g) => g.nodes.length
Insert cell
Insert cell
Insert cell
import {orderGraph} from "@john-guerra/reorder-js"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
decarbonisationTask = ({
name : "decarbonise areas",
question : "The visualisation shows the geographic distribution of 8 variables relevant to decarbonisation planning in the $0 area. Assume you wanted to develop a socially just transition plan: pick a technology and choose 5 areas you would like to prioritise its deployment in. Explain your reasoning.",
params : [
{type : "vis", state : "Region"},
{type : "question"}],
responses : [
{type : "vis", state : "SelectAreas"},
{type : "select",
options : ["insulatio",
"solar",
"heat pump"],
label : "Technology"},
{type : "long text", label : "Reflect"},
{type : "vis", state : "InteractionLog"}],
});
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more