2e:null 2f:["$","title",null,{"children":"Interactive Crossfilter Cumulative Firing Rate & Parallel Plots | Walter | Observable"}] 34:T4fa,md` ### Introduction __Experimental Aim__ The goal of this experiment is to improve the safety and efficacy of opioids for pain management. The interactive plots are a visualization of the activity of dozens of neurons recorded simultaneously in the Lateral Habenula nucleus. The Lateral Habenula is involved in the unpleasant (aversive) quality of pain. These experiments record the effect of different drug treatments on Lateral Habenula neurons. __Raw Data__ The raw data is collected using an array of 64 electrodes to record many neurons simultaneously. The neurons are in largely intact brain tissue within a micro-thin slice of brain only a couple neurons thick. The electrical signals are processed into the activity level of individual neurons. Data is pre-processed to create summarized and comparable metrics. __Interactive Cross-filtering Plots:__ This Observable notebook creates linked plots that allow for complex interactive cross-filtering of multi-neuronal data. The data in each of the six plots here are intimately related. Line color represents the same single neuron in each plot. Brushing (clicking the mouse and sliding) across colored lines in any plot will highlight that line/neuron in all plots and mute the un-brushed lines. `35:Td02,viewof selection = { const svg = d3.create("svg") .attr("viewBox", [-padding, 0, width, height]); svg.append("style") .text(`circle.hidden { fill: #000; fill-opacity: 1; r: ${point_radius.hidden}px; }`); svg.append("style") .text(`path.hidden { fill: none; stroke: steelblue; stroke-width: ${path_width.hidden}; }`); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); // New i, j are the x, y coords of cells in display. // Coordinate pair is created by d3.cross passed to .data() const cell = svg.append("g") .selectAll("g") .data(d3.cross(d3.range(panel_cols), d3.range(panel_rows))) .join("g") .attr("transform", ([i, j]) => `translate(${i * size},${j * size})`); cell.append("rect") .attr("fill", "none") .attr("stroke", "#aaa") .attr("x", padding / 2 + 0.5) .attr("y", padding / 2 + 0.5) .attr("width", size - padding) .attr("height", size - padding); // These i, j are the cell panel locations. To see how are they determined? add `.attr("r", j*5);` // i = 0,1,2 for each col in image // j = 0, 1 for each row in image cell.each(function([i, j]) { d3.select(this).selectAll("circle") .data(data_points.filter(d => !isNaN(d[tx_panel_array[j][i]]) && !isNaN(d[column_pointx[0]]))) .join("circle") .attr("cx", d => x[cellI(i, j)](d[column_pointx[cellI(i, j)]])) // hard to understand indexing of y[](). rewrite for clarity. .attr("cy", d => y[cellI(i, j)](d[tx_panel_array[j][i]])) }); const circle = cell.selectAll("circle") .attr("r", point_radius.visible) .attr("fill-opacity", point_radius.opacity_v) .attr("fill", d => z(d.unit)); // Label cells with column names svg.append("g") .style("font", "bold 10px sans-serif") .style("pointer-events", "none") .selectAll("text") .data(tx_panel_array.flat()) // tx_panel_array // columns .join("text") .attr("transform", (d, i) => `translate(${cellXY(i)[1] * size},${cellXY(i)[0] * size})`) .attr("x", padding) .attr("y", padding) .attr("dy", ".71em") .text((d, i, j) => d); // next three blocks add paths. const cell_paths = svg.append("g") .selectAll("g") .data(d3.cross(d3.range(panel_cols), d3.range(panel_rows))) // .data(d3.cross(d3.range(columns_points.length), d3.range(1))) // tx_panel_array[j][i] .join("g") .attr("transform", ([i, j]) => `translate(${i * size},${j * size})`); cell_paths.each(function([i, j]) { d3.select(this).selectAll("path") // .data(Object.values(data_paths_qq[columns_points[i]].series)) .data(Object.values(data_paths[tx_panel_array[j][i]].series)) .join("path") .style("mix-blend-mode", "hard-light") // hard-light // normal // multiply .attr("d", d => line(d.coords.map(xy => Object.assign(xy, {cell: cellI(i,j)})))); }); const path = svg.selectAll("path") //cell_paths .attr("fill", "none") .attr("stroke", d => z(d.unit)) // .attr("stroke", d => "green") .attr("stroke-width", path_width.visible) .attr("stroke-opacity", path_width.opacity_v) cell.call(brush, circle, path, svg); svg.property("value", [{'Table of Selected Data':'No data selected'}]) // return svg.node(); }36:T506,/** * Table Display Function * Sorts and drop keys in each object of a data array before table display * Also, changes the data column name to a table display name using Object{key:value} * Also, rounds numbers to fix decimal places. Default is 2 decimal places. * Example: reorderNames(selection, {"unit": "Unit", "tx": "Treatment"}) * @param {Object{"colName": "tableName",...}} key_order Strings of columns in desired display order * @param {array} array The data array of Objects where keys are columns in table * @param {int} fix Number of decimal places rounded. optional param. default = 2. * @returns {array} ordered_array Formated for table display */ reorderNames = function(array, key_order, fix=2) { const keys = Object.keys(key_order); var ordered_array = []; let keys_included = keys.map(key => (key in array[0])); if (keys_included.every(tf => tf)) { array.forEach((row) => { let newRow = {}; keys.forEach((key) => { var value = row[key]; // round if number if (typeof value === 'number') { newRow[key_order[key]] = value.toFixed(fix); } else { newRow[key_order[key]] = value; } }); ordered_array.push(newRow); }); }; return ordered_array; }37:Ta3e,function brush(cell, circle, path, svg) { const brush = d3.brush() .extent([[padding / 2, padding / 2], [size - padding / 2, size - padding / 2]]) .on("start", brushstarted) .on("brush", brushed) .on("end", brushended); cell.call(brush); let brushCell; // ID of cell array actively brushed // Clear the previously-active brush, if any. function brushstarted() { if (brushCell !== this) { d3.select(brushCell).call(brush.move, null); brushCell = this; } } // Highlight the selected circles. // [i, j] is __cell__ index; i is col, j is row // each circle (data point joined to) has style "hidden" set to true if outside brush box // brush box:: [[x0, y0], [x1, y1]] = selection // x[] (and y[]) is array of functions, each mapping the data of column to the pixels of svg // When each row in data is set to 'hidden' is applies directly to all cells, // which are linked to a single underlying representation of the data as a single matrix. function brushed({selection}, [i, j]) { let selected = []; let all_units = [...new Set(data_points.map(d => d.unit))]; let selected_units = []; let not_selected_units = []; let unique_selected_units = []; let unique_not_selected_units = []; let arr = []; if (selection) { const [[x0, y0], [x1, y1]] = selection; circle.classed("hidden", d => x0 >= x[cellI(i, j)](d[column_pointx[cellI(i, j)]]) || x1 <= x[cellI(i, j)](d[column_pointx[cellI(i, j)]]) || y0 >= y[cellI(i, j)](d[tx_panel_array[j][i]]) || y1 <= y[cellI(i, j)](d[tx_panel_array[j][i]]) || isNaN(y[cellI(i, j)](d[tx_panel_array[j][i]]))); // do not unhide points that are NaN in cell selected = data_points.filter( d => x0 <= x[cellI(i, j)](d[column_pointx[cellI(i, j)]]) && x1 >= x[cellI(i, j)](d[column_pointx[cellI(i, j)]]) && y0 <= y[cellI(i, j)](d[tx_panel_array[j][i]]) && y1 >= y[cellI(i, j)](d[tx_panel_array[j][i]])); selected_units = selected.map(d => d.unit); unique_selected_units = [...new Set(selected_units)]; unique_not_selected_units = all_units.filter(u => !unique_selected_units.includes(u)) path.classed("hidden", d => unique_not_selected_units.includes(d.unit)); } svg.property("value", selected).dispatch("input"); } // If the brush is empty, select all circles. function brushended({selection}) { if (selection) return; svg.property("value", []).dispatch("input"); circle.classed("hidden", false); path.classed("hidden", false); } }38:T465,yAxis = { const axis = d3.axisLeft() .ticks(6) .tickSize(-size + padding ); const axis_fr = d3.axisLeft() .ticks(6) .tickSize(-size + padding ) .tickValues([0.01, 0.02, 0.1, .2, 1, 2, 10, 20]) .tickFormat((d, i) => [0.01, 0.02, 0.1, .2, 1, 2, 10, 20][i]); // next: translate for each cell position. apply scale function for each cell. return g => g.selectAll("g").data(y).join("g") // .attr("transform", (d, i) => `translate(${(i * size)}, ${(i * size)})`) .attr("transform", (d, i) => `translate(${cellXY(i)[1] * size + padding/2}, ${cellXY(i)[0] * size})`) .each(function(d, i) { if (i == 5) { return d3.select(this).call(axis_fr.scale(d)).call(yFrAxisLabel); } else { return d3.select(this).call(axis.scale(d)).call(yAxisLabel);} }) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").attr("stroke", "#ddd")); } // var y_axis = d3.axisLeft().scale(yscale) // .tickValues([0, .2, .5, .70, 1]) // .tickFormat((d, i) => ['a', 'e', 'i', 'o', 'u'][i]);39:T4a9,/** * code to grab the value arrays for each column of data_paths * * @param {string} x_col : The column name containing paths x value * */ get_path_xy_arrays = function(data_points, col_list, x_col) { const unit_list = [...new Set(data_points.map(d => d.unit))] let temp_array = []; col_list.forEach(col_tx => {temp_array[col_tx] = []; unit_list.forEach(unit => { temp_array[col_tx][unit] = {unit: unit, values: [], x_idx: []}; }); }); data_points.forEach(row => { col_list.forEach(col_tx => { if (typeof row[col_tx] !== 'undefined') { temp_array[col_tx][row.unit]['values'].push(row[col_tx]); // path y value temp_array[col_tx][row.unit]['x_idx'].push(row[x_col[col_tx]]); // path x value } temp_array[col_tx][row.unit]['coords'] = zip_coord_arrays(temp_array[col_tx][row.unit]['x_idx'], temp_array[col_tx][row.unit]['values']); // use zip_coord_arrays() for d3.zip() }) }); return temp_array; }3a:[{"id":"687d40de1290c9c85547ccfa1dc018ab47e5526f74a844fac0c8fa98a52551e2e19f52bfe359310384d4b11281fc3748b0fa1d8db95f1bcba7cf9318201528a3","href":"https://static.observableusercontent.com/files/687d40de1290c9c85547ccfa1dc018ab47e5526f74a844fac0c8fa98a52551e2e19f52bfe359310384d4b11281fc3748b0fa1d8db95f1bcba7cf9318201528a3","name":"d3_cum_fr_10K_interp_825_16h06m19s.csv","type":"text/csv","lastModified":1632355034272.321,"size":1074380},{"id":"5a6d4f55b793c620e84457e26aa6fbc86e4a9fe2325af084f1067cafbf485b216c9daa4cfc860fd57736d81d833dbcd3eec055a943eafbb30789be55c8ebe377","href":"https://static.observableusercontent.com/files/5a6d4f55b793c620e84457e26aa6fbc86e4a9fe2325af084f1067cafbf485b216c9daa4cfc860fd57736d81d833dbcd3eec055a943eafbb30789be55c8ebe377","name":"d3_cum_fr_10K_interp_827_13h30m23s.csv","type":"text/csv","lastModified":1632355034222.357,"size":1062594},{"id":"3532737bd02de9cff65ecfba5bc31fff06a9258f366700a233dd3b2db362a8293e6a408ef590e84b34c6fb4c9f7a8036c520e12c0deeb76664319ba716cbf227","href":"https://static.observableusercontent.com/files/3532737bd02de9cff65ecfba5bc31fff06a9258f366700a233dd3b2db362a8293e6a408ef590e84b34c6fb4c9f7a8036c520e12c0deeb76664319ba716cbf227","name":"d3_cum_fr_10K_interp_825_12h24m37s.csv","type":"text/csv","lastModified":1632355033887.837,"size":912556},{"id":"f206765d17feb685d9294a035a3e93bdda28d781aa82fc70599771de74685cfd33dc0e5db4ed15b6e77aaa988a67346be1578f65570c2acc69b03b543e87b44b","href":"https://static.observableusercontent.com/files/f206765d17feb685d9294a035a3e93bdda28d781aa82fc70599771de74685cfd33dc0e5db4ed15b6e77aaa988a67346be1578f65570c2acc69b03b543e87b44b","name":"d3_cum_fr_10K_interp_827_15h57m53s.csv","type":"text/csv","lastModified":1632355033700.654,"size":1054536},{"id":"3ea78b573165f98dce6306b03df424ae0c62de2134a3020db8c96fbc8a5ce302ffcc81930350c6b0d0d3fbb08c08cf8acc13906b45fbc6c7c0d8bfd50ff9b2a3","href":"https://static.observableusercontent.com/files/3ea78b573165f98dce6306b03df424ae0c62de2134a3020db8c96fbc8a5ce302ffcc81930350c6b0d0d3fbb08c08cf8acc13906b45fbc6c7c0d8bfd50ff9b2a3","name":"d3_cum_fr_10K_interp_827_12h06m26s.csv","type":"text/csv","lastModified":1632355033598.255,"size":1030366},{"id":"9a8757eb8b1a841662e396ad0fea1a0210009cd78538e30eb74ff1d6b0dd5c6bfc98affba1bc391616abc3b01bd16d16137d66f21789175ce4f8a9c4bbb06da9","href":"https://static.observableusercontent.com/files/9a8757eb8b1a841662e396ad0fea1a0210009cd78538e30eb74ff1d6b0dd5c6bfc98affba1bc391616abc3b01bd16d16137d66f21789175ce4f8a9c4bbb06da9","name":"d3_cum_fr_10K_interp_825_15h01m13s.csv","type":"text/csv","lastModified":1632355033257.358,"size":981424},{"id":"90bab598726059f5a994a0d2552c3fc48b673131f7eacee23dde660586eba0dd76f92983f7f0abc4e4aac2d890649153c92f15aeed625f1a9c02b4e2bfbd8976","href":"https://static.observableusercontent.com/files/90bab598726059f5a994a0d2552c3fc48b673131f7eacee23dde660586eba0dd76f92983f7f0abc4e4aac2d890649153c92f15aeed625f1a9c02b4e2bfbd8976","name":"d3_cum_fr_10K_interp_825_13h36m25s@2.csv","type":"text/csv","lastModified":1632356845415.174,"size":1016495},{"id":"3532737bd02de9cff65ecfba5bc31fff06a9258f366700a233dd3b2db362a8293e6a408ef590e84b34c6fb4c9f7a8036c520e12c0deeb76664319ba716cbf227","href":"https://static.observableusercontent.com/files/3532737bd02de9cff65ecfba5bc31fff06a9258f366700a233dd3b2db362a8293e6a408ef590e84b34c6fb4c9f7a8036c520e12c0deeb76664319ba716cbf227","name":"d3_cum_fr_10K_interp_825_12h24m37s_v0.csv","type":"text/csv","lastModified":1652909459523.667,"size":912556},{"id":"6fbe45b2c3ca6deab70665fa8bd8221595db718499dd48b07f0d68241b6a8c94c0fb62af5111d5947071f0bda4d0ceca45e2e3bae77ec7fca2a4c5f748fe1c83","href":"https://static.observableusercontent.com/files/6fbe45b2c3ca6deab70665fa8bd8221595db718499dd48b07f0d68241b6a8c94c0fb62af5111d5947071f0bda4d0ceca45e2e3bae77ec7fca2a4c5f748fe1c83","name":"d3_cum_fr_10K_interp_825_12h24m37s_n1_rev.csv","type":"text/csv","lastModified":1652898958364.591,"size":636096},{"id":"4ee15cd5b5f66c33ae35d6d7a70c26abf262e1fe8fc04bdb53ef417bdf491f7c3b7ba0ae44ceef3b44f6a7e177a159cfd3fa54bcd238868bbf6437f83c7c33c3","href":"https://static.observableusercontent.com/files/4ee15cd5b5f66c33ae35d6d7a70c26abf262e1fe8fc04bdb53ef417bdf491f7c3b7ba0ae44ceef3b44f6a7e177a159cfd3fa54bcd238868bbf6437f83c7c33c3","name":"d3_cum_fr_10K_interp_825_12h24m37s_n1.csv","type":"text/csv","lastModified":1652897291806.674,"size":636085}] 32:{"id":"f8662f14b3fbb0e0","slug":"med64-crossfilter-1-1c","title":"Interactive Crossfilter Cumulative Firing Rate & Parallel Plots","thumbnail":"9bd87469c7d81b071b5613594e3c93a9a4f351817ae806094165d863f10b941f","access_level":"public","create_time":"$D2021-09-22T20:53:58.860Z","update_time":"$D2022-05-18T21:32:38.778Z","view_time":null,"first_public_time":"$D2023-02-01T21:31:46.250Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"8f050e18d6b5ac2e","login":"walt-r","name":"Walter","avatar_url":"https://avatars-next.observableusercontent.com/71ad39c060fb89f9d6d46f16db51dcba9378447860c39ca4489de73382209b46","tier":"starter_2024"},"version":4266,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f0de671af7ca2fba","login":"walt-r","name":"Walter","avatar_url":"https://avatars-next.observableusercontent.com/71ad39c060fb89f9d6d46f16db51dcba9378447860c39ca4489de73382209b46","tier":null}],"members":[{"type":"individual","id":"f0de671af7ca2fba","login":"walt-r","name":"Walter","avatar_url":"https://avatars-next.observableusercontent.com/71ad39c060fb89f9d6d46f16db51dcba9378447860c39ca4489de73382209b46","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Interactive Crossfilter Cumulative Firing Rate & Parallel Plots","cells":[{"id":0,"value":"md`# Interactive Crossfilter Cumulative Firing Rate & Parallel Plots \n[version 1.1b full code]\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4138,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4154,"value":"md`### Interpreting Plot Elements \nThe _\"Treatment X\"_ plots represent different sequential drug application treatments during the same experiment. For a single cell, we can see that the average firing rate changes in each treatment epoch in the _\"Firing Rate\"_ plot.\nIn the example diagrams, spike rasters of the neuron are shown at the bottom of each plot to clarify how the neuron's activity relates to the line of cumulative spike activity. In the interactive cross filtering plots, only the cumulative activity line for each neuron is shown. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4156,"value":"img = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4210,"value":"md`\n__Example Cumulative Activity Plots__\n* Firing rate independent: A diagonal line indicates steady neuron activity. For example Treatments A and B show no change in firing rate after exposure to drug. Both appear as a diagonal line.\n* Spatially seperate changes by direction, degree and onset.\n * Concave Downward deflection (Treatment C) indicates a _decrease_ in firing rate after start of treatment \n * Concave upward deflection (Treatment D) indicates an _increase_ in firing rate after start of treatment \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4184,"value":"md`### Spatially seperate changes by direction, degree and onset.\nIn addition to indicating the direction of change in activity, the plots spatially seperate by degree of change and time of change. This is illustrated with two units, orange and blue, and their corresponding spike rasters at the bottom.\n* Sharpness of curve indicates degree of change (figure \"Degree of Change\")\n* Time of curve indicated onset of change (figure \"Time of Change\"). Notice the lines cross in between the two temporally seperated time of change onset for each neuron.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4175,"value":"img2 = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4219,"value":"md`\n### Interactive Visualization Elements \n*Legend Unit Number and Line Color*: Each neuron (\"unit\") is designated by a color. Below the plot is a table that lists selected units and descriptive information.\n\nThe *Data File* drop down menu will load data from a new brain slice. \n\nThe 5 top and left most plots show 5 periods of the experiment:\n- *Baseline*: 10 minutes of no treatment\n- *AMPA blocker DNQX*. This blocks glutamate signalling between neurons in preparation. This blocks activity in one neuron from directly exciting neurons on other channels. Subsequent treatments are also in the presence of DNQX\n- *BT139 ON*: experimental treatment applied\n- *BT139 OFF*: experimental treatment washed off\n- *DAMGO ON*: mu-opioid agonist applied\n\nThe *lower right plot* can be thought of as a summary plot of the first 5 and connects them in one image. It shows the mean firing rate of each neuron (unit) across the different sequential experimental periods.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3279,"value":"md`----- \n##### Legend Unit Number and Line Color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"swatches({color: z})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4073,"value":"viewof fileSelection = {\n const files = new Map(fileAttachArray.map(f => [f.name, f]));\n \n const form = select({\n title: \"Data File\",\n description: \"Select a data file\",\n options: Array.from(files.keys()),\n value: fileAttachArray[0] //\"qq_for_d3_10K_825_13h36m25s.csv\"\n });\n \n return Object.defineProperty(html`

