29:null 2a:["$","title",null,{"children":"Visualization of Dimension Reduction Using Gamification | Jorden Smyth Projects | Observable"}] 2f:T5e7,## MDS Game Instructions - Start by clicking the "Start/Reset" Button - Drag and drop the animals from the word bank onto the graph where you think they will fit best. There is no right answer, but try to place similar animals together based on their features. - The animals that are already placed are meant to help you get started, but you can adjust them as needed later on. - We recommend starting on "Easy" difficulty and placing the two remaining points onto the mostly complete dimension reduction. ### Goal: Reduce Stress - When you have place all the animals, click "Check Reduction". This will show you the total "Stress" or error of your reduction, as well as which points are causing more error than others. Your goal is to reduce the Stress of the dimension reduction as much as possible. - You cannot reduce the stress to zero, but below 0.15 is good, and below 0.1 - 0.07 is great! ### Improving your reduction: - Click the "Check Reduction" button to show which animals are causing more Stress than others based on color. - Double click on an animal point to see how much error it has with every other point. - Click the "Hint," button to get a suggestion on how to adjust some points on your reduction. ### Changing Difficulty and Animals: - Once you understand the mechanics, feel free to try other difficulties with the Increase/Decrease difficulty buttons and experiment with new animals using the "New Animals" button. - Make sure to click "Start/Reset" after selecting new animals.30:T24a4,chart = { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("border", "1px solid lightgrey"); const rightbar = svg .append("rect") .attr("width", width / 5 - 10) .attr("height", 2 * height / 3 - 5) .attr("x", width * 4 / 5) .attr("y", 10) .style("fill", "lightgray") .style("stroke", "black"); svg .append("text") .text("Word Bank") .attr("x", 4 * width / 5 + 10) .attr("y", 30) .attr("text-decoration", "underline"); const results_box = svg.append("rect") .attr("width", width / 5 - 10) .attr("height", height / 3 - 25) .attr("x", width * 4 / 5) .attr("y", 2 * height / 3 + 15) .style("fill", "lightgray") .style("stroke", "black") svg .append("text") .text("Results") .attr("x", 4 * width / 5 + 10) .attr("y", 2 * height / 3 + 35) .attr("text-decoration", "underline") .attr("font-weight", "bold"); svg .append("text") .text("Stress: " + updateStress()) .attr("x", 4 * width / 5 + 10) .attr("y", 2 * height / 3 +65); svg .append("text") .text("Goal Stress: " + good_stress) .attr("x", 4 * width / 5 + 10) .attr("y", 2 * height / 3 +95); svg .append("text") .text("Checks Used: " + checkCount) //) .attr("x", 4 * width / 5 + 10) .attr("y", 2 * height / 3 +125); svg .append("text") .text("Hints Used: " + hintCount) //) .attr("x", 4 * width / 5 + 10) .attr("y", 2 * height / 3 +155); svg .append("text") .text("Difficulty: " + difficultyText) //) .attr("x", 4 * width / 5 + 10) .attr("y", 2 * height / 3 +185); const margin = ({left: 10, top: 10, right: 10, bottom: 10}) const canvas = svg .append("rect") .attr("width", (width * 4 / 5) - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom) .attr("stroke", "black") .attr("fill", "white") .attr("x", margin.left) .attr("y", margin.top); //--------------------------------------------------------- // Create word bank with labels for users to place //--------------------------------------------------------- const user_labels =svg.append("g") .attr('class', 'labels') .selectAll("text") .data(user_graph.nodes) .join("text") .text(n => n.Name) .attr("dx", 8) .attr("dy", ".35em") .attr('id', (d, i) => {return "text_" + i}) .attr('x', n => n.fx) .attr('y', n => n.fy) .call(d3.drag()) .on('click', updateIndividualColor); const user_nodes = svg .append("g").attr('class', 'nodes') //Map nodes to text Marks .selectAll("circle") .data(user_graph.nodes) .join("circle") //CHANNELS .attr("r", 7) .attr('id', (d, i) => {return "circle_" + i}) .attr('cx', n => n.fx) .attr('cy', n => n.fy) .style('border', '1px solid black') .style('fill', (n, i) => updateColor(i)) .call(d3.drag()) .on('click', updateIndividualColor); //======================================================= // Hint Arrows //===================================================== const hint_points = hint_graph.nodes.toSorted((a,b) => Math.sqrt(a.vx**2 + a.vy**2 ) - Math.sqrt(b.vx**2 + b.vy**2 )).slice(-3); let arrow_points = []; for (let i = 0; i < 3; ++i) { let tmp = user_graph.nodes.find((e) => e.Name === hint_points[i].Name); arrow_points.push({ x: tmp.fx, y: tmp.fy, vx: hint_points[i].vx * 5, vy: hint_points[i].vy * 5, index: hint_points[i].index }); } const m1 = 4; const m2 = m1 / 2; const arrowheadBlack = svg .append('defs') .append('marker') .attr('id', 'arrow') .attr('viewBox', [0, 0, m1, m1]) .attr('refX', m2) .attr('refY', m2) .attr('markerWidth', m1) .attr('markerHeight', m1) .attr('orient', 'auto-start-reverse') .append('path') .attr('d', d3.line()([[0, 0], [0, m1], [m1, m2]])) .attr('stroke', 'black') .attr('fill', 'black'); const arrowheadNone = svg .append('defs') .append('marker') .attr('id', 'arrowClear') .attr('viewBox', [0, 0, m1, m1]) .attr('refX', m2) .attr('refY', m2) .attr('markerWidth', m1) .attr('markerHeight', m1) .attr('orient', 'auto-start-reverse') .append('path') .attr('d', d3.line()([[0, 0], [0, m1], [m1, m2]])) .attr('stroke', 'none') .attr('fill', 'none'); const hint_arrow0 = svg .append("path") .attr('class', 'arrow') .attr('d', d3.line()([[arrow_points[0].x, arrow_points[0].y], [arrow_points[0].x + arrow_points[0].vx, arrow_points[0].y + arrow_points[0].vy]])) .attr('stroke', updateHint()) .attr('stroke-width', 3) .attr('marker-end', updateHintArrow()) .attr('id', 'arrow_0'); const hint_arrow1 = svg .append("path") .attr('class', 'arrow') .attr('d', d3.line()([[arrow_points[1].x, arrow_points[1].y], [arrow_points[1].x + arrow_points[1].vx, arrow_points[1].y + arrow_points[1].vy]])) .attr('stroke', updateHint()) .attr('stroke-width', 3) .attr('marker-end', updateHintArrow()) .attr('id', 'arrow_1'); const hint_arrow2 = svg .append("path") .attr('class', 'arrow') .attr('d', d3.line()([[arrow_points[2].x, arrow_points[2].y], [arrow_points[2].x + arrow_points[2].vx, arrow_points[2].y + arrow_points[2].vy]])) .attr('stroke', updateHint()) .attr('stroke-width', 3) .attr('marker-end', updateHintArrow()) .attr('id', 'arrow_2'); //============================================================================ // UPDATE CHART FUNCTIONS //========================================================================= //node loctions function updateChart() { user_nodes.attr("cx", (v) => v.fx).attr("cy", (v) => v.fy); user_labels.attr("x", (v) => v.fx).attr("y", (v) => v.fy); } svg.node().updateChart = updateChart; function updateColor(i) { if (checked == true) { return cScale(check_points[0][i].DiffSumNormal); } else { return "blue"; } } function updateStress() { if (checked == true) { return check_points[1]; } else return "" } function updateIndividualColor(event) { mutable maxSingleDiff = 0; if (checked == false) { return; } var selectedID = d3.select(this).attr('id').split("_")[1]; var name = user_graph.nodes[selectedID].Name; console.log(name) var target_diffs = getIndividualDiffs(selectedID); console.log(selectedID) console.log(target_diffs) target_diffs.forEach( (e, i) => { d3.select('#circle_' + i).style('fill', cScaleIndividual(e.Diff)); }) d3.select("#circle_" + selectedID).style('fill', 'black'); } function updateHint() { if (checked == false) { return 'none'; } if (mutable hint_bools === true) { return 'black'; } else { return 'none'; } } function updateHintArrow() { if (checked == false) { return 'url(#arrowClear)'; } if (mutable hint_bools === true) { return 'url(#arrow)'; } else { return 'url(#arrowClear)'; } } //--------------------------------------------------------- // Call Drag functions on user nodes and labels //--------------------------------------------------------- function setUpDrag(svg, nodes, labels) { // D3 Drag API const drag = d3 .drag() .on("start", dragStart) .on("drag", dragging) .on("end", dragEnd); //call drag on nodes and labels nodes.call(drag); labels.call(drag); function dragStart(event) { d3.select(this).raise(); nodes.attr("cursor", "grabbing"); } function dragging(event, d) { event.subject.fx = event.x > (4 * width / 5 - 20) ? (4 * width / 5 - 20) : (event.x < 20 ? 20 : event.x); event.subject.fy = event.y > (height - 20) ? (height - 20) : (event.y < 20 ? 20 : event.y); user_graph.links.forEach(link => { if (link.target == event.subject || link.source == event.subject) { link.distance = user_distance(link.source, link.target) } }) if (checked == false) { updateChart(); return } var selectedID = d3.select(this).attr('id').split("_")[1]; const c = d3.select('#circle_' + selectedID); var target_diffs = getIndividualDiffs(selectedID) target_diffs.forEach( (e, i) => { d3.select('#circle_' + i).style('fill', cScaleIndividual(e.Diff)); }) d3.select("#circle_" + selectedID).style('fill', 'black'); //UPDATE RELATIVE COLORS HERE c.style('fill', 'blue'); updateChart(); } function dragEnd(event) { nodes.attr("cursor", "grab"); var selectedID = d3.select(this).attr('id').split("_")[1]; arrow_points.forEach( (n, i) => { if (selectedID == n.index) { d3.select('#arrow_' + i).attr('stroke', 'none').attr('marker-end', 'url(#arrowClear)') } }) updateChart(); } } setUpDrag(svg, user_nodes, user_labels); return svg.node(); }31:T50f,function check_function() { //check_button; // create array of differences of link distances var diffs = [] user_graph.links.forEach( (e, i) => { diffs.push({source: e.source.Name, target: e.target.Name, diff: Math.abs(e.distance - data_graph.links[i].distance)}) }) // console.log(diffs) // ============================================ // create array of objects: diff_sums = {animal name, sum of differences, normalize sum of differences} //=============================================== var diff_sums = [] user_graph.nodes.forEach( (e) => { var temp_sum = 0 diffs.forEach( (diff) => { if (e.Name == diff.source || e.Name == diff.target) { temp_sum += diff.diff } }) diff_sums.push({Name: e.Name, DiffSum: temp_sum, DiffSumNormal: temp_sum / user_data.length }) }) // ============================================ // Calculate Stress //=============================================== var diff_sum = 0; diffs.forEach( (diff) => { diff_sum += Math.pow(diff.diff, 2); }) var total_sum = 0; data_graph.links.forEach( (dist) => { total_sum += Math.pow(dist.distance, 2); }) var stress = (diff_sum / total_sum).toFixed(3); return [diff_sums, stress]; }32:T58d,//get actual positions and distances of data reduced (using user data calc), compare to "data_graph.links" //calculate stress from that good_stress = { reset_button var sim_links = [] data_reduced.forEach((src, isrc) => data_reduced.forEach((dst, idst) => { if (isrc < idst) sim_links.push({ source: src, target: dst, distance: good_stress_distance(src, dst) }); }) ); console.log("Sim Links: ") console.log(sim_links) var diffs = [] sim_links.forEach( (e, i) => { diffs.push({source: e.source.Name, target: e.target.Name, diff: Math.abs(e.distance - data_graph.links[i].distance)}) }) console.log("Diffs: " ) console.log(diffs) var diff_sums = [] data_reduced.forEach( (e) => { var temp_sum = 0 diffs.forEach( (diff) => { if (e.Name == diff.source || e.Name == diff.target) { temp_sum += diff.diff } }) diff_sums.push({Name: e.Name, DiffSum: temp_sum, DiffSumNormal: temp_sum / data_reduced.length }) }) console.log(diff_sums) var diff_sum = 0; diffs.forEach( (diff) => { console.log(diff) diff_sum += Math.pow(diff.diff, 2); }) console.log("Diff Sum: " + diff_sum) var total_sum = 0; data_graph.links.forEach( (dist) => { total_sum += Math.pow(dist.distance, 2); }) console.log("Total Sum: " + total_sum) return (diff_sum / total_sum).toFixed(3); }33:[{"id":"b2aadad568e6583847f6ed7e3dcb2b644676df4409bb947666e25c1c5f09bee1dfa1f852b74d941869a09f8246ea937270f61663dcdb74931103830836c4cc33","href":"https://static.observableusercontent.com/files/b2aadad568e6583847f6ed7e3dcb2b644676df4409bb947666e25c1c5f09bee1dfa1f852b74d941869a09f8246ea937270f61663dcdb74931103830836c4cc33","name":"Animal_Data_Andromeda-1.csv","type":"text/csv","lastModified":1740612611842.662,"size":9434}] 2d:{"id":"f9ae0a27e72ab784","slug":null,"title":"Visualization of Dimension Reduction Using Gamification","thumbnail":"3429a968dd4aae10d3ba1a5cbc9e358ada318247c8327d80fc70369887bad284","access_level":"public","create_time":"$D2025-02-26T23:10:16.471Z","update_time":"$D2025-02-26T23:35:06.885Z","view_time":null,"first_public_time":"$D2025-02-26T23:33:52.152Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4039400a84aa0b77","login":"jorden-smyth-projects","name":"Jorden Smyth Projects","avatar_url":"https://avatars-next.observableusercontent.com/2bc276efcbd1d295964644b5ae9ad754880eca1d17152f4286c7876bed626416","tier":"starter_2024"},"version":198,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b537a354a9ec8828","login":"jdsmyth","name":"Danny","avatar_url":"https://avatars-next.observableusercontent.com/2a8ea771ec3c383eeb83e5e68229e618d73b3b3e09f09e79533a988c11b0aa8f","tier":null}],"members":[{"type":"individual","id":"b537a354a9ec8828","login":"jdsmyth","name":"Danny","avatar_url":"https://avatars-next.observableusercontent.com/2a8ea771ec3c383eeb83e5e68229e618d73b3b3e09f09e79533a988c11b0aa8f","tier":null,"role":"editor"},{"type":"team","id":"4039400a84aa0b77","login":"jorden-smyth-projects","name":"Jorden Smyth Projects","avatar_url":"https://avatars-next.observableusercontent.com/2bc276efcbd1d295964644b5ae9ad754880eca1d17152f4286c7876bed626416","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Visualization of Dimension Reduction Using Gamification","cells":[{"id":0,"value":"# Visualization of Dimension Reduction Using Gamification\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"legend({\n color: cScale,\n title: \"Total Error by point ( Least --> Most)\",\n ticks: 0,\n location: \"top\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"legend({\n color: cScaleIndividual,\n title: \"Individual Error (Too Close -> Correct -> Too Far)\",\n ticks: 0,\n location: \"top\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"viewof check_button = Inputs.button(\"Check Reduction\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"viewof hint_button = Inputs.button(\"Hint\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":" viewof reset_button = Inputs.button(\"Start/Reset\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"viewof increase = Inputs.button(\"Increase Difficulty\"); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewof decrease = Inputs.button(\"Decrease Difficulty\"); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"viewof randomize = Inputs.button(\"New Animals\"); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"After randomizing the animals, click reset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"## Original Data and Distances\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"data = {\n // reset the data when clicked\n // Load the data table\n var data = await FileAttachment(\"Animal_Data_Andromeda-1.csv\").csv({ typed: true });\n data.attrs = data.columns.slice(1); // the quantitative attributes in the data table\n data.stdevs = {}; // zscore normalization factors for each attribute, for Distance()\n data.attrs.forEach((a) => (data.stdevs[a] = d3.deviation(data, (r) => r[a])));\n return data;\n \n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"data_reduced = {\n randomize;\n var data_red = data.slice(0, 48);\n d3.shuffle(data_red, 0 , 48);\n return data_red.slice(0, 12); //return this for random animlas\n //return data.slice(0, 12); //return this for standard animals\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"// Distance metric, computes normalized multi-dimensional distance between 2 rows in the data table.\n// r1, r2 = references to data table rows.\nfunction Distance(r1, r2) {\n return d3.sum(data.attrs.map(attr =>\n\t\t\tMath.abs(r1[attr] - r2[attr]) / data.stdevs[attr] )); // L1\n//Manhattan Distance\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"data_graph = {\n //randomize;\n // Create completely connected graph with distances\n //src = source, isrc = index of source\n //dst = destination, idst = index of destination\n //reset_button\n var edges = [];\n data_reduced.forEach((src, isrc) =>\n data_reduced.forEach((dst, idst) => {\n if (isrc < idst)\n edges.push({ source: src, target: dst, distance: Distance(src, dst) });\n })\n );\n return { nodes: data_reduced, links: edges };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"simulation = {\n var sim = d3\n .forceSimulation(data_graph.nodes)\n .force(\n \"distances\",\n d3\n .forceLink(data_graph.links)\n .distance( link => link.distance * 7)\n )\n .force(\n 'center',\n d3\n .forceCenter((2 * width / 5), (height / 2)));\n\n\n //sim.tick(100);\n //invalidation.then(() => sim.stop()); //Terminates old simulation before this cell is re-run.\n //sim.stop();\n return sim;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"### Generate Game Points and Graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"//initialize an array of animal objects with X and Y that the user will set\nuser_data = {\n reset_button;\n increase;\n decrease;\n randomize;\n var user_data = []\n let count = 0;\n for (let i = 0; i < num_set_points; i++) {\n user_data.push({Name: data_reduced[i].Name, fx: data_reduced[i].x, fy: data_reduced[i].y, set: true})\n }\n for (let i = num_set_points; i < data_reduced.length; i++) {\n user_data.push({Name: data_reduced[i].Name, fx: 4*width/5 + 10, fy: 50 + 30 * count, set: false});\n count++;\n}\n return user_data;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"function user_distance(r1, r2) {\n //return (Math.abs(r1.x - r2.x) + Math.abs(r1.y - r2.y)) / 7 //Manhattan\n return Math.sqrt(Math.pow(r1.fx - r2.fx, 2) + Math.pow(r1.fy - r2.fy, 2)) / 7; //Euclidean\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"user_graph = {\n check_button;\n hint_button;\n var edges = [];\n user_data.forEach((src, isrc) =>\n user_data.forEach((dst, idst) => {\n if (isrc < idst)\n edges.push({ source: src, target: dst, distance: user_distance(src, dst) });\n })\n );\n return { nodes: user_data, links: edges };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"## Stress Function","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"//2. stress function\nfunction stress(distHD, dist2D) {\n let diff_sum = 0\n let total_sum = 0\n for (let i = 0; i < distHD.length; i++){\n for (let j = 0; j < distHD[0].length; j++){\n let x = distHD[i][j]\n let y = dist2D[i][j]\n diff_sum += (x-y)**2\n total_sum += x**2\n }\n }\n return diff_sum/total_sum\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"## Buttons","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"### Check Reduction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"mutable check_points = {\n check_button\n return check_function()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"mutable checked = false;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"mutable checkCount = 0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"{\n check_button;\n var sum = 0;\n user_data.forEach( (node) => {\n if (node.fx < (4 * width / 5)) {\n sum += 1;\n }\n })\n if (sum == user_data.length) {\n mutable checked = true;\n mutable checkCount += 1;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"{\n reset_button;\n check_button;\n mutable hint_bools = false;\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"## Continuous Update","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"function getIndividualDiffs(selectedID) {\n \n \n var target_diffs = [];\n var name = user_graph.nodes[selectedID].Name;\n user_graph.links.forEach( (e, i) => {\n var diff = e.distance - data_graph.links[i].distance;\n\n if (target_diffs.length == selectedID) {\n target_diffs.push({Name: name, Diff: 0});\n }\n if (e.source.Name == name) {\n target_diffs.push({Name: e.target.Name, Diff: diff});\n\n }\n else if (e.target.Name == name) {\n target_diffs.push({Name: e.source.Name, Diff: diff});\n }\n })\n \n if (target_diffs.length == selectedID) {\n target_diffs.push({Name: name, Diff: 0});\n }\n\n return target_diffs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"### Hint","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"hint_graph = {\n hint_button;\n \n var hint_data = [];\n for (let i = 0; i < user_data.length; i++) {\n hint_data.push({Name: user_data[i].Name, x: user_data[i].fx, y: user_data[i].fy})\n }\n \n var dists = [];\n data_graph.links.forEach( (link) => {\n dists.push(link.distance);\n })\n console.log(dists);\n\n var edges = [];\n var count = 0;\n hint_data.forEach((src, isrc) =>\n hint_data.forEach((dst, idst) => {\n if (isrc < idst) {\n edges.push({ source: src, target: dst, distance: dists[count] });\n count++;\n }\n })\n );\n\n return {nodes: hint_data, links: edges}\n}\n\n\n\n//run simulation on the selected points\n//choose point with most error (hightest velocity?)\n//color other points based on how much error they contribute\n//suggest a direction to move that point\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"\nhint_simulation = {\n hint_button;\n var hint_sim = d3\n .forceSimulation(hint_graph.nodes)\n .force(\n \"distances\",\n d3\n .forceLink(hint_graph.links)\n .distance(link => link.distance * 7)\n )\n\n hint_sim.tick(1);\n hint_sim.stop();\n return hint_sim;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"mutable hint_bools = false;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"{\n hint_button;\n var sum = 0;\n user_data.forEach( (node) => {\n if (node.fx < (4 * width / 5)) {\n sum += 1;\n }\n })\n if (sum == user_data.length) {\n mutable hint_bools = true;\n mutable hintCount += 1;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"mutable hintCount = 0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"### Reset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"{\n reset_button;\n increase;\n decrease;\n mutable checked = false; \n mutable checkCount = 0;\n mutable hintCount = 0;\n mutable hint_bools = false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"### Difficulty","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"mutable difficulty = 1;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"{\n increase;\n if (mutable difficulty < 3) {\n mutable difficulty += 1;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"{\n decrease;\n if (mutable difficulty > 0) {\n mutable difficulty -= 1;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"difficultyText = {\n if (difficulty == 0) {\n return \"Easy\";\n }\n if (difficulty == 1) {\n return \"Moderate\";\n }\n if (difficulty == 2) {\n return \"Hard\";\n }\n if (difficulty == 3) {\n return \"Extra Hard\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"mutable num_set_points = {\n if (difficulty == 0) {\n return 10;\n }\n if (difficulty == 1) {\n return 6;\n }\n if (difficulty == 2) {\n return 3;\n }\n if (difficulty == 3) {\n return 0;\n }\n return 12;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"height = 620","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"## Progress Tracking","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"Calculate Good Stress\nDisplay It\nShow and Update progress tracker","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":109,"value":"function good_stress_distance(r1, r2) {\n //return (Math.abs(r1.x - r2.x) + Math.abs(r1.y - r2.y)) / 7 //Manhattan\n return Math.sqrt(Math.pow(r1.x - r2.x, 2) + Math.pow(r1.y - r2.y, 2)) / 7; //Euclidean\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"stress_progress = {\n reset_button\n return []\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"stress_progress_x = {\n check_button\n hint_button\n return stress_progress.map((n, i) => i)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"{\n if (!checked) {\n return\n }\n check_button\n hint_button\n stress_progress.push(check_points[1])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"marginProgress = ({ top: 40, right: 30, bottom: 40, left: 60 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"pathString = (T, Y, tscale, yscale) =>\n d3.line()(T.map( (t, i) => [tscale(t), yscale(Y[i])] ))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"## Color Scale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"//cScale = d3.scaleLinear([0, width/(user_data.length * 6), width /(user_data.length * 3)], [\"#009e73\", \"#f0e442\", \"#d55e00\"]);\ncScale = d3.scaleLinear([0, width /(user_data.length * 4)], [\"lightgrey\", \"purple\"]);\n\n//cScale = d3.scaleLinear(d3.schemeRdYlGn);\n// change scale to be based on the max error for any point? Then it would highlight more clearly best to worst for all","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"cScaleIndividual = d3.scaleLinear([-width /(user_data.length * 3), 0, width /(user_data.length * 3)], [\"blue\", \"lightgrey\", \"red\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"## User Study","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"mutable maxSingleDiff = 0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"mutable maxSingleDiffName = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"maxTotalDiffName = {\n check_button;\n var temp = 0;\n var name = null;\n check_points[0].forEach( (e, i) => {\n if (e.DiffSumNormal > temp) {\n temp = e.DiffSumNormal;\n name = e.Name;\n }\n })\n return name;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"## Imports ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"import {legend} from '@d3/color-legend';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"import { drawAxis } from \"@chrislnorth/simple-axis-drawing\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"