31:T4eb,transcript_layer = new deck.ScatterplotLayer({ id: 'transcript_layer', data: transcript_data, pickable: is_pickable, getPosition: d => d.position, getFillColor: d => { var inst_color var unselected_color = [0, 0, 0, 0] // allow transcript color filtering if (select_gene === 'none'){ inst_color = d.color } else { inst_color = unselected_color // check gene name if (d.name === select_gene){ inst_color = d.color } } return inst_color }, getRadius: transcript_radius, radiusMinPixels: transcript_radius, pickable: true, opacity: transcript_opacity, visible: visible_transcripts, updateTriggers: { getFillColor: select_gene, }, onClick: (info, event) => { if (select_gene !== info.object.name){ mutable select_gene = info.object.name d3.select('#meta_dropdown').select('select').node().value = info.object.name } else { mutable select_gene = 'none' d3.select('#meta_dropdown').select('select').node().value = 'none' } } })32:[{"id":"31f21149d3a911705c44c7c947ffa5be8f7972627446fece10eacec2e20b00194ab16883e3f93c8b03e39963319f8cb89b245a53a0d67e0daea70e5eb451cd54","href":"https://static.observableusercontent.com/files/31f21149d3a911705c44c7c947ffa5be8f7972627446fece10eacec2e20b00194ab16883e3f93c8b03e39963319f8cb89b245a53a0d67e0daea70e5eb451cd54","name":"transcripts_zip_string@1.txt","type":"text/plain","lastModified":1638984546175.092,"size":9119956}] 2f:{"title":"Mouse Brain Transcripts of Interest View","cells":[{"id":0,"value":"md`# Mouse Brain Transcripts of Interest View\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"dashboard = html`\n

\n\n

${viewof select_gene_dropdown}

${viewof transcript_radius}

${viewof transcript_opacity}

\n \n

${container}

\n \n

\n` \n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1996,"value":"select_gene","pinned":true,"hidden":false,"mode":"ojs"},{"id":2298,"value":"gene_options = ['none'].concat(Object.keys(gene_colors))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2199,"value":"viewof select_gene_dropdown = select({'options':gene_options, value: 'none'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2209,"value":"mutable select_gene = select_gene_dropdown","pinned":true,"hidden":false,"mode":"ojs"},{"id":1670,"value":"## Zip Data","pinned":false,"hidden":false,"mode":"md"},{"id":2124,"value":"transcript_data.map(x => x.name).filter((v, i, a) => a.indexOf(v) === i)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2132,"value":"gene_colors = ({'Ddr1': 'purple',\n 'Glp2r': 'blue',\n 'Gpr182': 'blue',\n 'Sstr4': 'orange',\n 'Th': 'green',\n 'Trhr': 'red'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1801,"value":"transcript_data_ini = JSON.parse(decode_zipped_string(zip_string))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1799,"value":"zip_string = FileAttachment(\"transcripts_zip_string@1.txt\").text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1673,"value":"pako = require('pako/dist/pako.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"container = html `

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":452,"value":"# Data","pinned":false,"hidden":false,"mode":"md"},{"id":632,"value":"transcript_data = transcript_data_ini.map(d => {\n\n var inst_color_name = gene_colors[d.name]\n var rgb = d3.color(inst_color_name)\n var inst_color = [rgb.r, rgb.g, rgb.b] // 255\n\n var new_obj = ({\n '': d[''],\n 'name': d.name,\n 'position': eval(d.position),\n 'color': inst_color\n \n }) \n \n return new_obj\n})\n\n// transcript_data = transcript_data_ini","pinned":true,"hidden":false,"mode":"ojs"},{"id":448,"value":"# Deck.gl","pinned":false,"hidden":false,"mode":"md"},{"id":546,"value":"radius = 0.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":548,"value":"radius_min_pixels = 1.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":552,"value":"transitionDuration = 3000","pinned":true,"hidden":false,"mode":"ojs"},{"id":520,"value":"transitions = ({\n getPosition: {\n duration:transitionDuration,\n easing: d3.easeCubic\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2136,"value":"rgb = d3.color('red')","pinned":true,"hidden":false,"mode":"ojs"},{"id":2140,"value":"inst_color = [rgb.r, rgb.g, rgb.b, 255] ","pinned":true,"hidden":false,"mode":"ojs"},{"id":2144,"value":"Object.keys(gene_colors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2152,"value":"select_gene","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":704,"value":"mutable visible_transcripts = true","pinned":true,"hidden":false,"mode":"ojs"},{"id":1991,"value":"select_gene","pinned":true,"hidden":false,"mode":"ojs"},{"id":1976,"value":"// mutable select_gene = 'none'","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"layers = [transcript_layer] ","pinned":true,"hidden":false,"mode":"ojs"},{"id":427,"value":"is_pickable = true","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"deckgl.setProps({layers: layers});","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"view = new deck.OrthographicView({id: 'ortho'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"function ini_deckgl(container){\n var deckgl = \n new deck.DeckGL({\n container,\n views:[view],\n initialViewState: initial_view_state,\n controller: {doubleClickZoom: false},\n // getTooltip: ({object}) => {\n // return object && \n // `${object['name']}`\n // // `pos: ${object.x}, ${object['y']}\\n`\n // },\n getTooltip: ({object}) => object && {\n html: `${object.name}`,\n style: {\n fontSize: '0.8em',\n padding: '5px',\n }\n },\n // onViewStateChange: ({viewState}) => {\n // debounced_something(viewState)\n // return viewState\n // },\n // onClick: ({info}) => {\n // console.log(info)\n // return info\n // }\n \n });\n \nreturn deckgl\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2090,"value":"deckgl = ini_deckgl(container)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2113,"value":"// d3.max(transcript_data, \nmean_x = d3.mean(transcript_data.map(x => x['position'][0]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2122,"value":"mean_y = d3.mean(transcript_data.map(x => x['position'][1]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2231,"value":"min_zoom = -5","pinned":true,"hidden":false,"mode":"ojs"},{"id":2294,"value":"zoom = -3.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"initial_view_state = ({\n target: [mean_x, mean_y, 0],\n zoom: zoom,\n minZoom: min_zoom,\n maxZoom:10\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"md`### Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"inst_zoom = 6","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"inst_lat = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"inst_lng = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"height = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":559,"value":"# Fetching Functions","pinned":false,"hidden":false,"mode":"md"},{"id":1155,"value":"detail_zoom_thresh = 1.25","pinned":true,"hidden":false,"mode":"ojs"},{"id":833,"value":"visible_transcripts","pinned":true,"hidden":false,"mode":"ojs"},{"id":567,"value":"mutable fovs = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":1675,"value":"function decode_zipped_string(b64Data){\n // Get some base64 encoded binary data from the server. Imagine we got this:\n \n // Decode base64 (convert ascii to binary)\n var strData = atob(b64Data);\n \n // Convert binary string to character-number array\n var charData = strData.split('').map(function(x){return x.charCodeAt(0);});\n \n // Turn number array into byte-array\n var binData = new Uint8Array(charData);\n \n // Pako magic\n var data = pako.inflate(binData);\n \n // // Convert gunzipped byteArray back to ascii string:\n // var strData = String.fromCharCode.apply(null, new Uint16Array(data));\n\n // https://stackoverflow.com/questions/8936984/uint8array-to-string-in-javascript\n var strData = new TextDecoder().decode(data);\n \n // Output to console\n // console.log(strData); \n return strData\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":443,"value":"# Requirements","pinned":true,"hidden":false,"mode":"md"},{"id":154,"value":"deck = require.alias({\n // optional dependencies\n h3: {}\n})('deck.gl@latest/dist.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"import {text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"import {select} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":2043,"value":"viewof transcript_radius = slider({\n value: 0.75,\n min: 0.1,\n max: 2.0,\n precision: 2,\n description: \"transcript size\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2191,"value":"viewof transcript_opacity = slider({\n value: 0.75,\n min: 0.0,\n max: 1.0,\n precision: 2,\n description: \"transcript opacity\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":812,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2041,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2076,"value":"deck","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}