2c:null 2d:["$","title",null,{"children":"Box Plot Again | Erin McGowan | Observable"}] 32: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 }33:T4d3,function addDistBin(comboArr){ const distBinArr = [] for (let i = 0; i < comboArr.length; i++) { let existing = comboArr[i] let dist = comboArr[i].Average_Distance_Whole_Recording let bin = "None" if (dist >= 14 && dist < 16){ bin = "14-16" } else if (dist >= 16 && dist < 18){ bin = "16-18" } else if (dist >= 18 && dist < 20){ bin = "18-20" } else if (dist >= 20 && dist < 22){ bin = "20-22" } else if (dist >= 22 && dist < 24){ bin = "22-24" } else if (dist >= 24 && dist < 26){ bin = "24-26" } else if (dist >= 26 && dist < 28){ bin = "26-28" } else if (dist >= 28 && dist < 30){ bin = "28-30" } else if (dist >= 30 && dist < 32){ bin = "30-32" } else if (dist >= 32 && dist < 34){ bin = "32-34" } else if (dist >= 34 && dist < 36){ bin = "34-36" } else if (dist >= 36 && dist < 38){ bin = "36-38" } else if (dist >= 38 && dist < 40){ bin = "38-40" } else if (dist >= 40 && dist < 42){ bin = "40-42" } if (bin != "None"){ existing.dist_bin = bin distBinArr.push(existing) } } return distBinArr }34:Ta59,function accelScatterplot() { // set up const margin2 = {top: 50, right: 120, bottom: 50, left: 120}; const visWidth2 = 200; const visHeight2 = 200; 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("Accelerometer Variance vs. 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["Accelerometer"])).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) .join("circle") .attr("cx", d => x(d["Average_Distance_Whole_Recording"])) .attr("cy", d => y(d["Accelerometer"])) .attr("fill", "black") .attr("r", 3); return svg.node(); }35:Ta4c,function gyroScatterplot() { // set up const margin2 = {top: 50, right: 120, bottom: 50, left: 120}; const visWidth2 = 200; const visHeight2 = 200; 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("Gyroscope Variance vs. 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["Gyroscope"])).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) .join("circle") .attr("cx", d => x(d["Average_Distance_Whole_Recording"])) .attr("cy", d => y(d["Gyroscope"])) .attr("fill", "black") .attr("r", 3); return svg.node(); }36:Ta54,function magScatterplot() { // set up const margin2 = {top: 50, right: 120, bottom: 50, left: 120}; const visWidth2 = 200; const visHeight2 = 200; 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("Magnetometer Variance vs. 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["Magnetometer"])).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) .join("circle") .attr("cx", d => x(d["Average_Distance_Whole_Recording"])) .attr("cy", d => y(d["Magnetometer"])) .attr("fill", "black") .attr("r", 3); return svg.node(); }37:T15d4,function varDistScatterplot(){ // set up const margin2 = {top: 50, right: 120, bottom: 50, left: 120}; const visWidth2 = 250; const visHeight2 = 250; 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 axesGroup = g.append('g'); const xAxis = d3.axisBottom(x); let xAxisGroup = axesGroup.append('g'); 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); let yAxisGroup = axesGroup.append('g'); 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); // update the chart for the given features function update(data) { //reformat data const scatterData = [] for (let i = 0; i < data.length; i++){ (data[i].x0 + data[i].x1) / 2 avgRecipeDistList } // transition const t = svg.transition() .duration(500); // update the scales x.domain(d3.extent(data, d => d["Average_Distance_Whole_Recording"])).nice(); y.domain(d3.extent(data, d => d[IMUsensor])).nice(); // update the axes // x axis // fade-out the old axis xAxisGroup.transition(t) .attr('opacity', 0) .remove(); // add the new axis xAxisGroup = axesGroup.append('g') // move axis to the bottom .attr('transform', `translate(0, ${visHeight2})`) // make it invisible .attr('opacity', 0) // add axis .call(xAxis) // remove baseline .call(g => g.select('.domain').remove()) // add grid lines // references https://observablehq.com/@d3/connected-scatterplot .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('y1', -visHeight2) .attr('y2', 0)) // add label .call(g => g.append('text') .attr('x', visWidth2 / 2) .attr('y', 40) .attr('fill', 'black') .attr('text-anchor', 'middle') .text("Distance Travelled (m)")); // fade-in the new axis xAxisGroup.transition(t) .attr('opacity', 1); // y axis // fade-out the old axis yAxisGroup.transition(t) .attr('opacity', 0) .remove(); // add the new axis yAxisGroup = axesGroup.append('g') // make it invisible .attr('opacity', 0) // add axis .call(yAxis) // remove baseline .call(g => g.select('.domain').remove()) // add grid lines // references https://observablehq.com/@d3/connected-scatterplot .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('x1', 0) .attr('x2', visWidth2)) // add label .call(g => g.append('text') .attr('x', -40) .attr('y', visHeight2 / 2) .attr('fill', 'black') .attr('text-anchor', 'end') .text("Avg Variance")); // fade-in the new axis yAxisGroup.transition(t) .attr('opacity', 1); // update the circles //dots.transition(t) //.attr("cx", d => x(d["Average_Distance_Whole_Recording"])) //.attr("cy", d => y(d[IMUsensor])); } // add the update function to the svg.node() object // so that we can call it outside of this cell return svg.node(); }38:T17cb,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/box-plot function BoxPlot(data, { x = ([x]) => x, // given d in data, returns the (quantitative) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value width = 440, // outer width, in pixels height = 400, // outer height, in pixels marginTop = 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels inset = 0.5, // left and right inset insetLeft = inset, // inset for left edge of box, in pixels insetRight = inset, // inset for right edge of box, in pixels xType = d3.scaleLinear, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] thresholds = width / 40, // approximative number of thresholds stroke = "currentColor", // stroke color of whiskers, median, outliers fill = "#ddd", // fill color of boxes jitter = 4, // amount of random jitter for outlier dots, in pixels xFormat, // a format specifier string for the x-axis yFormat, // a format specifier string for the y-axis xLabel, // a label for the x-axis yLabel // a label for the y-axis } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); // Filter undefined values. const I = d3.range(X.length).filter(i => !isNaN(X[i]) && !isNaN(Y[i])); // Compute the bins. const B = d3.bin() .thresholds(thresholds) .value(i => X[i]) (I) .map(bin => { const y = i => Y[i]; const min = d3.min(bin, y); const max = d3.max(bin, y); const q1 = d3.quantile(bin, 0.25, y); const q2 = d3.quantile(bin, 0.50, y); const q3 = d3.quantile(bin, 0.75, y); const iqr = q3 - q1; // interquartile range const r0 = Math.max(min, q1 - iqr * 1.5); const r1 = Math.min(max, q3 + iqr * 1.5); bin.quartiles = [q1, q2, q3]; bin.range = [r0, r1]; bin.outliers = bin.filter(i => Y[i] < r0 || Y[i] > r1); return bin; }); // Compute default domains. if (xDomain === undefined) xDomain = [d3.min(B, d => d.x0), d3.max(B, d => d.x1)]; if (yDomain === undefined) yDomain = [d3.min(B, d => d.range[0]), d3.max(B, d => d.range[1])]; // Construct scales and axes. const xScale = xType(xDomain, xRange).interpolate(d3.interpolateRound); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(thresholds, xFormat).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 40, yFormat); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const g = svg.append("g") .selectAll("g") .data(B) .join("g"); g.append("path") .attr("stroke", stroke) .attr("d", d => ` M${xScale((d.x0 + d.x1) / 2)},${yScale(d.range[1])} V${yScale(d.range[0])} `); const bars = g.append("path") .attr("fill", fill) .attr("d", d => ` M${xScale(d.x0) + insetLeft},${yScale(d.quartiles[2])} H${xScale(d.x1) - insetRight} V${yScale(d.quartiles[0])} H${xScale(d.x0) + insetLeft} Z `); g.append("path") .attr("stroke", stroke) .attr("stroke-width", 2) .attr("d", d => ` M${xScale(d.x0) + insetLeft},${yScale(d.quartiles[1])} H${xScale(d.x1) - insetRight} `); g.append("g") .attr("fill", stroke) .attr("fill-opacity", 0.2) .attr("stroke", "none") .attr("transform", d => `translate(${xScale((d.x0 + d.x1) / 2)},0)`) .selectAll("circle") .data(d => d.outliers) .join("circle") .attr("r", 2) .attr("cx", () => (Math.random() - 0.5) * jitter) .attr("cy", i => yScale(Y[i])); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .call(g => g.append("text") .attr("x", width) .attr("y", marginBottom - 4) .attr("fill", "currentColor") .attr("text-anchor", "end") .text(xLabel)); const brush = d3.brush() // set the space that the brush can take up .extent([[0, 0], [width, height]]) // handle events .on('brush', onBrush) .on('end', onEnd); g.append('g') .call(brush); function onBrush(event) { // event.selection gives us the coordinates of the // top left and bottom right of the brush box const [[x1, y1], [x2, y2]] = event.selection; // return true if the dot is in the brush box, false otherwise function isBrushed(d) { const cx = xScale((d.x0 + d.x1) / 2); return cx >= x1 && cx <= x2 } // style the dots bars.attr('fill', d => isBrushed(d) ? recipeDistColor(fill) : 'gray'); // update the data that appears in the comboArr variable svg.property('value', comboArrAvgRecipeDist.filter(isBrushed)).dispatch('input'); } const initialValue = comboArrAvgRecipeDist; function onEnd(event) { // if the brush is cleared if (event.selection === null) { // reset the color of all of the dots bars.attr('fill', d => recipeDistColor(fill)); svg.property('value', initialValue).dispatch('input'); } } return svg.node(); }39:T766,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'); function update(data) { } return Object.assign(svg.node(), { update }); }3a:T4a9, const brush = d3.brush() // set the space that the brush can take up .extent([[0, 0], [width, height]]) // handle events .on('brush', onBrush) .on('end', onEnd); g.append('g') .call(brush); function onBrush(event) { // event.selection gives us the coordinates of the // top left and bottom right of the brush box const [[x1, y1], [x2, y2]] = event.selection; // return true if the dot is in the brush box, false otherwise function isBrushed(d) { const cx = xScale((d.x0 + d.x1) / 2); return cx >= x1 && cx <= x2 } // style the dots bars.attr('fill', d => isBrushed(d) ? recipeDistColor(d.quartiles[2]) : 'gray'); // update the data that appears in the comboArr variable svg.property('value', comboArrAvgRecipeDist.filter(isBrushed)).dispatch('input'); } const initialValue = comboArrAvgRecipeDist; function onEnd(event) { // if the brush is cleared if (event.selection === null) { // reset the color of all of the dots bars.attr('fill', d => recipeDistColor(d.quartiles[2])); svg.property('value', initialValue).dispatch('input'); } }3b:[{"id":"5e2d479c2e9fd444bfc0f7ee2c2a319fe7c3d4477d712a2800e8e95a0357abd05f6458ed7bfdf9207a020d512fbb959b34779be4b54739397ffaa8122ff1ffda","href":"https://static.observableusercontent.com/files/5e2d479c2e9fd444bfc0f7ee2c2a319fe7c3d4477d712a2800e8e95a0357abd05f6458ed7bfdf9207a020d512fbb959b34779be4b54739397ffaa8122ff1ffda","name":"distances_all.csv","type":"text/csv","lastModified":1670896040874.499,"size":61023},{"id":"4de496bbb302acd3d2e2db1ae357fc195537e477f73189ef093e62c7595557df527ef6562d8d56abde094ebb0d901cb8213010167826722db35452a2277e964e","href":"https://static.observableusercontent.com/files/4de496bbb302acd3d2e2db1ae357fc195537e477f73189ef093e62c7595557df527ef6562d8d56abde094ebb0d901cb8213010167826722db35452a2277e964e","name":"variances.csv","type":"text/csv","lastModified":1670896100925.197,"size":32122136}] 30:{"id":"b342ddb94b97b38f","slug":null,"title":"Box Plot Again","thumbnail":"46d86f799b8a8043b1812d2b7c9a1373143a6d1cc2c3b53689b6b9bd6c4abcea","access_level":"public","create_time":"$D2022-12-13T01:46:10.868Z","update_time":"$D2022-12-13T21:05:36.139Z","view_time":null,"first_public_time":"$D2022-12-13T01:46:10.868Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a38c7a2b2421bfe2","login":"egm5434","name":"Erin McGowan","avatar_url":"https://avatars-next.observableusercontent.com/54c04a81262c520213f5456e180f3e80c1321b0b907cadd4749c47af371c22ad","tier":"starter_2024"},"version":199,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7c5d7e97b86a1934","login":"egm5434","name":"Erin McGowan","avatar_url":"https://avatars-next.observableusercontent.com/54c04a81262c520213f5456e180f3e80c1321b0b907cadd4749c47af371c22ad","tier":null}],"members":[{"type":"individual","id":"7c5d7e97b86a1934","login":"egm5434","name":"Erin McGowan","avatar_url":"https://avatars-next.observableusercontent.com/54c04a81262c520213f5456e180f3e80c1321b0b907cadd4749c47af371c22ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Box Plot Again","cells":[{"id":0,"value":"# Box Plot Again","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"distances = FileAttachment(\"distances_all.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"subjects = Array.from(new Set(distances.map(d => d.subject_ID)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"recipes = Array.from(new Set(distances.map(d => d.recipe_type)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"variances = FileAttachment(\"variances.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"percents = Array.from(new Set(variances.map(d => d.percent_through_recording)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"avgDistArr = getAvgDistPerSession(distances, subjects, recipes)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"avgIMUVars = getAvgIMU(variances, subjects, recipes, percents)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"comboArr = combineAvgVarDistArrs(avgIMUVars, avgDistArr)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"distBins = [\"14-16\", \"16-18\", \"18-20\", \"20-22\", \"22-24\", \"24-26\", \"26-28\", \"28-30\", \"30-32\", \"32-34\", \"34-36\", \"36-38\", \"38-40\", \"40-42\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"comboArrWithDistBin = addDistBin(comboArr)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"comboArrWithDistBinAvgCounts = [{dist_bin: \"14-16\", count: 0}, {dist_bin: \"16-18\", count: 0}, {dist_bin: \"18-20\", count: 0}, {dist_bin: \"20-22\", count: 0}, {dist_bin: \"22-24\", count: 0}, {dist_bin: \"24-26\", count: 0}, {dist_bin: \"26-28\", count: 0}, {dist_bin: \"28-30\", count: 0}, {dist_bin: \"30-32\", count: 0}, {dist_bin: \"32-34\", count: 0}, {dist_bin: \"34-36\", count: 0}, {dist_bin: \"36-38\", count: 0}, {dist_bin: \"38-40\", count: 0}, {dist_bin: \"40-42\", count: 0}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"function getAvgCounts(comboArrWithDistBin, comboArrWithDistBinAvgCounts){\n comboArrWithDistBinAvgCounts = comboArrWithDistBinAvgCounts\n for(let i = 0; i < comboArrWithDistBin.length; i++){\n let dist_bin = comboArrWithDistBin[i].dist_bin\n for(let j = 0; j < comboArrWithDistBinAvgCounts.length; j++){\n if (comboArrWithDistBinAvgCounts[j].dist_bin == dist_bin){\n comboArrWithDistBinAvgCounts[j].count = comboArrWithDistBinAvgCounts[j].count + 1\n }\n }\n }\n return comboArrWithDistBinAvgCounts\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"avgCounts = getAvgCounts(comboArrWithDistBin, comboArrWithDistBinAvgCounts)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"accelDistBins = Array.from(d3.rollup(\n comboArrWithDistBin,\n group => d3.mean(group, dist_bin => dist_bin.Accelerometer),\n dist_bin => dist_bin.dist_bin\n), ([dist_bin, variance]) => ({ dist_bin, variance }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"gyroDistBins = Array.from(d3.rollup(\n comboArrWithDistBin,\n group => d3.mean(group, dist_bin => dist_bin.Gyroscope),\n dist_bin => dist_bin.dist_bin\n), ([dist_bin, variance]) => ({ dist_bin, variance }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"magDistBins = Array.from(d3.rollup(\n comboArrWithDistBin,\n group => d3.mean(group, dist_bin => dist_bin.Magnetometer),\n dist_bin => dist_bin.dist_bin\n), ([dist_bin, variance]) => ({ dist_bin, variance }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"function getDistBinAvgCountCombo(accelDistBins, avgCounts){\n let newCombo = []\n for (let i = 0; i < accelDistBins.length; i++){\n let dist_bin = accelDistBins[i].dist_bin \n let variance = accelDistBins[i].variance\n for(let j = 0; j < avgCounts.length; j++){\n if (avgCounts[j].dist_bin == dist_bin){\n newCombo.push({dist_bin: dist_bin, variance: variance, count: avgCounts[j].count})\n }\n }\n }\n return newCombo\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"accelCombo = getDistBinAvgCountCombo(accelDistBins, avgCounts)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"gyroCombo = getDistBinAvgCountCombo(gyroDistBins, avgCounts)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"magCombo = getDistBinAvgCountCombo(magDistBins, avgCounts)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"distBinsObj = getObj(accelCombo, gyroCombo, magCombo)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"countColor = d3.scaleSequential()\n .domain([3, 64])\n .interpolator(d3.interpolateRgbBasis(d3.schemeBlues[9].slice(2)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"recipeColor = d3.scaleOrdinal()\n .domain(recipes)\n .range([\"#1f77b4\",\"#d62728\", \"#2ca02c\", \"#ff7f0e\", \"#9467bd\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"IMUsensorlist = [\"Accelerometer\", \"Gyroscope\", \"Magnetometer\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"avgRecipeDist = Array.from(d3.rollup(\n comboArr,\n group => d3.mean(group, recipe_type => recipe_type.Average_Distance_Whole_Recording),\n recipe_type => recipe_type.recipe_type\n), ([recipe_type, avg_recipe_dist]) => ({ recipe_type, avg_recipe_dist }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"avgRecipeDistList = avgRecipeDist.map(a => a.avg_recipe_dist)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"function getComboArrAvgRecipeDist(comboArr, avgRecipeDist){\n let returnArr = comboArr\n for (let i = 0; i < comboArr.length; i++){\n let recipe = comboArr[i].recipe_type\n for (let j = 0; j < avgRecipeDist.length; j++){\n if (avgRecipeDist[j].recipe_type == recipe){\n returnArr[i][\"avg_recipe_dist\"] = avgRecipeDist[j].avg_recipe_dist\n }\n }\n }\n return returnArr\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"comboArrAvgRecipeDist = getComboArrAvgRecipeDist(comboArr, avgRecipeDist)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"accel_recipe_mins = d3.rollup(\n comboArrAvgRecipeDist,\n group => d3.min(group, recipe => recipe.Accelerometer),\n recipe => recipe.recipe_type\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"recipeDistColor = d3.scaleOrdinal()\n .domain(avgRecipeDistList)\n .range([\"#1f77b4\", \"#ff7f0e\", \"#2ca02c\", \"#d62728\", \"#9467bd\"])\n//orange \"#ff7f0e\" green \"#2ca02c\" red \"#d62728\" purple \"#9467bd\" blue \"#1f77b4\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":" function recipeBoxplot(){\n let chart = BoxPlot(comboArrAvgRecipeDist, {\n //.filter(d => selections.get(d.recipe_type)\n x: d => d[\"avg_recipe_dist\"],\n y: d => d[IMUsensor],\n xLabel: \"Avg Distance Traveled\",\n yLabel: \"Avg Variance\",\n fill: d => recipeDistColor(d.quartiles[0]),\n width: 480,\n height: 300\n})\n return chart\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"viewof IMUsensor = Inputs.select(IMUsensorlist, {value: \"Accelerometer\", label: \"Select IMU sensor:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"{\n const varDistScatter = varDistScatterplot();\n const recipeBox = recipeBoxplot();\n\n // update the scatterplot when the box plot is clicked\n //d3.select(recipeBox).on('input', () => {\n //varDistScatter.update(recipeBox.value);\n //});\n\n // intial state of scatterplot\n //varDistScatter.update(recipeBox.value);\n\n // use HTML to place the two charts next to each other\n return html`

${recipeBox}${varDistScatter}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 31:"$30:body"