27:null 28:["$","title",null,{"children":"Visualizing the loss of rod and cone photoreceptor cells (archived) | S. Scott Whitmore | Observable"}] 2d:Td45,// bscan_canvas_segmentation = function(image_data, thickness_data, show_bscan, is_simulated){ bscan_canvas_segmentation = { // Modifying Mike Bostock's example: https://observablehq.com/@d3/canvas-horizon-chart const div = html`

`; let bscan = image_data.filter(d => d.laterality == which_eye ) let width = 768 let height = 496 // image_data.filter(d => d.laterality == which_eye )[0].image const canvas = d3.select(div) .selectAll("canvas") .data(bscan) .enter().append(() => DOM.context2d(width, height).canvas) .style("position", "absolute") .style("width", `${width}px`) .style("height", `${height}px`) .each(draw_bscan) const svg = d3.select(div.appendChild(DOM.svg(768, 496))) .style("position", "relative") // TASK: Add line data here... // svg.append("g") // .call(xAxis); let data_no_vitreous = thickness_modified_eye .filter(d => d["surface_id"] > 1) .orderby("surface_id") let data = Array.from(d3.group(data_no_vitreous, d => d.surface_id), ([key, value]) => ({key, value})) let x = d3.scaleLinear() .range([0, width]) .domain([1,768]) let y = d3.scaleLinear() .range([height, 0]) .domain(y_domain) let line = d3.line() .x(d => x(d.ascan_id)) .y(d => y(d.z_um)) let area = d3.area() .x(d => x(d.ascan_id)) .y0(496) .y1(d => y(d.z_um)) let color = d3.scaleOrdinal() .domain(d3.range(2, 12)) .range(d3.schemePaired) let layers = svg.append("g") .selectAll(".layers") .data(data) .enter().append("path") .attr("id", d => +d.key) .attr("stroke", d => color(+d.key)) // .attr("stroke", d => color(+d.key)) .attr("fill", d => color(+d.key)) // .attr("fill", d => color(+d.key)) .attr("opacity", +(show_layers == "Layers")) .attr("d", d=> area(d.value)) let lines = svg.append("g") .selectAll(".surfaces") .data(data) .enter().append("path") .attr("id", d => +d.key) .attr("stroke", d => color(+d.key)) .attr("fill", "none") .attr("opacity", +(show_layers == "Surfaces")) .attr("stroke-width", 2) .attr("d", d=> line(d.value)) function draw_bscan (d) { const context = this.getContext("2d"); // canvas.style = "width: 60%"; this.width = width this.height = height console.log("this:", this.width, this.height) context.drawImage(d.image, 0, 0, width, height); if(show_bscan) { const bscanData = context.getImageData( 0, 0, width, height ); console.log("bscanData: width = ", bscanData.width, ", height = ", bscanData.height) // modify_segmentation(bscanData.data, thickness_modified_eye.orderby("surface_id").objects()) modify_working(bscanData.data, thickness_modified_eye.orderby("surface_id").objects()) console.log("bscanData: width = ", bscanData.width, ", height = ", bscanData.height) context.putImageData(bscanData, 0, 0); } // Change the title if photoreceptor survival drops below 100% let title = "Original" if(is_simulated & show_bscan) { title = "Simulation" } context.fillStyle = "#B88A00"; context.font = "30px Helvetica"; context.fillText(title, 10, 40); // return canvas; } return div }2e:T63e,// To use copied code replace "data" with your own variable modify_thickness = function(data, rods_surviving, cones_surviving) { let thickness_modified = aq.from(data) .derive( { thickness_modified: aq.escape(d => d.is_outerretina * d.thickness * (d.proportion_rods * rods_surviving + (1 - d.proportion_rods) * cones_surviving) + (1 - d.is_outerretina) * d.thickness) } ) .derive({laterality_ascan_group: d => d.laterality + "_" + d.ascan_id}) .groupby('laterality_ascan_group') .orderby("ascan_id") .orderby(aq.desc("surface_id")) .derive({ z_original: aq.rolling(d => op.sum(d.thickness)) }) .derive({ thickness_residual: d => op.sum(d.thickness) - op.sum(d.thickness_modified)}) .derive({ thickness_modified_adjusted: d => (d.surface_id == 1) ? d.thickness_modified + d.thickness_residual : d.thickness_modified }) // For dealing with voxel data: .derive({ thickness_mod_rounded: d => Math.round(d.thickness_modified_adjusted)}) .derive({ thickness_mod_rounded_residual: d => op.sum(d.thickness) - op.sum(d.thickness_mod_rounded) }) .derive({ thickness_mod_rounded_adjusted: d => (d.surface_id == 1) ? d.thickness_mod_rounded + d.thickness_mod_rounded_residual : d.thickness_mod_rounded }) .derive({ z: aq.rolling(d => op.sum(d.thickness_modified_adjusted)) }) .derive({ z_um: d => (496 - d.z) * d.z_units * 1000}) .ungroup() // .objects() // Uncomment to return an array of objects return thickness_modified } 2f:T7e5,modify_segmentation = function(data, thickness_data) { for(let ascan_id = 0; ascan_id < 768; ascan_id++) { // console.log("ascan_id = ", ascan_id) // The A-scans begin at 1 not 0 let surface_positions = thickness_data.filter(d => d.ascan_id == ascan_id+1).map(d => d.z_original) .sort() // Add the position of the vitreous surface_positions.unshift(0) surface_positions.pop() // console.log("surface_positions: ") // console.log(surface_positions) let modified_thicknesses = thickness_data.filter(d => d.ascan_id == ascan_id+1) .sort((a, b) => (a.surface_id > b.surface_id) ? 1 : -1) .map(d => d.thickness_mod_rounded_adjusted) // console.log("modified_thicknesses:") // console.log(modified_thicknesses) let ascan_thicknesses = compute_thickness(surface_positions, 496) // let ascan_original = inverse_rle(ascan_thicknesses, d3.range(0, 13).map(d=> 255 * d / 12)).reverse() let ascan_original = inverse_rle(modified_thicknesses, d3.range(0, 13).map(d=> 255 * d / 12)) // let ascan_original = new Array(496) // // Copy the original data // for(let row_index = 0; row_index < 496; row_index++) { // let array_index = 768*4*row_index + ascan_id*4 // ascan_original[row_index] = data[array_index] // } // console.log("ascan_original:") // console.log(ascan_original) // Modify the copied data // let ascan_modified = modify_vector(ascan_original, surface_positions, modified_thicknesses) let ascan_modified = ascan_original // console.log("ascan_modified:") // console.log(ascan_modified) // Copy the modified data back into the data object for(let row_index = 0; row_index < 496; row_index++) { let array_index = 768*4*row_index + ascan_id*4 data[array_index + 0] = ascan_modified[row_index] data[array_index + 1] = ascan_modified[row_index] data[array_index + 2] = ascan_modified[row_index] } } }30:T839,modify_working = function(data, thickness_data) { for(let ascan_id = 0; ascan_id < 768; ascan_id++) { // console.log("ascan_id = ", ascan_id) // The A-scans begin at 1 not 0 let surface_positions = thickness_data.filter(d => d.ascan_id == ascan_id+1).map(d => d.z_original) .sort() // Add the position of the vitreous surface_positions.unshift(0) surface_positions.pop() // console.log("surface_positions: ") // console.log(surface_positions) let modified_thicknesses = thickness_data.filter(d => d.ascan_id == ascan_id+1) .sort((a, b) => (a.surface_id > b.surface_id) ? 1 : -1) .map(d => d.thickness_mod_rounded_adjusted) // console.log("modified_thicknesses:") // console.log(modified_thicknesses) // let ascan_thicknesses = compute_thickness(surface_positions, 496) // let ascan_original = inverse_rle(modified_thicknesses, d3.range(0, 13).map(d=> 255 * d / 12)) let ascan_original = new Array(496) // Copy the original data for(let row_index = 0; row_index < 496; row_index++) { let array_index = 768*4*row_index + ascan_id*4 ascan_original[row_index] = data[array_index] } // console.log("ascan_original:") // console.log(ascan_original) // Modify the copied data // Confession: I'm not sure why I needed to reverse the vectors where I did--but it works. // If someone wants to suggest how to make this simpler, please do! let ascan_modified = modify_vector(ascan_original.reverse(), surface_positions, modified_thicknesses.reverse()).reverse() // let ascan_modified = ascan_original // console.log("ascan_modified:") // console.log(ascan_modified) // Copy the modified data back into the data object for(let row_index = 0; row_index < 496; row_index++) { let array_index = 768*4*row_index + ascan_id*4 data[array_index + 0] = ascan_modified[row_index] data[array_index + 1] = ascan_modified[row_index] data[array_index + 2] = ascan_modified[row_index] } } }31:T5da,modify_bscan = function(data, thickness_data) { let ascan_index = d3.range(0, 496) // For each A-scan (column of pixels) for(let j = 0; j < 768; j++) { console.log("j = ", j) // The A-scans begin at 1 not 0 let surface_positions = thickness_data.filter(d => d.ascan_id == j+1).map(d => d.z_original) .sort() console.log("surface_positions: ") console.log(surface_positions) let modified_thicknesses = thickness_data.filter(d => d.ascan_id == j+1) .sort((a, b) => (a.surface_id > b.surface_id) ? 1 : -1) .map(d => d.thickness_mod_rounded_adjusted) console.log("modified_thicknesses:") console.log(modified_thicknesses) let ascan_original = new Array(496) // Copy the original data into a separate array for(let i = j; i < data.length/4; i += 768) { let index = Math.round(i/(4*768)) ascan_original[index] = data[i*4 + 0] // i/(4*768) / 496 } console.log("ascan_original:") console.log(ascan_original) // Modify the copied data let ascan_modified = modify_vector(ascan_original, surface_positions, modified_thicknesses) console.log("ascan_modified:") console.log(ascan_modified) // Replace the original A-scan data for(let i = j; i < data.length/4; i += 768) { let index = Math.round(i/(4*768)) data[i*4 + 0] = ascan_modified[index] data[i*4 + 1] = ascan_modified[index] data[i*4 + 2] = ascan_modified[index] } } }32:T6d8,function color_bscan(data, thickness_data) { // // WORKING: // // Colors the every pixel in the first row red // for(let i = 0; i < 768*4; i += 4) { // data[i + 0] = 255 // data[i + 1] = 0 // data[i + 2] = 0 // } // // // WORKING: // // Colors every pixel in the first column green // for(let i = 0; i < data.length; i += 4*768) { // data[i + 0] = 0 // data[i + 1] = 255 // data[i + 2] = 0 // } // // // WORKING: // // Color the 8th column blue // for(let i = 4*8; i < data.length; i += 4*768) { // data[i + 0] = 0 // data[i + 1] = 0 // data[i + 2] = 255 // } // // // WORKING: // // Color every jth column purple // let jth = 16*2 // for(let j = 0; j < data.length; j += jth*4) { // data[j + 0] = 255 // data[j + 1] = 0 // data[j + 2] = 255 // } // // // WORKING: // // Colors every pixel in the first column green // // For each A-scan (column of pixels) // for(let j = 0; j < 768; j++) { // for(let i = 4*j; i < data.length; i += 4*768) { // data[i + 0] = data[i + 0] // data[i + 1] = 255 * j/768 // data[i + 2] = data[i + 2] // } // } // // WORKING: // // Colors every pixel in the first column green // // For each A-scan (column of pixels) // for(let j = 0; j < 768; j++) { // for(let i = j; i < data.length/4; i += 768) { // data[i*4 + 0] = data[i*4 + 0] // data[i*4 + 1] = 255 * j/768 // data[i*4 + 2] = data[i*4 + 2] // } // } for(let j = 0; j < 768; j++) { for(let i = j; i < 496; i++) { data[j*4 * i + 0] = data[j*4 * i + 0] data[j*4 * i + 1] = 255 * j/768 data[j*4 * i + 2] = data[j*4 * i + 2] } } }33:[{"id":"42363388cf383f7a214f64391f02a2ff014c8d1c10758609966b2bfebd2323ac985f2ac4886359f9dda6810ad207a57232318c8f8d96c0d93843e594eaebaf1b","href":"https://static.observableusercontent.com/files/42363388cf383f7a214f64391f02a2ff014c8d1c10758609966b2bfebd2323ac985f2ac4886359f9dda6810ad207a57232318c8f8d96c0d93843e594eaebaf1b","name":"central_bscan_od@2.png","type":"image/png","lastModified":1675867313634.493,"size":250429},{"id":"04448afec60224c9eb6531089b4fc4c208d2967d3f878b5e9fef52fa92b147764a029185c1da4bf7b6d8b27e6ef21a2c9cdfb3d60e249e7283a5953ce75b24dc","href":"https://static.observableusercontent.com/files/04448afec60224c9eb6531089b4fc4c208d2967d3f878b5e9fef52fa92b147764a029185c1da4bf7b6d8b27e6ef21a2c9cdfb3d60e249e7283a5953ce75b24dc","name":"central_bscan_os@1.png","type":"image/png","lastModified":1675867313634.493,"size":213570},{"id":"aa6a276a6ba08c2f167db1b4004ef90d2a8f6184c494562305086f7bcbeead92b37101fe9e11964354291874938ea0fb7b0de1012d0a657b6d09c0102438ff41","href":"https://static.observableusercontent.com/files/aa6a276a6ba08c2f167db1b4004ef90d2a8f6184c494562305086f7bcbeead92b37101fe9e11964354291874938ea0fb7b0de1012d0a657b6d09c0102438ff41","name":"central_bscan_data@2.tsv","type":"text/tab-separated-values","lastModified":1675867313634.493,"size":1030413}] 2b:{"id":"fd4f656685f9e489","slug":null,"title":"Visualizing the loss of rod and cone photoreceptor cells (archived)","thumbnail":"f7a567521d7a082d0a62e64b01774ef103d46df47694ea5644dfd5db206a0b86","access_level":"public","create_time":"$D2023-02-08T14:41:53.634Z","update_time":"$D2023-02-08T14:42:34.213Z","view_time":null,"first_public_time":"$D2023-02-08T14:41:53.634Z","has_unpublished_edits":null,"fork":{"id":"833c31731ec28006","slug":"simulating-rod-and-cone-loss","title":"Visualizing the loss of rod and cone photoreceptor cells","owner":{"id":"9f9ba4a25d6eb4e6","login":"barefootbiology","name":"S. Scott Whitmore"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9f9ba4a25d6eb4e6","login":"barefootbiology","name":"S. Scott Whitmore","avatar_url":"https://avatars-next.observableusercontent.com/d6de548b1e86c3eebe1ecbd5fe21dedd4bc39e7a2fdfa579b00cd99d549f6e0a","tier":"starter_2024"},"version":2011,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dd2940d75505b352","login":"barefootbiology","name":"S. Scott Whitmore","avatar_url":"https://avatars-next.observableusercontent.com/d6de548b1e86c3eebe1ecbd5fe21dedd4bc39e7a2fdfa579b00cd99d549f6e0a","tier":null}],"members":[{"type":"individual","id":"dd2940d75505b352","login":"barefootbiology","name":"S. Scott Whitmore","avatar_url":"https://avatars-next.observableusercontent.com/d6de548b1e86c3eebe1ecbd5fe21dedd4bc39e7a2fdfa579b00cd99d549f6e0a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Visualizing the loss of rod and cone photoreceptor cells (archived)","cells":[{"id":0,"value":"# Visualizing the loss of rod and cone photoreceptor cells (archived)\n\nCould you guess what percentage of photoreceptor cells were lost? The difference between 100% surviving rods and 50% surviving rods is subtle. To see just how subtle cell loss can be, try changing the proportion of rods and cones below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1959,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"legend = Swatches(d3.scaleOrdinal(plot_fill.domain.map(d => layer_scale(d - 1)), plot_fill.range), {title: \"Retinal layers\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"html`Figure 1: ${(rods_surviving * 100).toFixed(0)}% rods surviving and ${(cones_surviving * 100).toFixed(0)}% cones. Adjust the controls below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1957,"value":"viewof show_layers = Inputs.radio([\"None\", \"Surfaces\", \"Layers\"], {value: \"None\", label: \"Display retinal layer segmentation?\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"viewof rods_surviving = Inputs.range([0, 1], {step: 0.01, label: \"Proportion of rods surviving\", value: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"viewof cones_surviving = Inputs.range([0, 1], {step: 0.01, label: \"Proportion of cones surviving\", value: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"viewof which_eye = Inputs.radio([\"OD\", \"OS\"], {label: \"Select eye\", value: \"OD\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1758,"value":"viewof show_bscan = Inputs.toggle({label: \"Simulated B-scan: Show / Hide\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"## Quiz\nTry guessing what proportion of rod and cone photoreceptor cells survive in the following patient:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1837,"value":"bscan_canvas(bscan_random, thickness_modified_eye_random.orderby(\"surface_id\").objects(), true, true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"viewof new_quiz = Inputs.button(\"New quiz\", {reduce: () => set(viewof submit_guess, 0)} )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1863,"value":"Your guesses:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"viewof rods_surviving_guess = Inputs.range([0, 1], {step: 0.01, label: \"Proportion of rods surviving\", value: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"viewof cones_surviving_guess = Inputs.range([0, 1], {step: 0.01, label: \"Proportion of cones surviving\", value: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"viewof submit_guess = Inputs.button(\"Submit guess\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"submit_guess ? md`Actual surviving rods: ${Math.round(rods_surviving_random * 100)}%. Your answer was off by ${Math.round(rods_surviving_difference)}%
Actual surviving cones: ${Math.round(cones_surviving_random * 100)}%. Your answer was off by ${Math.round(cones_surviving_difference)}%` : md`Awaiting your guess.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1984,"value":"## How it works\n\nTo build the model, we used rod and cone density data originally published in (Curcio, C. A., Sloan, K. R., Kalina, R. E., Hendrickson, A. E., 1990. [Human photoreceptor topography](https://doi.org/10.1002/cne.902920402). J Comp Neurol 292, 497-523. PMID 2324310). Dr. Curcio has made the data available for download from her [research website](https://christineacurcio.com/PRtopo/). Using custom software, we registered the cell density data to an OCT volume in R, interpolated cell densities for every A-scan in the volume, and computed the expected proportion of rods and cones at each position. The model implemented here assumes that thickness of the outer retina is proportional to the surviving proportion of rods and cones.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":192,"value":"## Appendix A: Math","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"We modify the thickness data based on the number of surviving rods and cones:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":976,"value":"thickness_{new}= thickness_{original} \\times ((proportion_{rods}\\times surviving_{rods}) + (1 - proportion_{rods})\\times surviving_{cones} )","pinned":false,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"## Appendix B: Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"import { aq } from '@uwdata/arquero'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"### Data import","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"FileAttachment(\"central_bscan_od@2.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1095,"value":"image_data = [\n {laterality: \"OD\", image: bscan_od_image, url: \"https://raw.githubusercontent.com/barefootbiology/examplebscans/main/data/central_bscan_od.png\", url2: await FileAttachment(\"central_bscan_od@2.png\").url(), x: 0, y: 0}, \n {laterality: \"OS\", image: bscan_os_image, url: \"https://raw.githubusercontent.com/barefootbiology/examplebscans/main/data/central_bscan_os.png\", url2: await FileAttachment(\"central_bscan_os@1.png\").url(), x: 0, y: 0}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1953,"value":"current_bscan_data = {\n return { \"url\": simulated_bscan.toDataURL(), \"x\": 0, \"y\": 0 }\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1809,"value":"simulated_bscan = bscan_canvas(bscan, thickness_modified_eye.orderby(\"surface_id\").objects(), show_bscan, is_simulated)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1176,"value":"image_data_eye = aq.from(image_data)\n .filter(aq.escape(d => d[\"laterality\"] == which_eye))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1504,"value":"thickness_modified_eye.orderby(\"surface_id\").objects().filter(d => d.ascan_id == 300).map(d => d.thickness_mod_rounded_adjusted)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1950,"value":"FileAttachment(\"central_bscan_od@2.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1433,"value":"bscan_canvas = function(bscan, thickness_data, show_bscan, is_simulated){\n \n const canvas = DOM.canvas(bscan.naturalWidth, bscan.naturalHeight);\n const context = canvas.getContext(\"2d\");\n canvas.style = \"width: 60%\";\n \n context.drawImage(bscan, 0, 0, bscan.naturalWidth, bscan.naturalHeight);\n\n \n if(show_bscan) {\n \n const bscanData = context.getImageData(\n 0,\n 0,\n bscan.naturalWidth,\n bscan.naturalHeight\n );\n \n // modify_segmentation(bscanData.data, thickness_modified_eye.orderby(\"surface_id\").objects())\n modify_working(bscanData.data, thickness_data)\n \n context.putImageData(bscanData, 0, 0);\n }\n\n // Change the title if photoreceptor survival drops below 100%\n let title = \"Original\"\n if(is_simulated & show_bscan) {\n title = \"Simulation\"\n } \n \n context.fillStyle = \"#B88A00\";\n context.font = \"30px Helvetica\";\n context.fillText(title, 10, 40);\n\n return canvas;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1063,"value":"aq.from(thickness_data)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"data_file = FileAttachment(\"central_bscan_data@2.tsv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"thickness_data = d3.tsvParse(await data_file.text(data_file), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1342,"value":"thickness_modified = modify_thickness(thickness_data, rods_surviving, cones_surviving)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"thickness_modified_eye = thickness_modified\n .filter(aq.escape(d => d[\"laterality\"] == which_eye))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1002,"value":"Import central B-scan image:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"// Import data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"bscan_os_image = FileAttachment(\"central_bscan_os@1.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1010,"value":"bscan_od_image = FileAttachment(\"central_bscan_od@2.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1015,"value":"// Convert the segmentation to an array ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"### Basic plotting parameters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"Scales for plotting the original thickness data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"x = d3.scaleLinear()\n .domain([1, d3.max(thickness_data, d => d.ascan_id)])\n .range([margin.left, width - margin.right])\n .interpolate(d3.interpolateRound)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"x_mm = d3.scaleLinear()\n .domain([d3.min(thickness_data, d => d.x_mm), d3.max(thickness_data, d => d.x_mm)])\n .range([margin.left, width - margin.right])\n .interpolate(d3.interpolateRound)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"y = d3.scaleLinear()\n .domain([1, 496])\n .range([height - margin.top, margin.bottom])\n .interpolate(d3.interpolateRound)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"color_surface = d3.scaleOrdinal()\n .range(d3.schemePaired)\n .domain([2,3,4,5,6,7,8,9,10])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"Note that the y scale needs to flip the axis:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"Scales for the surface segmentation plots:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"margin = ({top: 20, right: 0, bottom: 0, left: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"surface_ids = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"These plotting functions are works in progress. I want to add a legend for the retinal layers, but haven't got it working yet.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"layer_scale = d3.scaleOrdinal()\n .domain([0,1,2,3,4,5,6,7,8,9,10,11])\n .range([\"vitreous\", \"nerve fiber layer\", \"ganglion cell layer\", \"inner plexiform layer\", \"inner nuclear layer\", \"outer plexiform layer\", \"outer nuclear layer\", \"ellipsoid zone\", \"outer segments\", \"interdigitation zone\", \"RPE/Bruch's membrane complex\", \"choroid and sclera\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"plot_fill = rodconeloss.scale(\"color\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"plot_fill.domain.map(d => layer_scale(d - 1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"### Experimental data wrangling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"I used these functions to experiment with data wrangling. See Mike Freeman's [\"Data Wrangler\"](https://observablehq.com/@observablehq/data-wrangler) notebook for details.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"import {Copier} from \"@mbostock/copier\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"import {Wrangler, op} from \"@observablehq/data-wrangler\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"// Use `Wrangler` whenever you want to play with arquero functions:\n// Wrangler(thickness_data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"### Values for the quiz","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"laterality_random = {\n new_quiz;\n yield [\"OD\", \"OS\"][d3.randomInt(0, 2)(1)]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"rods_surviving_random = {\n new_quiz;\n yield Math.round((d3.randomUniform(0, 1)(1) * 100)) / 100;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"cones_surviving_random = {\n new_quiz;\n yield Math.round(d3.randomUniform(0, 1)(1) * 100) / 100;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"cones_surviving_difference = (cones_surviving_random - cones_surviving_guess) * 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"rods_surviving_difference = (rods_surviving_random - rods_surviving_guess) * 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"// To use copied code replace \"data\" with your own variable\nthickness_modified_random = modify_thickness(thickness_data, rods_surviving_random, cones_surviving_random)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"thickness_modified_eye_random = thickness_modified_random\n .filter(aq.escape(d => d[\"laterality\"] == laterality_random))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"The `set` function let's one input change the value of another input. I'm using it for the \"Submit guess\" and \"New quiz\" buttons.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"import {set} from '@observablehq/synchronized-inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1194,"value":"### Simulating a B-scan","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1196,"value":"1. Get a single A-scan.\n2. Get the unmodified segmentation at this position.\n3. Get the modified segmentation at this position.\n4. Draw a three column picture showing the mapping from A-scan voxel intensities, unmodified segmentation, and modified segmentation.\n5. Work out the function to use these three sources as input data.\n6. Plot the modified intensity data as a fourth column.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1229,"value":"viewof which_ascan = Inputs.range([1, 768], {step: 1, label: \"Amount\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1204,"value":"thickness_modified_eye_ascan = thickness_modified_eye.filter(aq.escape(d => d[\"ascan_id\"] == which_ascan))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1268,"value":"// ascan_domain = [d3.min(thickness_modified_eye_ascan.objects().map(d => d.z_original)), d3.max(thickness_modified_eye_ascan.objects().map(d => d.z_original))]\nascan_domain = [1, 496]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1215,"value":"viewof ascan = {\n\n const segmentation_original = vl.markPoint({x: 100})\n .data(thickness_modified_eye_ascan)\n .encode(\n vl.x(),\n vl.y().fieldQ(\"z_original\").scale({domain: ascan_domain}),\n vl.stroke().fieldN('surface_id')\n )\n\n const segmentation_modified = vl.markPoint({x: 200})\n .data(thickness_modified_eye_ascan)\n .encode(\n vl.x(),\n vl.y().fieldQ(\"z\").scale({domain: ascan_domain}),\n vl.stroke().fieldN('surface_id')\n ) \n \n return vl.layer(segmentation_original, segmentation_modified)\n .render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"image_data.filter(d => d.laterality == which_eye)[0][\"image\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1288,"value":"bscan_od_image","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"plot_rodconeloss = function(data, layers) {\n let data_no_vitreous = data\n .filter(d => d[\"surface_id\"] > 1)\n .orderby(\"surface_id\")\n\n return Plot.plot({\n x: {domain: x_domain },\n y: {domain: y_domain}, \n color: {\n type: \"ordinal\",\n scheme: \"paired\"\n },\n marks: [\n Plot.areaY(data_no_vitreous, {x: \"x_mm\", y1: y_domain[0], y2: \"z_um\", fill: \"surface_id\", fillOpacity: +layers}),\n Plot.line(data_no_vitreous, {x: \"x_mm\", y: \"z_um\", stroke: \"surface_id\"})\n ]\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1391,"value":"x_domain = [d3.min(thickness_modified, d => d.x_mm), d3.max(thickness_modified, d => d.x_mm)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1401,"value":"y_domain = [496 * 0.003872 * 1000, 0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1294,"value":"## Generating a modified B-scan","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1300,"value":"import {modify_vector, inverse_rle, compute_thickness} from '@barefootbiology/resizing-segmented-vectors'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1319,"value":"TESTING:","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1309,"value":"v0 = d3.range(0, 20)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1313,"value":"s0 = [0, 5, 9, 12, 17]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1314,"value":"t4 = [8, 4, 3, 4, 1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1317,"value":"modify_vector(v0, s0, t4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1321,"value":"### Working with the B-scan image data\n\nHere's what we need:\n\n1. The B-scan image as a 2D array.\n2. The original surface positions as a 2D array. (Alternatively, we could use the original layer thicknesses.)\n3. The modified layer thicknesses as a 2D array.\n\nAlternatively, you could treat all the data as a giant 1D vector.\n\nA column in the B-scan images is called an A-scan.\n\nHere's what we'll do:\n\n1. Create a new container to hold the result.\n2. For each A-scan, run `modify_vector(bscan[i,], segmentation[i, ], modified_thickness[i, ])`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1419,"value":"// Get the current B-scan image\nbscan = image_data.filter(d => d.laterality == which_eye )[0].image","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1855,"value":"bscan_random = image_data.filter(d => d.laterality == laterality_random )[0].image","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1749,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1755,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1644,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1439,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1820,"value":"is_simulated = (rods_surviving < 1) | (cones_surviving < 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"rodconeloss_random = plot_rodconeloss(thickness_modified_eye_random, layers)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"viewof rodconeloss_vl = {\n\n // Add bscan as background. Later: use modified B-scan.\n const bscan = vl.markImage({\"width\": 400, \"height\": 200, \"aspect\": false, \"baseline\": \"top\"})\n // .data(image_data_eye)\n .data(current_bscan_data)\n .encode(\n vl.x().fieldQ(\"x\"),\n vl.y().fieldQ(\"y\"),\n vl.url().fieldN(\"url\")\n )\n \n const surfaces = vl.markLine({opacity: 1})\n .data(thickness_modified_eye)\n .encode(\n vl.x().fieldQ('x_mm').title('Millimeters from fovea'),\n vl.y().fieldQ('z_um').sort(\"descending\").title('Microns'),\n vl.detail().fieldN('surface_id'),\n vl.stroke().fieldN('surface_id')\n )\n .width(400)\n .height(200);\n\n return vl.layer(bscan, surfaces)\n .render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"viewof layers = Inputs.toggle({label: \"Layers: On / Off\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1379,"value":"rodconeloss = plot_rodconeloss(thickness_modified_eye, layers)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2c:"$2b:body"