2f:T6e2,function accelBars() { const margin = {top: 10, right: 10, bottom: 10, left: 10}; /* width is a part of the Observable standard library. it contains the width of the page and is updated when you resize the page. */ const visWidth = 300 - margin.left - margin.right; const visHeight = 150 - 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})`); // create scales const x = d3.scaleLinear() .domain(d3.extent(accel_processed_arr.flat(), d => d.magnitude)) .range([0, visWidth]); const y = d3.scaleBand() .domain(["x", "y", "z"]) .range([0, visHeight]) .padding(0.2); // add the x Axis svg.append("g") .attr("transform", "translate(0," + visHeight + ")") .call(d3.axisBottom(x)); // add the y Axis svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + x(0) + ",0)") .call(d3.axisRight(y).tickSize(0)); // draw bars let selectedSecAccel = processed_arr[0][dataIndex] svg.selectAll(".bar") .data(selectedSecAccel) .enter().append("rect") .attr("class", function (d) { return "bar bar--" + (d.magnitude < 0 ? "negative" : "positive"); }) .attr("x", function (d) { return x(Math.min(0, d.magnitude)); }) .attr("y", function (d) { return y(d.axis); }) .attr("width", function (d) { return Math.abs(x(d.magnitude) - x(0)); }) .attr("height", y.bandwidth()) .attr("fill", function (d) {return colors(d.axis)}); return svg.node(); }30:T6dd,function magBars() { const margin = {top: 10, right: 10, bottom: 10, left: 10}; /* width is a part of the Observable standard library. it contains the width of the page and is updated when you resize the page. */ const visWidth = 300 - margin.left - margin.right; const visHeight = 150 - 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})`); // create scales const x = d3.scaleLinear() .domain(d3.extent(mag_processed_arr.flat(), d => d.magnitude)) .range([0, visWidth]); const y = d3.scaleBand() .domain(["x", "y", "z"]) .range([0, visHeight]) .padding(0.2); // add the x Axis svg.append("g") .attr("transform", "translate(0," + visHeight + ")") .call(d3.axisBottom(x)); // add the y Axis svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + x(0) + ",0)") .call(d3.axisRight(y).tickSize(0)); // draw bars let selectedSecMag = processed_arr[1][dataIndex] svg.selectAll(".bar") .data(selectedSecMag) .enter().append("rect") .attr("class", function (d) { return "bar bar--" + (d.magnitude < 0 ? "negative" : "positive"); }) .attr("x", function (d) { return x(Math.min(0, d.magnitude)); }) .attr("y", function (d) { return y(d.axis); }) .attr("width", function (d) { return Math.abs(x(d.magnitude) - x(0)); }) .attr("height", y.bandwidth()) .attr("fill", function (d) {return colors(d.axis)}); return svg.node(); }31:T883,function accelLines() { const margin = {top: 10, right: 10, bottom: 20, left: 40}; const visWidth = 300 - margin.left - margin.right; const visHeight = 150 - 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})`); // create scales const x = d3.scaleLinear() .domain([0, duration]) .range([0, visWidth]); const y = d3.scaleLinear() .domain(d3.extent(processed_arr[0].flat(), d => d.magnitude)).nice() .range([visHeight, 0]); // create and add axes const xAxis = d3.axisBottom(x); g.append("g") .attr("transform", `translate(0, ${visHeight})`) .call(xAxis); const yAxis = d3.axisLeft(y); g.append("g") .call(yAxis); // draw lines const xline = d3.line() .x(d => x(d.time)) .y(d => y(d.magnitude)); g.append("path") .datum(processed_arr[0].map(function(value,index) { return value[0]; })) .attr("d", xline) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 2); const yline = d3.line() .x(d => x(d.time)) .y(d => y(d.magnitude)); g.append("path") .datum(processed_arr[0].map(function(value,index) { return value[1]; })) .attr("d", yline) .attr("fill", "none") .attr("stroke", "orange") .attr("stroke-width", 2); const zline = d3.line() .x(d => x(d.time)) .y(d => y(d.magnitude)); g.append("path") .datum(processed_arr[0].map(function(value,index) { return value[2]; })) .attr("d", zline) .attr("fill", "none") .attr("stroke", "green") .attr("stroke-width", 2); let selectedSecAccelLine = processed_arr[0][dataIndex][0].time g.append("line") .attr("x1", x(selectedSecAccelLine)) .attr("y1", 0) .attr("x2", x(selectedSecAccelLine)) .attr("y2", visHeight) .style("stroke-width", 2) .style("stroke", "red") .style("fill", "none"); return svg.node(); }32:T884,function magLines() { const margin = {top: 10, right: 10, bottom: 40, left: 40}; const visWidth = 300 - margin.left - margin.right; const visHeight = 150 - 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})`); // create scales const x = d3.scaleLinear() .domain([0, duration]) .range([0, visWidth]); const y = d3.scaleLinear() .domain(d3.extent(processed_arr[1].flat(), d => d.magnitude)).nice() .range([visHeight, 0]); // create and add axes const xAxis = d3.axisBottom(x); g.append("g") .attr("transform", `translate(0, ${visHeight})`) .call(xAxis); const yAxis = d3.axisLeft(y); g.append("g") .call(yAxis); // draw lines const xline = d3.line() .x(d => x(d.time)) .y(d => y(d.magnitude)); g.append("path") .datum(processed_arr[1].map(function(value,index) { return value[0]; })) .attr("d", xline) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 2); const yline = d3.line() .x(d => x(d.time)) .y(d => y(d.magnitude)); g.append("path") .datum(processed_arr[1].map(function(value,index) { return value[1]; })) .attr("d", yline) .attr("fill", "none") .attr("stroke", "orange") .attr("stroke-width", 2); const zline = d3.line() .x(d => x(d.time)) .y(d => y(d.magnitude)); g.append("path") .datum(processed_arr[1].map(function(value,index) { return value[2]; })) .attr("d", zline) .attr("fill", "none") .attr("stroke", "green") .attr("stroke-width", 2); let selectedSecAccelLine = processed_arr[1][dataIndex][0].time g.append("line") .attr("x1", x(selectedSecAccelLine)) .attr("y1", 0) .attr("x2", x(selectedSecAccelLine)) .attr("y2", visHeight) .style("stroke-width", 2) .style("stroke", "red") .style("fill", "none"); return svg.node(); }33:[{"id":"aea0bad65e6bec047568cd28a97cf824168c40a1ef5163a1b19df25745c2acfdc1b4693c92424a29e10b8690a4111c14c7bd2e95f365bedf4ebefb8667491972","href":"https://static.observableusercontent.com/files/aea0bad65e6bec047568cd28a97cf824168c40a1ef5163a1b19df25745c2acfdc1b4693c92424a29e10b8690a4111c14c7bd2e95f365bedf4ebefb8667491972","name":"coffee-test-1-imumag.json","type":"application/json","lastModified":1676922142214.251,"size":1117834},{"id":"674fa3d7a15e28a0b1c1cb591fba93419382303b4932cde3968412224ac3c264a2f7c639f87502de79605044ad4a3d5d50a623f7fb2e4a2410926f25c58e1b9d","href":"https://static.observableusercontent.com/files/674fa3d7a15e28a0b1c1cb591fba93419382303b4932cde3968412224ac3c264a2f7c639f87502de79605044ad4a3d5d50a623f7fb2e4a2410926f25c58e1b9d","name":"coffee-test-1-imuaccel.json","type":"application/json","lastModified":1676922143070.733,"size":13483319},{"id":"4d3c6110bfbaf6e27d40c7ad076b098459baf7f679de7df07fcdb88f2b8441d325bb44f882f3f5bacb3162de4c518072bbe1839f3a730342f32b3e1f90edffa9","href":"https://static.observableusercontent.com/files/4d3c6110bfbaf6e27d40c7ad076b098459baf7f679de7df07fcdb88f2b8441d325bb44f882f3f5bacb3162de4c518072bbe1839f3a730342f32b3e1f90edffa9","name":"coffee-test-1-imugyro.json.zip","type":"application/zip","lastModified":1677013553025.583,"size":22437690}] 2d:{"title":"IMU Dashboard","cells":[{"id":13,"value":"# IMU Dashboard","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"### Data","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"raw_data_accel = FileAttachment(\"coffee-test-1-imuaccel.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"raw_data_mag = FileAttachment(\"coffee-test-1-imumag.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"duration = 414","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"### Need \n- 3 bar charts that change at each timestep\n- 3 line plots with line tracker for playback\n- way to transition between them by clicking (need to be able to put the line chart back too)","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"### Bar Charts\n- need 3 in the same SVG\n- x axis is magnitude \n- y axis is accel/gyro/mag x/y/z\n- aka horizontal ","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"### Data Preprocessing","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"function raw_to_secs(raw_data_arr, duration){\n let increment = raw_data_arr.length/duration\n let processed_arr = [[{axis: \"x\", magnitude: 0, time: 0},{axis: \"y\", magnitude: 0, time: 0},{axis: \"z\", magnitude: 0, time: 0}]];\n for (let i = 0; i < duration; i++) {\n let subset_arr = raw_data_arr.slice(i*increment, (i*increment)+increment)\n processed_arr.push([{axis: \"x\", magnitude: d3.mean(subset_arr.map(function(value,index) { return value[0]; })), time: i + 1}, {axis: \"y\", magnitude: d3.mean(subset_arr.map(function(value,index) { return value[1]; })), time: i + 1}, {axis: \"z\", magnitude: d3.mean(subset_arr.map(function(value,index) { return value[2]; })), time: i + 1}])\n }\n return processed_arr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"accel_processed_arr = raw_to_secs(raw_data_accel, duration)","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"mag_processed_arr = raw_to_secs(raw_data_mag, duration)","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"processed_arr = [accel_processed_arr, mag_processed_arr]","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"colors = d3.scaleOrdinal()\n .domain([\"x\", \"y\", \"z\"])\n .range(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"viewof dataIndex = Inputs.range([0, processed_arr[0].length - 1], {step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"{\n const accelBarPlot = accelBars();\n const accelLinePlot = accelLines();\n\n // use HTML to place the two charts next to each other\n return html`

${accelLinePlot}${accelBarPlot}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"{\n const accelBarPlot = accelBars();\n const accelLinePlot = accelLines();\n\n // use HTML to place the two charts next to each other\n return html`

${accelLinePlot}${accelBarPlot}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"{\n const magBarPlot = magBars();\n const magLinePlot = magLines();\n\n // use HTML to place the two charts next to each other\n return html`

${magLinePlot}${magBarPlot}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"

Click the blue circle\n

","pinned":false,"hidden":false,"mode":"html"},{"id":280,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":277,"value":"## Functions","pinned":false,"hidden":false,"mode":"md"},{"id":263,"value":"function hideSVG() {\n var style = document.getElementById(\"rect\").style.display;\n if (style === \"none\") document.getElementById(\"rect\").style.display = \"block\";\n else document.getElementById(\"rect\").style.display = \"none\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}