${form}`, 'value', {get() { return files.get(form.value) }});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4087,"value":"table(default_selection) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4092,"value":"md`### Table`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4100,"value":"/**\n* Formats data for table and cleans empty output for nice display\n*/\ndefault_selection = {if (typeof selection[0] === \"undefined\") {\n return [{'Table of Selected Data':'No data selected'}];} else {return reorderNames(selection, keyOrderNames)} }\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4095,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4097,"value":"keyOrderNames = ({\"unit\": \"Selected Unit\", \"tx\": \"Treatment\", \"cum_dist\": \"Cumulative Spikes Proportion\", \"timestamp\": \"Experiment Time (sec)\", \"Firing Rate\": \"Firing Rate (Hz)\"}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2493,"value":"md`### Array Indexing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2427,"value":"cellI = function(i, j) {\n return get_array_index(j, i, tx_panel_array);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2406,"value":"cellXY = function(i) {\n return get_array_coords(i, tx_panel_array);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2308,"value":"get_array_index = function(row, col, array) {\n // converts [x, y] index of 2D array into scalar index of same\n // starting with columns of the first row\n const col_max = array[0].length;\n return (col) + (row * col_max);\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2367,"value":"get_array_coords = function(i, array) {\n // converts scalar index of 2D array into [x, y] index of same\n const col_max = array[0].length;\n return [Math.floor((i)/col_max), i%col_max];\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":985,"value":"line = d3.line()\n .defined(d => !(Object.values(d)).includes(NaN))\n .x((d, i) => x[d.cell](d.x)) \n .y((d, i) => y[d.cell](d.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"md`### Brush`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3874,"value":"md`### Scale & Axes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"// array: for each column, a function that linearly maps domain in data to range in browser window\n// this reverses the y coord directions because in DOM y has zero at top\ny = columns_points.map(c => {\n if (c !== \"Firing Rate\") { \n return d3.scaleLinear()\n .domain(d3.extent(data_points, d => d[c]))\n .range([size - padding / 2, padding / 2])\n } else {\n // var logZero = frLowBound // 0.01 firing once per 100 sec is smallest of interest for a neuron firing rate. I will need to clip those with smaller firing rate when cleaning data.\n return d3.scaleLog()\n .domain(d3.extent(data_points, d => d[c]))\n .range([size - padding / 2, padding / 2])\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"x = {\n const x_ = columns_points.map((r, i) => d3.scaleLinear()\n .domain(d3.extent(data_points.filter(d => (d.tx === columns_points[i])),\n d => d[\"x_idx\"])) // timestamp\n .range([padding / 2, size - padding / 2]));\n // kludge to use a different axis for a firing rate parallel plot\n x_[5] = d3.scalePoint()\n // .domain(d3.extent(data_points, d => d[\"Firing Rate\"]))\n .domain([\"Baseline\", \"AMPA blocker DNQX\", \"BT139 1uM On\", \"BT139 1uM Off\", \"DAMGO 500nM On\"])\n .range([padding / 2, size - padding / 2]);\n return x_;\n}\n\n// // original version\n// x = [0, 1].map(r => d3.scaleLinear()\n// .domain(d3.extent(data_points, d => d[\"x_idx\"]))\n// .range([padding / 2, size - padding / 2]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"// maps each data row to color\nz = d3.scaleOrdinal()\n .domain(data_points.map(d => d.unit))\n .range(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"xAxis = {\n const axis = d3.axisBottom()\n .ticks(6)\n .tickSize(size - padding );\n const axis_fr = d3.axisBottom() // not needed. can switch to axis ?\n .ticks(6)\n .tickSize(size - padding ); \n return g => g.selectAll(\"g\").data(x).join(\"g\")\n .attr(\"transform\", (d, i) => \n `translate(${(cellXY(i)[1] * size)}, ${(cellXY(i)[0] * size + padding/2)})`)\n .each(function(d, i) {\n if (i < 5) {\n return d3.select(this).call(axis.scale(d)).call(xAxisLabel) /// here...\n } else if (i == 5) {\n const cell_fr = d3.select(this).call(axis_fr.scale(d)).call(xFrAxisLabel);\n cell_fr.selectAll(\".tick text\").each(function(g, j) {\n // j is the index of each category tick in d3.scalePoint() d\n return d3.select(this).text(tx_abrev[columns_points[j]]);\n })\n return cell_fr;\n }\n })\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").attr(\"stroke\", \"#ddd\"))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3897,"value":"// Firing rates must clip lower bound to work on scaleLog y\nfrLowBound = 0.01","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3960,"value":"/**\n* unfinished text label of axis\n*/\nfunction yAxisLabel(cell) {\n cell.append('text')\n .attr('text-anchor', 'end') // end\n .attr('transform', 'rotate(-90)')\n .attr('fill', 'black')\n .attr('font-size', '12px')\n // .attr('font-weight', 'bold')\n .attr('x', yAxisLabelXPos) // width\n .attr('y', yAxisLabelYPos) // -10\n .text('Cumulative Proportion of Spikes');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3987,"value":"/**\n* unfinished text label of axis\n*/\nfunction yFrAxisLabel(cell) {\n cell.append('text')\n .attr('text-anchor', 'end') // end\n .attr('transform', 'rotate(-90)')\n .attr('fill', 'black')\n .attr('font-size', '12px')\n // .attr('font-weight', 'bold')\n .attr('x', yAxisLabelXPos) // width\n .attr('y', yAxisLabelYPos) // -10\n .text('Firing Rate (Log Hz)');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4056,"value":"yAxisLabelYPos = -20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4049,"value":"yAxisLabelXPos = -80","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3803,"value":"/**\n* unfinished text label of axis\n*/\nfunction xAxisLabel(cell) {\n cell.append('text')\n .attr('text-anchor', 'end') // end\n .attr('fill', 'black')\n .attr('font-size', '12px')\n // .attr('font-weight', 'bold')\n .attr('x', size - 90) // width\n .attr('y', size- 5) // -10\n .text('Proportion of Time in Treatment');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4007,"value":"/**\n* unfinished text label of axis\n*/\nfunction xFrAxisLabel(cell) {\n cell.append('text')\n .attr('text-anchor', 'end') // end\n .attr('fill', 'black')\n .attr('font-size', '12px')\n // .attr('font-weight', 'bold')\n .attr('x', size - 120) // width\n .attr('y', size- 5) // -10\n .text('Treatment Epoch');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3049,"value":"tx_abrev = ({\"Baseline\":\"Base\", \"AMPA blocker DNQX\":\"DNQX\", \"BT139 1uM On\":\"BT139-on\", \"BT139 1uM Off\":\"BT139-off\", \"DAMGO 500nM On\":\"DAMGO\", \"Firing Rate\":\"f.r.\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1672,"value":"md`### Load & Clean Point Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1369,"value":"data_points = clean_data(data, columns__fr)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2678,"value":"data = d3.csvParse(await fileSelection.text(), d3.autotype)\n/* below is data selection without drop menu */\n// data = d3.csvParse(await FileAttachment(\"d3_cum_fr_10K_interp_825_13h36m25s.csv\").text(), d3.autotype)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4111,"value":"md`* _Add new data to fileAttachArray:_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4082,"value":"fileAttachArray = [FileAttachment(\"d3_cum_fr_10K_interp_825_12h24m37s.csv\"),\n FileAttachment(\"d3_cum_fr_10K_interp_825_12h24m37s_n1.csv\"),\n FileAttachment(\"d3_cum_fr_10K_interp_825_12h24m37s_n1_rev.csv\"),\n FileAttachment(\"d3_cum_fr_10K_interp_825_12h24m37s_v0.csv\"),\n FileAttachment(\"d3_cum_fr_10K_interp_825_13h36m25s@2.csv\"),\n FileAttachment('d3_cum_fr_10K_interp_825_15h01m13s.csv'),\n FileAttachment('d3_cum_fr_10K_interp_825_16h06m19s.csv'),\n FileAttachment('d3_cum_fr_10K_interp_827_12h06m26s.csv'),\n FileAttachment('d3_cum_fr_10K_interp_827_13h30m23s.csv'),\n FileAttachment('d3_cum_fr_10K_interp_827_15h57m53s.csv'),\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4264,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3636,"value":"columns__fr = [\"timestamp\", \"cum_dist\", \"x_idx\", \"Baseline\", \"AMPA blocker DNQX\", \"BT139 1uM On\", \"BT139 1uM Off\", \"DAMGO 500nM On\", \"Firing Rate\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2192,"value":"// This is the graphic cell matrix layout of the Treatment groups\ntx_panel_array = [[\"Baseline\", \"AMPA blocker DNQX\", \"BT139 1uM On\"], [\"BT139 1uM Off\", \"DAMGO 500nM On\", \"Firing Rate\"]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1662,"value":"columns_points = tx_panel_array.flat()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"// Indicates what data column is used for each cell in graphic matrix\ncolumn_pointx = Array(5).fill('x_idx').concat(['tx']) //data_points.columns.slice(-1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2616,"value":"/**\n* takes raw python generated data as input applies cleanCumDist()\n* returns same data array with empty strings set to NaN\n*\n* @param {array} data raw python data\n* @param {array} columns_list array of column name strings\n* @returns {array} clean_data\n*/\nclean_data = function(data, columns_list) {\n const temp_columns = data.columns;\n let clean_data = data.map(d => d); // create shallow copy\n clean_data.map(row => {\n columns_list.forEach((col) => {\n row[col] = cleanCumDist(row[col]);\n if (col === 'Firing Rate') {\n row[col] = clipLowFR(row[col], frLowBound)\n }\n }\n )});\n clean_data['columns'] = temp_columns\n return clean_data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3688,"value":"/**\n* clips value less than a threshold to that threshold\n* note, this should return NaN as NaN\n*/\nclipLowFR = function clipLowFR(firingRate, frLowBound) {\n if (firingRate < frLowBound) {return frLowBound};\n return +firingRate;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1593,"value":"// converts numeric string to number or NaN if empty string\ncleanCumDist = function cleanCumDist(data_row) {\n if (data_row == \"\") {return NaN};\n return +data_row;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"md`### Create Path Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1724,"value":"/**\n * Create path arrays for unit lines in d3 graphs\n *\n*/\ndata_paths = { \n const columns = columns_points // data_points.columns.slice(0,-2) // tx groups are columns ie v1, v2...\n let x_unit = \"1\" // default unit to use for a single x for all plots. may change to unique for each unit.\n const unique_units = [...new Set(data_points.map(d => d.unit))];\n const path_xy_arrays = get_path_xy_arrays(data_points, columns, x_col);\n let tx_unit_array = []\n columns.forEach((tx_col) => {\n let tx_obj = {y: tx_col + '_metric',\n series: path_xy_arrays[tx_col],\n x_idx: get_path_array(x_col[tx_col], x_unit)\n };\n tx_unit_array[tx_col] = tx_obj;}\n )\n\n return tx_unit_array; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3427,"value":"x_col = ({\"Baseline\" : 'x_idx',\n \"AMPA blocker DNQX\" : 'x_idx',\n \"BT139 1uM On\" : 'x_idx',\n \"BT139 1uM Off\" : 'x_idx',\n \"DAMGO 500nM On\" : 'x_idx',\n \"Firing Rate\" : 'tx'});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1728,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3871,"value":"// does this already exists as d3.zip()\n// d3.zip() fails to replace this. WHY?\nzip_coord_arrays = function(arr1, arr2) {\n // zips array [x1, x2, ...] and array [y1, y2, ...] into new array [[x1, y1], [x2, y2], ...]\n if (arr1.length != arr2.length) {\n return undefined;}\n else {\n let zipped = []\n for(let i=0; i < arr1.length; i++) {\n let coord = {x: arr1[i], y: arr2[i]};\n if (!Object.values(coord).includes(NaN)) {\n zipped.push(coord);\n };\n }\n return zipped;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"/**\n* code to grab the value arrays for each column of data_paths\n*\n* @param {string} col_name Name of column with data, example 'x value'\n* @param {int} unit The unit id num\n*/\nget_path_array = function(col_name, unit) {\n let temp_array = [];\n if (typeof unit === 'undefined') {\n data_points.forEach(d => temp_array.push(d[col_name]));\n } else {\n data_points.forEach(d => {\n if ((d.unit == unit) &&\n // alternatively use (d[col_name] !== undefined) without quotes\n (typeof d[col_name] !== 'undefined')) {\n temp_array.push(d[col_name]);\n }\n }\n ); \n }\n return temp_array;\n // return temp_array.filter(d => !isNaN(d));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3780,"value":"md`### Data Graphic Formatting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3777,"value":"point_radius = {let point_radius = {};\n point_radius['hidden'] = 0.1; // 0.1\n point_radius['visible'] = 1.5; // 1.5\n point_radius['opacity_v'] = 0.5;\n return point_radius;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3785,"value":"path_width = {let path_width = {};\n path_width['hidden'] = 0.5;\n path_width['visible'] = 3;\n path_width['opacity_v'] = 0.7;\n return path_width;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"md`### Constants & Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3609,"value":"// the x-value column for cumulative spike graphs\ncumX = 'x_idx' // 'timestamp'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2209,"value":"panel_rows = tx_panel_array.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2212,"value":"// rename to cellCols?\npanel_cols = tx_panel_array[0].length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"width = 954","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2215,"value":"height = width * panel_rows / panel_cols ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"// This is size of a single cell in composite plot\nsize = (width - (panel_cols + 1) * padding) / panel_cols + padding","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"padding = 32 ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4076,"value":"// drop menue fileSelection\nimport {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4078,"value":"import { table } from \"@gampleman/table\" ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 33:"$32:body"