2f:Ta79,md`#### Explanation: The visualization chosen for this problem is an interactive small multiples line charts. Inside each cell, we have a multiple line chart where the lines represent the direction of X, Y, Z axes of the IMU data (ex. Acceleration in the x (blue), y (orange), and z (red) directions). Color is used to encode these directions. The x-axis represents the time and the y-axis represents the magnitude. Time is represented in percentages. Since we are aggregating results from several users (49 users) who finished the recipes at different times, we are representing them in terms of percentages to be able to aggregate the data. To facilitate the data analysis, we provide multiple ways to interact with the visualization: - Select the IMU sensor: Accelerometer, Gyroscope, and Magnetometer. - Select the aggregation method: Mean, Median, Min, and Max. - Hovering on the legend categories (direction of X, Y, Z axes) in the legend will highlight the corresponding line chart in all the charts. It can help to find trends. - Users can use the slider to zoom in on the line charts. They can also use the slider to move forward and backward in time, by doing this all the visualization changes accordingly. **Question: Are there any relationships between IMU info and the recipe type? Did users who perform complex recipes have high imu info variances?** We categorized the recipes into three levels of complexity: Hard, medium, and easy. Hard recipes: Pizza and Brownie. Medium recipes: Salad and Eggs. Easy recipe: Sandwich. Looking at the visualization generated for Acceleration, we can see that the medium and easy recipes (Salad, Eggs, and Sandwich) are very similar, except between time 10 to 30 where the Sandwich recipe has higher values than Salad and Eggs). We can also see a closer similarity between the hard recipes (Pizza and Brownie). Pizza and Brownie recipes have higher values across time than Salad, Eggs, and Sandwich. Something that is interesting is that we can see that all recipes report higher values at the beginning and end of the recipes. This is something that should be analyzed deeper. Looking at the visualization generated for Gyroscope, we can see that the hard and medium recipes are pretty much the same or very similar. But we can see a different behavior for the easy recipe (Sandwich). It is also interesting to point out that the Gyroscope in the X direction has higher values than Y and Z for all the recipes. Looking at the visualization generated for Magnetometer, we can see that all the recipes have very similar results which may indicate that this information may not be useful for analyzing human activity. `30:Ted1,slider_snap = function(min, max, starting_min=min, starting_max=max) { var range = [min, max + 1] var starting_range = [starting_min, starting_max + 1] // set width and height of svg var w = layout.width var h = layout.height var margin = layout.margin // dimensions of slider bar var width = w - margin.left - margin.right; var height = h - margin.top - margin.bottom; // create x scale var x = d3.scaleLinear() .domain(range) // data space .range([0, width]); // display space // create svg and translated g var svg = d3.select(DOM.svg(w,h)) const g = svg.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`) // draw background lines g.append('g').selectAll('line') .data(d3.range(range[0], range[1]+1)) .enter() .append('line') .attr('x1', d => x(d)).attr('x2', d => x(d)) .attr('y1', 0).attr('y2', height) .style('stroke', '#ccc') // labels var labelL = g.append('text') .attr('id', 'labelleft') .attr('x', 0) .attr('y', height + 5) .text(range[0]) var labelR = g.append('text') .attr('id', 'labelright') .attr('x', 0) .attr('y', height + 5) .text(range[1]) // define brush var brush = d3.brushX() .extent([[0,0], [width, height]]) .on('brush', function(event) { var s = event.selection; // update and move labels labelL.attr('x', s[0]) .text(Math.round(x.invert(s[0]))) labelR.attr('x', s[1]) .text(Math.round(x.invert(s[1])) - 1) // move brush handles handle.attr("display", null).attr("transform", function(d, i) { return "translate(" + [ s[i], - height / 4] + ")"; }); // update view // if the view should only be updated after brushing is over, // move these two lines into the on('end') part below svg.node().value = s.map(d => Math.round(x.invert(d))); svg.node().dispatchEvent(new CustomEvent("input")); }) .on('end', function(event) { if (!event.sourceEvent) return; var d0 = event.selection.map(x.invert); var d1 = d0.map(Math.round) d3.select(this).transition().call(event.target.move, d1.map(x)) }) // append brush to g var gBrush = g.append("g") .attr("class", "brush") .call(brush) // add brush handles (from https://bl.ocks.org/Fil/2d43867ba1f36a05459c7113c7f6f98a) var brushResizePath = function(d) { var e = +(d.type == "e"), x = e ? 1 : -1, y = height / 2; return "M" + (.5 * x) + "," + y + "A6,6 0 0 " + e + " " + (6.5 * x) + "," + (y + 6) + "V" + (2 * y - 6) + "A6,6 0 0 " + e + " " + (.5 * x) + "," + (2 * y) + "Z" + "M" + (2.5 * x) + "," + (y + 8) + "V" + (2 * y - 8) + "M" + (4.5 * x) + "," + (y + 8) + "V" + (2 * y - 8); } var handle = gBrush.selectAll(".handle--custom") .data([{type: "w"}, {type: "e"}]) .enter().append("path") .attr("class", "handle--custom") .attr("stroke", "#000") .attr("fill", '#eee') .attr("cursor", "ew-resize") .attr("d", brushResizePath); // override default behaviour - clicking outside of the selected area // will select a small piece there rather than deselecting everything // https://bl.ocks.org/mbostock/6498000 gBrush.selectAll(".overlay") .each(function(d) { d.type = "selection"; }) .on("mousedown touchstart", brushcentered) function brushcentered() { var dx = x(1) - x(0), // Use a fixed width when recentering. cx = d3.mouse(this)[0], x0 = cx - dx / 2, x1 = cx + dx / 2; d3.select(this.parentNode).call(brush.move, x1 > width ? [width - dx, width] : x0 < 0 ? [0, dx] : [x0, x1]); } // select entire starting range gBrush.call(brush.move, starting_range.map(x)) return svg.node() }31:T7cb,final_data = { const IMUsensorlist = IMUsensors; const selectedIMUsensor = IMUsensorQ1; const axis = axisList; const accelAxisLabelData = ["Accel_X_Variance", "Accel_Y_Variance", "Accel_Z_Variance"]; const gyroAxisLabelData = ["Roll_Variance", "Pitch_Variance", "Yaw_Variance"]; const magnoAxisLabelData = ["Mag_X_Variance", "Mag_Y_Variance", "Mag_Z_Variance"]; let selectedSensor = (selectedIMUsensor === "Accelerometer") ? accelAxisLabelData : (selectedIMUsensor === "Gyroscope") ? gyroAxisLabelData : magnoAxisLabelData; const accumulatorAxis = {}; let maxValue = 0; for (let i = 0; i < axis.length; i++) { const label = selectedSensor[i]; const accumulator = {}; const x = d3.rollups( newDataRecipeTypes, group => (IMUaggregationMethodQ1 === "min") ? d3.min(group, meanvalue => meanvalue[label]) : (IMUaggregationMethodQ1 === "max") ? d3.max(group, meanvalue => meanvalue[label]) : (IMUaggregationMethodQ1 === "mean") ? d3.mean(group, meanvalue => meanvalue[label]) : d3.median(group, meanvalue => meanvalue[label]), // [axisLabelData[i]]), d=>d.recipe_type, d => d.percent_through_recording ).map((percentage) => { let validRangeData = []; percentage[1].map( ([percentage, mean]) => { if(mean> maxValue) { maxValue = mean;} if( percentage >= mysnapslider[0] && percentage <= mysnapslider[1] ){ validRangeData.push({percentage: percentage, mean: mean});// ({percentage: percentage, mean: mean}) } } ); accumulator[percentage[0]] = validRangeData; }); accumulatorAxis[axis[i]] = accumulator; } const finalData = recipetypes.map((recipetype) => ({ category: recipetype, maxvalue: maxValue, // d3.max(maxAxisValues), axis: axis.map((axi) => ({ axi: axi, percentages: accumulatorAxis[axi][recipetype] })) })); return finalData; }32:T1303,{ const margin = {top: 140, right: 90, bottom: 20, left: 60}; const visWidth = 760 - margin.left - margin.right; const visHeight = 650 - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); // const maxAccX = d3.max(newDataRecipeTypes, e => e[]); // const maxValue = d3.max(newDataRecipeTypes, d => d3.max(d.years, d => d3.max(d.counts, e => e.permits))) g.append('text') .attr('x', margin.left + 130) .attr('y', -80) .attr('font-size', '9px') .attr("text-anchor", "middle") .attr("dominant-baseline", "top") .attr("font-family", "sans-serif") .attr("font-weight", "bold") .text("Hover on the legend categories to highlight the corresponding line chart in all the charts."); // add title g.append("text") .attr("x", visWidth / 2) .attr("y", -130) .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .attr("font-family", "sans-serif") .attr("font-size", "16px") .text("IMU Variance (" +IMUsensorQ1 + ") vs. Recipes"); const row = d3.scaleBand() .domain(recipetypes) .range([0, visHeight]) .paddingInner(0.25); const x = d3.scaleLinear() .domain(mysnapslider)// ([0,101] )// d3.extent(months)) .range([0, visWidth]); const y = d3.scaleLinear() .domain([0, final_data[0].maxvalue]).nice() //maxSingleYearPermitsTop3Cat .range([row.bandwidth(), 0]); const xAxis = d3.axisBottom(x); // d3.axisBottom(x).tickFormat(d3.timeFormat('%B')); const yAxis = d3.axisLeft(y).ticks(5); const color = d3.scaleOrdinal() .domain(axisList) .range(d3.schemeTableau10); g.append('g') .attr('class', 'x-axis') .attr('transform', `translate(0,${visHeight})`) .call(xAxis) .call(g => g.select('.domain').remove()); const rows = g.append('g') .selectAll('g') .data(final_data) .join('g') .attr('class', 'row') .attr('transform', d => `translate(0,${row(d.category)})`); rows.append('g') .attr('class', 'y-axis') .call(yAxis) .call(g => g.select('.domain').remove()); rows.append('line') .attr('stroke', 'lightgray') .attr('x1', 0) .attr('x2', visWidth) .attr('y1', row.bandwidth() + 0.5) .attr('y2', row.bandwidth() + 0.5) // axis x and y labels g.select('.y-axis') .append('text') .attr('text-anchor', 'start') .attr('dominant-baseline', 'middle') .attr('fill', 'black') .attr('x', 5) .attr('y', 7) .text('Magnitude'); g.select('.x-axis') .append('text') .attr('text-anchor', 'start') .attr('dominant-baseline', 'middle') .attr('fill', 'black') .attr('x', visWidth + 5) .attr('y', 7) .text('Percentage (time)'); // recipe labels rows.append('text') .text(d => d.category) .attr('font-size', 12) .attr('fill', 'black') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('y', -5) .attr('x', 5); const line = d3.line() .x(d => x(d.percentage)) .y(d => y(d.mean)); // const linesGroup = rows.append('g'); const linesGroup = rows .selectAll('.lines') .data(d => d.axis) .join('g'); const eachLine = linesGroup.append("path") .attr('d', d => line(d.percentages)) .attr("opacity", 1) .attr("fill", 'none') .attr('stroke', d => color(d.axi)) .attr("stroke-width", "2"); svg.append("g").call(drawLegend).attr("transform",`translate(60, -10)`); return svg.node(); var legend; function drawLegend(g) { legend = g.attr("transform", `translate(${visWidth - margin.right+100},0)`) .selectAll("g") .data(axisList) .join("g") .attr("transform", (d, i) => i<3 ? `translate(${(i * 80)},80)`: `translate(${((i-3) * 280)},100)`) .call(g => g.append("rect") .attr("rx", 3).attr("ry", 3) .attr("width", 20).attr("height", 15) .attr("fill", d => color(d))) .call(g => g.append("text") .attr("dx", 25) .attr("dy", 3) .attr("alignment-baseline", "hanging") .attr("font-family", "sans-serif") .attr("font-size", 13) .text(d => d)) .on("mouseover", e => highlight(e)) .on("mouseout", () => highlight()); } function highlight(e) { console.log(e); const selected = e ? e.srcElement.__data__ : -1; eachLine.transition().duration(500).attr("opacity", (d, j) => { console.log(d); return (selected === -1 || selected === d.axi) ? 1 : 0.07; } ); } }33:Ta66,function getAvgIMU(vararr, subjects, recipes, percents) { const avgSensorArr = [] for (let i = 0; i < subjects.length; i++) { for (let j = 0; j < recipes.length; j++) { let xAccelSum = 0 let yAccelSum = 0 let zAccelSum = 0 let rollSum = 0 let pitchSum = 0 let yawSum = 0 let xMagSum = 0 let yMagSum = 0 let zMagSum = 0 for (let k = 0; k < percents.length; k++) { let stepIndices = multiIndexOfPercent(vararr, subjects[i], recipes[j], percents[k]) let xAccelStepSum = 0 let yAccelStepSum = 0 let zAccelStepSum = 0 let rollStepSum = 0 let pitchStepSum = 0 let yawStepSum = 0 let xMagStepSum = 0 let yMagStepSum = 0 let zMagStepSum = 0 for (let p = 0; p < stepIndices.length; p++) { xAccelStepSum = xAccelStepSum + vararr[stepIndices[p]].Accel_X_Variance yAccelStepSum = yAccelStepSum + vararr[stepIndices[p]].Accel_Y_Variance zAccelStepSum = zAccelStepSum + vararr[stepIndices[p]].Accel_Z_Variance rollStepSum = rollStepSum + vararr[stepIndices[p]].Roll_Variance pitchStepSum = pitchStepSum + vararr[stepIndices[p]].Pitch_Variance yawStepSum = yawStepSum + vararr[stepIndices[p]].Yaw_Variance xMagStepSum = xMagStepSum + vararr[stepIndices[p]].Mag_X_Variance yMagStepSum = yMagStepSum + vararr[stepIndices[p]].Mag_Y_Variance zMagStepSum = zMagStepSum + vararr[stepIndices[p]].Mag_Z_Variance } xAccelSum = xAccelSum + (xAccelStepSum / stepIndices.length) yAccelSum = yAccelSum + (yAccelStepSum / stepIndices.length) zAccelSum = zAccelSum + (zAccelStepSum / stepIndices.length) rollSum = rollSum + (rollStepSum / stepIndices.length) pitchSum = pitchSum + (pitchStepSum / stepIndices.length) yawSum = yawSum + (yawStepSum / stepIndices.length) xMagSum = xMagSum + (xMagStepSum / stepIndices.length) yMagSum = yMagSum + (yMagStepSum / stepIndices.length) zMagSum = zMagSum + (zMagStepSum / stepIndices.length) } let accelAvg = ((xAccelSum / percents.length) + (yAccelSum / percents.length) + (zAccelSum / percents.length)) / 3 let gyroAvg = ((rollSum / percents.length) + (pitchSum / percents.length) + (yawSum / percents.length)) / 3 let magAvg = ((xMagSum / percents.length) + (yMagSum / percents.length) + (zMagSum / percents.length)) / 3 avgSensorArr.push({subject_ID: subjects[i], recipe_type: recipes[j], Accelerometer: accelAvg, Gyroscope: gyroAvg, Magnetometer: magAvg}) } } return avgSensorArr }34:T727,viewof selections = { const colWidth = 100; const fontSize = 15; const svg = d3.create('svg') .attr('width', colWidth * (recipes.length + 1) + 100) .attr('height', 25); const cols = svg.selectAll('g') .data(recipes) .join('g') // position the group for each row of the legend .attr('transform', (d, i) => `translate(${i * colWidth +colWidth}, 5)`); svg.append("text") .attr("x", 42.5) .attr("y", 8) .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .attr("font-family", "sans-serif") .attr("font-size", "13px") .text("Select recipes:"); // add colored square to each col cols.append('rect') .attr('width', fontSize) .attr('height', fontSize) .attr('stroke-width', 2) .attr('stroke', d => recipeColor(d)) .attr('fill', d => recipeColor(d)) .on('click', onclick); // add label to each col cols.append('text') .attr('font-size', fontSize) .attr('x', colWidth - 80) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(d => d); // Track which origins are selected in the legend. // This is a map from car origin to a boolean for // whether or not it the origin is selected. // To start, all origins are selected. const selected = new Map(recipes.map(d => [d, true])); function onclick(event, d) { const isSelected = selected.get(d); // this refers to the square that was clicked const square = d3.select(this); // toggle the square square.attr('fill', d => isSelected ? 'white' : recipeColor(d)); selected.set(d, !isSelected); svg.property('value', selected).dispatch('input'); } svg.property('value', selected).dispatch('input'); return svg.node(); }35:Ta6f,{ // set up const margin2 = {top: 50, right: 120, bottom: 50, left: 120}; const visWidth2 = 400; const visHeight2 = 400; const svg = d3.create('svg') .attr('width', visWidth2 + margin2.left + margin2.right) .attr('height', visHeight2 + margin2.top + margin2.bottom); const g = svg.append("g") .attr("transform", `translate(${margin2.left}, ${margin2.top})`); // add title g.append("text") .attr("x", visWidth2 / 2) .attr("y", -margin2.top + 5) .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .attr("font-family", "sans-serif") .attr("font-size", "16px") .text("IMU Variance vs. User Distance Travelled"); // create scales const x = d3.scaleLinear() .domain(d3.extent(comboArr, d => d["Average_Distance_Whole_Recording"])).nice() .range([0, visWidth2]); const y = d3.scaleLinear() .domain(d3.extent(comboArr, d => d[IMUsensor])).nice() .range([visHeight2, 0]); // create and add axes const xAxis = d3.axisBottom(x); g.append("g") // move to bottom of chart .attr("transform", `translate(0, ${visHeight2})`) // add axis .call(xAxis) // remove baseline from axis .call(g => g.select(".domain").remove()) // add grid lines // refernces https://observablehq.com/@d3/connected-scatterplot .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('y1', -visHeight2) .attr('y2', 0)) // add title .append("text") .attr("x", visWidth2 / 2) .attr("y", 40) .attr("fill", "black") .attr("text-anchor", "middle") .text("Distance Travelled (m)"); const yAxis = d3.axisLeft(y); g.append("g") // add axis .call(yAxis) // remove baseline from axis .call(g => g.select(".domain").remove()) // add grid lines // refernces https://observablehq.com/@d3/connected-scatterplot .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('x1', 0) .attr('x2', visWidth2)) // add title .append("text") .attr("x", -40) .attr("y", visHeight2 / 2) .attr("fill", "black") .attr("dominant-baseline", "middle") .text("Avg Variance"); // draw points g.append("g") .selectAll("circle") .data(comboArr.filter(d => selections.get(d.recipe_type))) .join("circle") .attr("cx", d => x(d["Average_Distance_Whole_Recording"])) .attr("cy", d => y(d[IMUsensor])) .attr("fill", d => recipeColor(d.recipe_type)) .attr("r", 3); return svg.node(); }36:T74f,In this visualization, we show a scatterplot of the distance travelled by the user (in meters) versus the average variance of either the acceleration (accelerometer), the angular velocity (gyroscope), or the magnetic force (magnetometer) over the duration of a session (i.e. one recording of one user completing one of the recipes). The average variance of acceleration over the course of a session was calculated by averaging over each of the 9 IMU sensors at each timestep, then averaging over all timesteps, and finally averaging over the x, y, and z axes. A similar process was used to calculate the average variance of angular velocity and average variance of magnetic force for each session. Each dot in the scatterplot represents one session. These dots are also color-coded by recipe. The IMU sensor can be toggled using the drop down menu above the plot, and the dots can be filtered by recipe by clicking on the boxes next to each recipe in the legend above the plot as well. This visualization shows that users with high acceleration and angular velocity average variances do indeed move around their locations more over the course of the task, as we posited in the initial question. However it also shows that users with high magnetic force variations tended to move around their locations less, while users with low magnetic force variations tended to move around their locations more. One of the drawbacks of this visualization (which we have only been able to discover after creating it) is that there is no clear pattern dictating which dots have clustered together. The dots do not appear to cluster by recipe as we had hoped. We suspect that the small cluster of dots with much lower distance and variance values are likely all from the same 2-3 users, and we will investigate this (and ways of visualizing any patterns we find) in the second draft.37:T4b7,function addRange(distTimeComboArr) { const rangeArr = [] for (let i = 0; i < distTimeComboArr.length; i++) { let existing = distTimeComboArr[i] let completion_time = distTimeComboArr[i].Average_Completion_Time_Across_Sensors let range = "None" if (completion_time < 100){ range = "0-100 sec" } else if (completion_time > 100 && completion_time < 200){ range = "100-200 sec" } else if (completion_time > 200 && completion_time < 300){ range = "200-300 sec" } else if (completion_time > 300 && completion_time < 400){ range = "300-400 sec" } else if (completion_time > 400 && completion_time < 500){ range = "400-500 sec" } else if (completion_time > 500 && completion_time < 600){ range = "500-600 sec" } else if (completion_time > 600 && completion_time < 700){ range = "600-700 sec" } else if (completion_time > 700 && completion_time < 800){ range = "700-800 sec" } else if (completion_time > 800 && completion_time < 900){ range = "800-900 sec" } if (range != "None"){ existing.range = range rangeArr.push(existing) } } return rangeArr }38:T849,{ const margin = {top: 30, right: 0, bottom: 20, left: 40}; const visWidth = width - margin.left - margin.right; const visHeight = 500 - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); // this scale will be used to position the groups for each month const group = d3.scaleBand() .domain(ranges) .range([0, visWidth]) .padding(0.2); let max = getMax(IMUsensorchosen) const y = d3.scaleLinear() .domain([0, max]).nice() .range([visHeight, 0]); // this scale will be used to position the bars within a group const x = d3.scaleBand() .domain(recipeGroupSort) .range([0, group.bandwidth()]) .padding(0.2); // set up the axes const xAxis = d3.axisBottom(group); const yAxis = d3.axisLeft(y); g.append('g') .attr('transform', `translate(0,${visHeight})`) .call(xAxis) .call(g => g.selectAll('.domain').remove()); g.append("g") .call(yAxis) .call(g => g.selectAll('.domain').remove()) .append('text') .attr('fill', 'black') .attr('text-anchor', 'start') .attr('dominant-baseline', 'hanging') .attr('font-weight', 'bold') .attr('y', -margin.top + 5) .attr('x', -margin.left) .text('Average Variance vs Average Recipe Completion Time'); // create and position one group for each month const groups = g.append('g') .selectAll('g') .data(IMUDataObj[IMUsensorchosen]) .join('g') .attr('transform', d => `translate(${group(d.range)},0)`); // add the bars to each group groups.selectAll('rect') .data(d => d.recipe_type) .join('rect') .attr('fill', d => recipeColor(d.recipe_type)) .attr('y', d => y(d.Variance)) .attr('height', d => visHeight - y(d.Variance)) .attr('x', d => x(d.recipe_type)) .attr('width', x.bandwidth()); return svg.node(); }39:T6f8,In this visualization, we show a grouped bar chart of recipe completion time (in seconds) versus the average variance of either the acceleration (accelerometer), the angular velocity (gyroscope), or the magnetic force (magnetometer) over the duration of a session (i.e. one recording of one user completing one of the recipes). The average variance of acceleration over the course of a session was calculated by averaging over each of the 9 IMU sensors at each timestep, then averaging over all timesteps, and finally averaging over the x, y, and z axes. A similar process was used to calculate the average variance of angular velocity and average variance of magnetic force for each session. These sessions were then grouped by recipe completion time (sessions lasting 0-100 seconds were grouped together, then 100-200 seconds, and so on). The acceleration, angular velocity, and magnetic force variances were then averaged over all sessions containing the same recipe within the same recipe completion time range as well. In our initial question, we asked if users with high imu info variances usually finish the recipe quicker. Through this visualization, we see that this does not seem to be the case. We plan to investigate other potential methods for uncovering any correlation between imu info variances and recipe completion time in the second draft. Namely, we may find that averaging values across users has obscured patterns in the behavior and resulting IMU measurements for one user. This visualization also shows that average recipe completion time could potentially be used as a means for classifying the complexity of a given recipe, as some recipes (such as Eggs and Sandwich) consistently took less time for all users to complete than others (such as pizza). 3a:[{"id":"5e2d479c2e9fd444bfc0f7ee2c2a319fe7c3d4477d712a2800e8e95a0357abd05f6458ed7bfdf9207a020d512fbb959b34779be4b54739397ffaa8122ff1ffda","href":"https://static.observableusercontent.com/files/5e2d479c2e9fd444bfc0f7ee2c2a319fe7c3d4477d712a2800e8e95a0357abd05f6458ed7bfdf9207a020d512fbb959b34779be4b54739397ffaa8122ff1ffda","name":"distances_all.csv","type":"text/csv","lastModified":1669664998450.649,"size":61023},{"id":"9bc182a3c3ddca80a2fbce5a5ad91a3e32a5b4817069b94f5cb2aa3ef52d73211f2c409867b2da11cc05aca96cb2c7b4e7e037a31bbd42fe6b3af8190b2674bc","href":"https://static.observableusercontent.com/files/9bc182a3c3ddca80a2fbce5a5ad91a3e32a5b4817069b94f5cb2aa3ef52d73211f2c409867b2da11cc05aca96cb2c7b4e7e037a31bbd42fe6b3af8190b2674bc","name":"completion_times_all.csv","type":"text/csv","lastModified":1669665110207.52,"size":47241},{"id":"4de496bbb302acd3d2e2db1ae357fc195537e477f73189ef093e62c7595557df527ef6562d8d56abde094ebb0d901cb8213010167826722db35452a2277e964e","href":"https://static.observableusercontent.com/files/4de496bbb302acd3d2e2db1ae357fc195537e477f73189ef093e62c7595557df527ef6562d8d56abde094ebb0d901cb8213010167826722db35452a2277e964e","name":"variances.csv","type":"text/csv","lastModified":1669839739942.126,"size":32122136},{"id":"a373c19cc5d0d94df09c41633c6adfb1bfdb2a2f62d5b859cb3f3bfb6cf50878bb932e7997445cf324a1a0ea65622215286c69900bd6a3cd41e921575c6a704d","href":"https://static.observableusercontent.com/files/a373c19cc5d0d94df09c41633c6adfb1bfdb2a2f62d5b859cb3f3bfb6cf50878bb932e7997445cf324a1a0ea65622215286c69900bd6a3cd41e921575c6a704d","name":"Question1_Sketch_IMU.jpeg","type":"image/jpeg","lastModified":1669664862585.405,"size":240584},{"id":"c5469bcaaa2f15fa22ca4c9d4af920b04cdb872737076ddb9e57d31483aecaeb1b35b9845287d5939fceafe533aada7fc5100cc24345c4ddd378c08f3f688a88","href":"https://static.observableusercontent.com/files/c5469bcaaa2f15fa22ca4c9d4af920b04cdb872737076ddb9e57d31483aecaeb1b35b9845287d5939fceafe533aada7fc5100cc24345c4ddd378c08f3f688a88","name":"Question2_Sketch_IMU.jpeg","type":"image/jpeg","lastModified":1669665043775.549,"size":209432}] 2d:{"title":"Group Project: First Draft","cells":[{"id":0,"value":"# Group Project: First Draft","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"## Human Activity Recognition base on IMU (Inertial Measurement Unit) signals","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"Erin McGowan, Sonia Castelo Quispe","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"### Question 1","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"Are there any relationships between IMU info and the recipe type? Did users who perform complex recipes have high imu info variances?","pinned":false,"hidden":false,"mode":"md"},{"id":635,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"variances = FileAttachment(\"variances.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"layout = ({\n width: 700,\n height: 60,\n margin: {\n top: 10,\n bottom: 15,\n left: 60,\n right: 30\n }\n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"recipetypes = d3.groupSort(variances, group=>group.length, row => row.recipe_type).reverse()","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"newDataRecipeTypes = variances.filter(row => (new Set(recipetypes)).has(row.recipe_type))","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"axisList = [\"x\", \"y\", \"z\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"IMUsensors = [\"Accelerometer\", \"Gyroscope\", \"Magnetometer\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"viewof IMUsensorQ1 = Inputs.select(IMUsensors, {value: \"Accelerometer\", label: \"Select IMU sensor:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"viewof IMUaggregationMethodQ1 = Inputs.select([\"min\", \"max\", \"median\", \"mean\" ], {value: \"mean\", label: \"Aggregation func:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"viewof mysnapslider = slider_snap(0, 100)","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"### Question 2","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"### Are there any relationships between IMU info and user position? Did users with high imu info variances move more around their locations?","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"distances = FileAttachment(\"distances_all.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"subjects = Array.from(new Set(distances.map(d => d.subject_ID)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"recipes = Array.from(new Set(distances.map(d => d.recipe_type)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"percents = Array.from(new Set(variances.map(d => d.percent_through_recording)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"//modified from https://stackoverflow.com/questions/24241462/how-to-search-for-multiple-indexes-of-same-values-in-javascript-array \nfunction multiIndexOf(arr, subject, recipe) { \n var idxs = [];\n for (var i = arr.length - 1; i >= 0; i--) {\n if (arr[i].subject_ID === subject && arr[i].recipe_type === recipe) {\n idxs.unshift(i);\n }\n }\n return idxs;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"//modified from https://stackoverflow.com/questions/24241462/how-to-search-for-multiple-indexes-of-same-values-in-javascript-array \nfunction multiIndexOfPercent(arr, subject, recipe, percent) { \n var idxs = [];\n for (var i = arr.length - 1; i >= 0; i--) {\n if (arr[i].subject_ID === subject && arr[i].recipe_type === recipe && arr[i].percent_through_recording === percent) {\n idxs.unshift(i);\n }\n }\n return idxs;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"function getAvgDistPerSession(distarr, subjects, recipes) {\n const avgDistArr = []\n for (let i = 0; i < subjects.length; i++) {\n for (let j = 0; j < recipes.length; j++) {\n let sessionIndices = multiIndexOf(distarr, subjects[i], recipes[j])\n let sessionSum = 0\n for (let k = 0; k < sessionIndices.length; k++) {\n sessionSum = sessionSum + distarr[sessionIndices[k]].Total_Distance\n }\n avgDistArr.push({subject_ID: subjects[i], recipe_type: recipes[j], Average_Distance: sessionSum / sessionIndices.length})\n }\n }\n return avgDistArr\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"avgDistArr = getAvgDistPerSession(distances, subjects, recipes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"avgIMUVars = getAvgIMU(variances, subjects, recipes, percents)","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"function combineAvgVarDistArrs(varavgarr, distavgarr) {\n const comboArr = []\n for (let i = 0; i < varavgarr.length; i++) {\n let subject_id = varavgarr[i].subject_ID\n let recipe_type = varavgarr[i].recipe_type\n let vars = varavgarr[i]\n let distIndex = -1\n distIndex = distavgarr.findIndex(element => element.subject_ID === subject_id && element.recipe_type === recipe_type)\n if (distIndex != -1){\n vars.Average_Distance_Whole_Recording = distavgarr[distIndex].Average_Distance\n comboArr.push(vars)\n }\n }\n return comboArr\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"comboArr = combineAvgVarDistArrs(avgIMUVars, avgDistArr)","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"recipeColor = d3.scaleOrdinal()\n .domain(recipes)\n .range(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"IMUsensorlist = [\"Accelerometer\", \"Gyroscope\", \"Magnetometer\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"viewof IMUsensor = Inputs.select(IMUsensorlist, {value: \"Accelerometer\", label: \"Select IMU sensor:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"$36","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"### Question 3","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"### Are there any relationships between IMU info and task completion time (time represents the total time to finish a recipe)? Did users with high imu info variances usually finish the recipe quicker?","pinned":false,"hidden":false,"mode":"md"},{"id":55,"value":"completionTimes = FileAttachment(\"completion_times_all.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"function getAvgCompTimePerSession(comptimearr, subjects, recipes) {\n const avgCompTimeArr = []\n for (let i = 0; i < subjects.length; i++) {\n for (let j = 0; j < recipes.length; j++) {\n let sessionIndices = multiIndexOf(comptimearr, subjects[i], recipes[j])\n let sessionSum = 0\n for (let k = 0; k < sessionIndices.length; k++) {\n sessionSum = sessionSum + comptimearr[sessionIndices[k]].completion_time_sec\n }\n avgCompTimeArr.push({subject_ID: subjects[i], recipe_type: recipes[j], Average_Completion_Time_Across_Sensors: sessionSum / sessionIndices.length})\n }\n }\n return avgCompTimeArr\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"avgCompTimeArr = getAvgCompTimePerSession(completionTimes, subjects, recipes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"function combineAvgVarCompTimeArrs(avgvararr, avgcomptimearr) {\n const comboArr2 = []\n for (let i = 0; i < avgvararr.length; i++) {\n let subject_id = avgvararr[i].subject_ID\n let recipe_type = avgvararr[i].recipe_type\n let vars = avgvararr[i]\n let comptimeIndex = -1\n comptimeIndex = avgcomptimearr.findIndex(element => element.subject_ID === subject_id && element.recipe_type === recipe_type)\n if (comptimeIndex != -1){\n vars.Average_Completion_Time_Across_Sensors = avgcomptimearr[comptimeIndex].Average_Completion_Time_Across_Sensors\n comboArr2.push(vars)\n }\n }\n return comboArr2\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"varTimeComboArr = combineAvgVarCompTimeArrs(avgIMUVars, avgCompTimeArr)","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"varTimeComboRangeArr = addRange(varTimeComboArr)","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"accelData = {\n const accelvars = d3.rollup(varTimeComboRangeArr,\n bars => d3.mean(bars, c => c.Accelerometer),\n d => d.range,\n d => d.recipe_type);\n \n return Array.from(accelvars, (([range, map]) => {\n map.set('range', range);\n return Object.fromEntries(map)\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"gyroData = {\n const gyrovars = d3.rollup(varTimeComboRangeArr,\n bars => d3.mean(bars, c => c.Gyroscope),\n d => d.range,\n d => d.recipe_type);\n \n return Array.from(gyrovars, (([range, map]) => {\n map.set('range', range);\n return Object.fromEntries(map)\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"magData = {\n const magvars = d3.rollup(varTimeComboRangeArr,\n bars => d3.mean(bars, c => c.Magnetometer),\n d => d.range,\n d => d.recipe_type);\n \n return Array.from(magvars, (([range, map]) => {\n map.set('range', range);\n return Object.fromEntries(map)\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"recipeGroupSort = d3.groupSort(\n varTimeComboRangeArr,\n accel => -d3.sum(accel, c => c.Accelerometer),\n d => d.recipe_type\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"accelDataWithRecipeArray = accelData.map(d => ({\n range: d.range,\n sensor: \"Accelerometer\",\n recipe_type: recipeGroupSort.map(b => ({recipe_type: b, Variance: d[b]}))\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"gyroDataWithRecipeArray = gyroData.map(d => ({\n range: d.range,\n sensor: \"Gyroscope\",\n recipe_type: recipeGroupSort.map(b => ({recipe_type: b, Variance: d[b]}))\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"magDataWithRecipeArray = magData.map(d => ({\n range: d.range,\n sensor: \"Magnetometer\",\n recipe_type: recipeGroupSort.map(b => ({recipe_type: b, Variance: d[b]}))\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"function getObj(accelDataWithRecipeArray, gyroDataWithRecipeArray, magDataWithRecipeArray){\n let IMUDataObj = {}\n IMUDataObj.Accelerometer = accelDataWithRecipeArray\n IMUDataObj.Gyroscope = gyroDataWithRecipeArray\n IMUDataObj.Magnetometer = magDataWithRecipeArray\n return IMUDataObj\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"IMUDataObj = getObj(accelDataWithRecipeArray, gyroDataWithRecipeArray, magDataWithRecipeArray)","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"ranges = [\"100-200 sec\", \"200-300 sec\", \"300-400 sec\", \"400-500 sec\", \"500-600 sec\", \"600-700 sec\", \"700-800 sec\", \"800-900 sec\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"function getMax(IMUSensorChosen){\n let max = 0\n if (IMUSensorChosen == \"Accelerometer\"){\n max = 0.015\n }\n else if (IMUSensorChosen == \"Gyroscope\"){\n max = 0.17\n }\n else if (IMUSensorChosen == \"Magnetometer\"){\n max = 0.01\n }\n return max\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"viewof IMUsensorchosen = Inputs.select(IMUsensorlist, {value: \"Accelerometer\", label: \"Select IMU sensor:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"swatches({color: recipeColor})","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"$39","pinned":false,"hidden":false,"mode":"md"}],"files":"$W3a","stdlib":"1","titling":"auto"}