30:T670,nbhd_layer = new deck.GeoJsonLayer({ id: 'nbhd_layer', data: geojson, opacity: opacity, stroked: false, filled: true, getFillColor: d => { // // using predefined color // ////////////////////////// // var rgb_array = d3.color(d.properties.color) // var rgb = [rgb_array.r, rgb_array.g, rgb_array.b] // var inst_color // if (select_meta === 'none'){ // inst_color = rgb // } else { // inst_color = [rgb[0], rgb[1], rgb[2], unselected_opacity_255] // // check gene name // if (d['properties'][cat_name] === select_meta){ // inst_color = rgb // } // } // return inst_color var inst_value = d.properties[select_meta] var inst_opacity = opacity_scale(inst_value) return [255, 0, 0, inst_opacity] }, updateTriggers: { getFillColor: [select_meta], }, // onClick: (info, event) => { // var inst_cat_name = info.object.properties[cat_name] // if (select_meta !== inst_cat_name){ // mutable select_meta = inst_cat_name // // mutable select_meta = cat_name // d3.select('#metadata_dropdown').select('select').node().value = inst_cat_name // console.log('new cluster', select_meta, inst_cat_name) // } else { // mutable select_meta = 'none' // // mutable select_meta = cat_name // d3.select('#metadata_dropdown').select('select').node().value = 'none' // console.log('none cluster', select_meta) // } // }, pickable: true });31:T1067,zip_geojson_string = 'eJzFmMGO4jAMhl8F9TxUiRMn9lxX2vPeEVoh6I6QWIq6HWkR4t03BebQ4gyuWIYDBxLj+PfX/Ak9FO1+VxWvk+J7tWjfm+pbvdlUy3Zdb4uXSfHrPPgnBcwOxXrVBZpuYvCrbmjX1Luqaden6EOxrLZt1fz8m75MPVoqjXcIxnhDhlP4ZX7fzSOwLdEHsJZdNCF08/WmbrolmmrVpW8Wq/V7lxqNMcc08FbVv6u22Z9W+6jnR73Zv51rX9Z1s1pvF+25/NlsyoMy6GUyJRupBI6IkQgt+/nLRI4Eb3wZ2VNAJkp1niIFaZ5syRh8ZEa2xNwFXg3mMkqBcpHC0lNrTcA0SGwcOecAsnquk87nx9TYD852NGcc1v4UzOoGqpEIukTG1gyGs4+NGCkWKaydgazT3WcMoxnbYUH0FMj6Bo6AMpQWMpxhmDLkUoqRcpnC4hnQSu190m406Svp2CftXKAymkiAbKKz/BjTvmmwbChnhwEQS59ioiVE7yNmNgpbDyVYg6mLxmHMbT054U1/uJSoNhyd6D5gP34rC8/RZ4AJHkJY2z01DkmXCFjac5mUN63hUqTebVSy+4hxNGLJf56AWN8+NRFJmQgZhildNqUQKVap93+d8D7l8N/v1xYMUMkhLe9iao5xX3a/FpFIgdazxTJaB4YDMznIGWGXCUofPOKpiyFjrXJGrfnrjxOd7D7jePfdmp6CWNs9NQ7BBUW+kq/KGdXurz5PVKL7fOn+e3V4CmD92akHIigTGUu2KqdUm/+IE14lvE+Z775Tk+tTBhOI05LpNE6fYL7uTi0SkQIhNQLTgxghdc57sLm3FhDSn8CyazI7z+B8btfJGbXOoLYanerBO5DxL7uuHqTwOWJ6zB9kbfvUPKQNIiOWNl0mp9Ya9G6j0j2APP5N15UB3djHD4Ks758aiWStMmbpupzJKUTeeQLolHec58d/4r6KJw==' // zip_geojson_string = 'eJzNWEuL4kAY/CshZ236/djrwp7nLh5Es4PgTiSbOYj436ejzCFJNdTgIZ6ETlndVSX1tbnW/eXc1L+q+k+z6z+75nd7OjX7/th+1Kuq/vtY/J8Bm2t9PAxAOTyYfGtYOnftuen64x19rfftqe0GSNcchsfd7nD8HB5ZKeUtL7w37b+m7y539DffW3u6vD/23rdtdzh+7PrH9pvNOjgVhbTGaSmtjDKuqrW31gttfXDSKG9U2K4qjFRRB2GtdcmHlIzS9g41E2haVTYqkZy3GeaSiikNwNlikRIh8THB3usYnBP5y5laBht1Uc+ccru9ZWO/c1JL5UTr/4GlU2ghpDhZLeeOkPiQ861hRpzqcUR6qYho9byh+WMM9YWMlJ8DS5wICs+JdocxccrHMZmlYvqBft5ULcmg9PSnb8qcCAoPinaHQZHax0nZxWYTO0YQ0CkpRXDRG2ODV8m6QqEEq6RQLgUltbE+lQqqQEiWKF/LnOpxRG6xscTKZ/0EVQIDQt2EGekO5WuZUj1OyC9Wd/QI4R0FLQJDmvWSKVEi5NODjlI+jim80j0ceoqASksdRfJZosmPg1SlIlHWmCiM18nKnES2vVBOmJKtT76QOd3jkOILXcLx9KD9nBcJTgh0E2Zk+5MfcIzmcT7phW7gUDztJqoQHBDqpQIn2558IVO6J39kF3vjwOunLUX3XxwTulMXOAGSG3JPzs1JTou9ceDHB0TG5IJQ3skM1UGXxodW2nvhvM++h+hCsRYhH1ufdCGToicZLfbKgTeAdBQ0CUwIFiMi5BuULmVO9CSi5V438COE9hT0CEwJ3aohIwQ+O+c44UNO29sXVJ6T1w==' // zip_geojson_string = 'eJytWMtuWzcQ/RXDa4O4fJPdFsiuQPeBETiOmghQLUORF0GQf+85M0Pp6kpyWqeGYXhEcmY4jzOH+n67//a8uv3t5vbd6mH/slv9vt1sVo/79fbp9u7m9i/98Cs2vP9+u/7EjRMXFqf40fNu+7za7dey+/vtw2bz4XGFP+unD08fv/BoLtj2sHn+8kAB/z9uN9sd1exWn6his1p/Wj0djKj44Z3HJ5Mri5/jBjHzuH152tO0n6bF0syD4GaLz7vV4/orr0r9PbRcfRp/Z/qxDbeRTTn8wOefV9u/V/vdN7noCMUfL5v9+s/t5ttnjd3jdrv7tH562Gv48NO8K+HuJlSX/P3dzfvWnY+QaVtk6K+Qs4sieuch+up8p1yL616Wp2rrR3X3/OT9mcqeHMVkKnp1BYH3xZV65oGpwB5sac0lPRJdbHc3UFSSyMFFrHc4mUUuzieVm5k4HDeNpcJjfBZcFpWlu0o5u17kYpFO9skFsVAnx9XiJpGC69BfoUOCdqLMDCz34J8WRVYDDCycqtmleKbTdER4A70xICL8BHLCvWNyk0Qy4l5J5CihS3C3Qx46U3OF8mQ2Y2ccYnRZxeZq0OQ1U380Zy4sVWTYhsnQXZEzxbsp6rot8xbIv5dlFjdNeFz+zCMzsdwDOUmJRQlcnlxjcF2T3Kbs0Aaerp4ZGD5nJqtk18SnhKzhCDJcginkFSpKVQykylSX4qK62N2EKJXoQjCDB23DADxkQSWkQ7ZE6QrU42QaPNKEQu5qYL7dVHjEjan0LkhcPcoBjYSUWFe4ABGua0WjOwKuiQRruaI7GuVsleGbpC55SyXiQW24uR63QqkuyPKJ9SsedU00giNiIkqFZklZKLj/AQgaYOzfDMYs7stg/HHzsjpFY38Bjafm579vQWNE9Doax5ovInDKv4DAADO2BFJnYBVQaQgtelVyh7KpqE/UmIHdfP+A2CyYWbUJiUPsc4CgYXIVsal43DugqvLOFQmPA9ORiJqsxdEo0Uu/ZAOqFAS4VD1kFgqMhmzHsRtGezacE2yMht1zYwOLk8AaLiwNh1arRQBARxI6kZMVJZ+TQU7sMkAU9QpqP4us7QboTjpQUjZo74IYTQp5bm04EFzFFijKZkDEyZopo+qJEHBoOMArYSZoM8yPD0xTHETD1WgYQ6NIYhqg1ov0t87Nk/2mAxjLOCSbi1FBpg6RrcdVBbn55svnQyT4k7OIhHQRVGMYa7ghQShf04bbEuP82JLFPkatojaOtCyyoiqnSpb9Wgcn5wfktFHaTVEruUB5ZJKopq2gYH+yf+hInBbAO0VrXIFUgN50A87I+RAH8s22X9EQpdzDZKmp0m4E1H6u4AT43s5CPbH/gHx++q88tPbSfKipT1PsLb0J+bB2HfpKCSH7knMJ3cfuL8AgmuIXUBAJYwMAnEq/MFIx5tmz3XKEjmShQJ66dSDrt7dB1xbs7Sfcq+nIz9WMA/qCUgDlWRnV1AQQFKKxsSapU68INIk75FPNzBNiydMOCFyEeGlv/IQB4xoTSg4Up4/dLGlsEuVdGDn66CIjRyjYMyhTHeMIFclIMFcQyEIUUOx+nVtF653JwgQuUJr4rZ6gHQ01dLKAFNBRNhBFHKNjYJOKOKLMD8Q7vCs0RQt68TobQgsyPmMgkIwIgVO8rwKtdXQ8G9kLgavFgCkRzRF9b0DKfkey0yW2uOR6J4UqALIsviX9W/JNVBMDQ1kH0vIpMtcnFs54v2pIox2WbPBk/0C5KEFDralXQDAyRsg6FpcNiFzkLrLeinxc8V69jlKz7JxkqHlUf3z4nbRVFybNZhKpC89hK49333H3ePd1HTLd6mL5DgTVKMItNLVn78D58f+NpfqUroL1v+KpzftUc5p6i2Uq+U3fGhD6roJ1u8JTe/81hCbItcOzqcibAsEvcVbmRGxvLCkrBgdjadIVo+1IEKWc9NWF6ifJ6+MRCJbbg6Y2zzASnEthDzKM8al4Torvfk6iyd2SMovBEb0+nJt5Q6Ab0IU7Eb9BIvwoXV7dDzLFZAiqKmFG/TUB6KHrFTYO1OJDxSv4gAYK0JmdJTFeEOGsMQOglUEyizBE7Yakk6Fb971CGM/YIacHkzVGzoICLTlWFgSFeZnVRTKVD1ie5csaDlP9lmES+g74a4NrHutK2h6OJ2XsqVilyZdKxcjzkkxDA6EJ48qgasH5uO519FhcjurFYNBI5cEHos33PgzqgElWDogki4vfCUWD0uPxI/k+6RZ1EaKWO3xhFUiZ2lB6nU2fBIlIdv/jHzmO9qA='32:[] 2e:{"title":"Tiles 0.2.0","cells":[{"id":0,"value":"# Tiles 0.2.0\nAdding attribute coloring and mouseover","pinned":false,"hidden":false,"mode":"md"},{"id":758,"value":"select_meta","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"dashboard = html`\n

\n\n

${viewof opacity}

Metadata ${viewof select_metadata_dropdown}

\n \n

${container}

\n \n

\n` \n\n //

Radius ${viewof select_radius}

\n\n //

\n //

${viewof radius}

\n //

${viewof opacity}

\n //

\n \n //

${container}

\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":597,"value":"// viewof select_radius = select({'options':available_radius, value: ini_radius})","pinned":true,"hidden":false,"mode":"ojs"},{"id":733,"value":"ini_meta = 'center_x'","pinned":true,"hidden":false,"mode":"ojs"},{"id":626,"value":"// viewof select_metadata_dropdown = select({'options':['none'].concat(meta_data_cols), value: ini_meta})\nviewof select_metadata_dropdown = select({'options':meta_data_cols, value: ini_meta})","pinned":true,"hidden":false,"mode":"ojs"},{"id":611,"value":"// meta_data_cols = geojson\nmeta_data_cols = Object.keys(geojson.features[0].properties)","pinned":true,"hidden":false,"mode":"ojs"},{"id":602,"value":"import {select} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":586,"value":"d3.select('#set_radius').empty()","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"viewof opacity = slider({ min: 0.01, max: 1, value: 0.75, step: 0.01, description: 'shape opacity'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":560,"value":"// inst_radius_index = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":574,"value":"// ini_radius = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"container = html `

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"mutable select_meta = select_metadata_dropdown","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"unselected_opacity_255 = 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"// selected_deckgl_points = deckgl_points['features'].filter(x => x['properties'][cat_name] == select_meta)","pinned":true,"hidden":false,"mode":"ojs"},{"id":714,"value":"meta_values = geojson.features.map(x => x.properties[select_meta])","pinned":true,"hidden":false,"mode":"ojs"},{"id":737,"value":"meta_max = d3.max(meta_values)","pinned":true,"hidden":false,"mode":"ojs"},{"id":739,"value":"meta_min = d3.min(meta_values)","pinned":true,"hidden":false,"mode":"ojs"},{"id":741,"value":"opacity_scale = d3.scaleLinear()\n .domain([0, meta_max])\n .range([0, 255])","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"// passing in JSON object \nini_geojson = JSON.parse(geojson_string)","pinned":true,"hidden":false,"mode":"ojs"},{"id":546,"value":"available_radius = Array.from(new Set(ini_geojson[\"features\"].map(x => x.properties.radius))).sort((a, b) => a - b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":639,"value":"available_leidens = Array.from(new Set(ini_geojson.features.map(x => x.properties[cat_name]))).sort((a, b) => parseInt(a) - parseInt(b))","pinned":true,"hidden":false,"mode":"ojs"},{"id":537,"value":"// radius_features = ini_geojson[\"features\"].filter(x => x.properties.radius == select_radius)","pinned":true,"hidden":false,"mode":"ojs"},{"id":529,"value":"// geojson = ({\n// type: \"FeatureCollection\", \n// features: radius_features\n// })\n\ngeojson = ini_geojson","pinned":true,"hidden":false,"mode":"ojs"},{"id":438,"value":"transcript_radius = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"// cell_layer = new deck.GeoJsonLayer({\n// id: 'cell_layer', \n// data: selected_deckgl_points,\n// opacity: opacity,\n// stroked: false,\n// filled: true,\n// getLineWidth: 0.1,\n\n// getFillColor: f => {\n \n// var rgb_array = d3.color(f.properties.color)\n// var rgb = [rgb_array.r, rgb_array.g, rgb_array.b]\n// return rgb\n// },\n// getRadius: transcript_radius, \n\n// updateTriggers: {\n// getFillColor: select_meta,\n// }, \n\n \n// pickable: false\n// });","pinned":true,"hidden":false,"mode":"ojs"},{"id":613,"value":"geojson","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"cat_name = 'leiden'","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"deckgl.setProps({layers: [nbhd_layer]});","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"height = 850","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"center_x = d3.mean(deckgl_points['features'].map(x => x['geometry']['coordinates'][0]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"center_y = d3.mean(deckgl_points['features'].map(x => x['geometry']['coordinates'][1]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"zoom = -5","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"min_zoom = -6","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"INITIAL_VIEW_STATE_2D = ({\n target: [center_x, center_y, 0],\n zoom: zoom,\n minZoom:min_zoom, \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":795,"value":"tooltip_cats = ['radius']","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"deckgl = {\n \n container.innerHTML = '';\n \n var view = new deck.OrthographicView({id: 'ortho'}) \n var INITIAL_VIEW_STATE = INITIAL_VIEW_STATE_2D \n\n return new deck.DeckGL({\n container,\n views:[view],\n initialViewState:INITIAL_VIEW_STATE,\n // controller: true,\n controller: {doubleClickZoom: false},\n \n getTooltip: ({object}) => {\n\n // return object && ` ${object.name}\n // return object && ` ${object['properties'][select_meta]}\n return object && ` ${tooltip_cats.map(x => x + ': ' + object['properties'][x]).join('\\n')}\n \n `}, \n \n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"deck = require.alias({\n // optional dependencies\n h3: {},\n s2Geometry: {}\n})('deck.gl@8.3.7/dist.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"### Functions","pinned":false,"hidden":false,"mode":"md"},{"id":523,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"geojson_string = decode_zipped_string(zip_geojson_string)","pinned":true,"hidden":false,"mode":"ojs"},{"id":495,"value":"cell_geojson_string = '{\"type\": \"FeatureCollection\", \"features\": [{\"id\": \"0\", \"type\": \"Feature\", \"properties\": {\"color\": \"red\", \"index\": 0, \"leiden\": \"0\"}, \"geometry\": {\"type\": \"Point\", \"coordinates\": [54.340494179096545, 27.836938509379618]}}]}'","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"deckgl_points = JSON.parse(cell_geojson_string)\n// deckgl_points = [] ","pinned":true,"hidden":false,"mode":"ojs"},{"id":463,"value":"pako = require('pako/dist/pako.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"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":771,"value":"tmp = ({'a':1, 'b':2, 'c': 3})","pinned":true,"hidden":false,"mode":"ojs"},{"id":775,"value":"keys = Object.keys(tmp)","pinned":true,"hidden":false,"mode":"ojs"},{"id":780,"value":"Object.keys(tmp).map(x => x + ': ' + tmp[x]).join(', ')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}