31:T580,triangle_layer = new deck.PolygonLayer({ id: 'triangle_layer', data: deckgl_triangles, // getFillColor: d => d.color, getFillColor: d => { var inst_color var unselected_opacity_255 = 20 if (select_cluster === 'none'){ inst_color = d.color } else { inst_color = [d.color[0], d.color[1], d.color[2], unselected_opacity_255] // check gene name if (d.name === select_cluster){ inst_color = d.color } } return inst_color }, // getLineWidth: d => poly_line_width, // lineWidthMinPixels: 2, getPolygon: d => d.coordinates, // // modified stroked: false, filled: true, wireframe: true, pickable: true, opacity: opacity, updateTriggers: { getFillColor: select_cluster, }, onClick: (info, event) => { // onHover: (info, event) => { // console.log(info.object['name']) if (select_cluster !== info.object[cat_name]){ mutable select_cluster = info.object[cat_name] // mutable select_meta = cat_name // d3.select('#meta_dropdown').select('select').node().value = cat_name } else { mutable select_cluster = 'none' // mutable select_meta = cat_name // d3.select('#meta_dropdown').select('select').node().value = cat_name } }, visible: true, });32:T697,polygon_layer = new deck.PolygonLayer({ id: 'polygon_layer', data: deckgl_polygons, // getFillColor: [250, 0, 0, 255], getFillColor: d => { var color_name = cluster_colors[d.neighborhood] var rgb_array = d3.color(color_name) var rgb = [rgb_array.r, rgb_array.g, rgb_array.b] var inst_color if (select_cluster === 'none'){ inst_color = rgb } else { inst_color = [rgb[0], rgb[1], rgb[2], unselected_opacity_255] // check gene name if (d[cat_name] === select_cluster){ inst_color = rgb } } return inst_color }, // getLineColor: d => { // var color_name = cluster_colors[d.neighborhood] // var rgb_array = d3.color(color_name) // var rgb = [rgb_array.r/2, rgb_array.g/2, rgb_array.b/2] // return rgb // }, getLineWidth: d => poly_line_width, lineWidthMinPixels: 1, getPolygon: d => d.coordinates, updateTriggers: { getFillColor: select_cluster, }, stroked: false, filled: true, pickable: true, opacity: neighborhood_opacity, onClick: (info, event) => { // onHover: (info, event) => { // console.log(info.object['name']) if (select_cluster !== info.object[cat_name]){ mutable select_cluster = info.object[cat_name] // mutable select_meta = cat_name // d3.select('#meta_dropdown').select('select').node().value = cat_name } else { mutable select_cluster = 'none' // mutable select_meta = cat_name // d3.select('#meta_dropdown').select('select').node().value = cat_name } } }); 33:T73e,make_hull_data = (all_points, cluster_name, cluster_color) => { var rgb_array = d3.color(cluster_color) var rgb = [rgb_array.r, rgb_array.g, rgb_array.b] var cluster_points = all_points.filter(x => x.leiden == String(cluster_name)) var vertices = cluster_points.map(x => [parseFloat(x.x), -parseFloat(x.y)]) var delaunay = Delaunay.from(vertices) // alphashape and alphahull ////////////////////////////////// const filter = alphashapefilter(delaunay, alpha); var alphashape = new Uint8Array(delaunay.triangles.length / 3).map((_, i) => filter(i)); var alphahull = boundary(delaunay, alphashape) // deckgl_points ////////////////////////////////// var deckgl_points = cluster_points.map(x => ({ 'x': -parseFloat(x.x), 'y': -parseFloat(x.y), 'color': rgb })) // deckgl_triangles ////////////////////////////////// var deckgl_triangles = Array.from(alphashape).map((x,i) => { var pos_a = vertices[delaunay.triangles[i * 3 + 0]] var pos_b = vertices[delaunay.triangles[i * 3 + 1]] var pos_c = vertices[delaunay.triangles[i * 3 + 2]] var new_obj = ({ 'coordinates': [pos_a, pos_b, pos_c], 'name': cluster_name, 'id': i, 'color': rgb }) return new_obj }).filter(x => alphashape[x.id] == 1) // deckgl_polygons ////////////////////////////////// var deckgl_polygons = alphahull.map((cluster_points, i) => { var coordinates = cluster_points.map(x => [deckgl_points[x]['x'], deckgl_points[x]['y']] ) var new_obj = ({ 'coordinates': coordinates, 'name': cluster_name, 'color': rgb }) return new_obj }) var hull_data = ({ 'cluster_name': cluster_name, 'deckgl_points': deckgl_points, 'deckgl_triangles': deckgl_triangles, 'deckgl_polygons': deckgl_polygons }) return hull_data }34:T4ce,// based on https://bl.ocks.org/jasondavies/1554783 function boundary(delaunay, members) { const counts = {}, edges = {}, result = []; let r; // Traverse the edges of all member triangles and discard any edges that appear twice. members.forEach((member, d) => { if (!member) return; for (let i = 0; i < 3; i++) { var e = [ delaunay.triangles[3 * d + i], delaunay.triangles[3 * d + ((i + 1) % 3)] ].sort(); (edges[e[0]] = edges[e[0]] || []).push(e[1]); (edges[e[1]] = edges[e[1]] || []).push(e[0]); const k = e.join(":"); if (counts[k]) delete counts[k]; else counts[k] = 1; } }); while (1) { let k = null; // Pick an arbitrary starting point on a boundary. for (k in counts) break; if (k == null) break; result.push((r = k.split(":").map(Number))); delete counts[k]; let q = r[1]; while (q != r[0]) { let p = q, qs = edges[p], n = qs.length; for (let i = 0; i < n; i++) { q = qs[i]; let edge = [p, q].sort().join(":"); if (counts[edge]) { delete counts[edge]; r.push(q); break; } } } } return result; }35:[] 2f:{"title":"Cell Neighborhoods 0.2.0","cells":[{"id":0,"value":"# Cell Neighborhoods 0.2.0\nReferences [Alpha shapes 2](/@fil/alpha-shapes/2) / [Alpha shapes 3](/@fil/alpha-shapes/3)","pinned":false,"hidden":false,"mode":"md"},{"id":70,"value":"dashboard = html`\n

\n\n

${viewof opacity}

\n \n

${container}

\n \n

\n` \n\n //

\n //

${viewof alpha}

\n //

${viewof opacity}

\n //

\n \n //

${container}

\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"select_cluster","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"deckgl_polygons","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"deckgl_triangles","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"ini_alpha = 75","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"viewof alpha = slider({ min: 25, max: 200, value: ini_alpha, step: 5, description: 'alpha parameter'})","pinned":false,"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":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"container = html `

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"mutable select_cluster = 'none'","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"// see https://matplotlib.org/stable/gallery/color/named_colors.html\ncluster_colors = ({ \n '0': 'magenta',\n '1': 'silver',\n '2': 'red',\n '3': 'aqua',\n '4': 'darkblue',\n '6': 'gold',\n '15': 'lime',\n '24': 'blue',\n '17': 'orange',\n '20': 'green',\n '30': 'black', \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"// working on switch to pre-calc alpha shapes\n/////////////////////////////////////////////////\n// hull_data_array = Object.keys(cluster_colors).map(x => {\n// return make_hull_data(all_points, x, cluster_colors[x])\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"deckgl_points = [{\"x\":0,\"y\":0,\"color\":[255,0,255]},{\"x\":-1,\"y\":-0.5,\"color\":[255,0,255]},{\"x\":-2,\"y\":-3,\"color\":[255,0,255]},{\"x\":-4,\"y\":-4,\"color\":[255,0,255]},{\"x\":-10,\"y\":-8,\"color\":[255,0,255]},{\"x\":-20,\"y\":7,\"color\":[255,0,255]},{\"x\":0,\"y\":10,\"color\":[192,192,192]},{\"x\":-1,\"y\":10.5,\"color\":[192,192,192]},{\"x\":-2,\"y\":13,\"color\":[192,192,192]},{\"x\":-4,\"y\":14,\"color\":[192,192,192]},{\"x\":-10,\"y\":18,\"color\":[192,192,192]},{\"x\":-20,\"y\":17,\"color\":[192,192,192]}]\n// deckgl_points = [].concat(... hull_data_array.map(x => x['deckgl_points']))","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"deckgl_triangles = [] // [].concat(... hull_data_array.map(x => x['deckgl_triangles']))","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"// deckgl_polygons = [].concat(... hull_data_array.map(x => x['deckgl_polygons']))\ndeckgl_polygons = [{\"coordinates\":[[0,0],[-2,-3],[-10,-8],[-20,7],[0,0]],\"name\":\"0\",\"color\":[255,0,255]},{\"coordinates\":[[-10,18],[-20,17],[0,10],[-2,13],[-10,18]],\"name\":\"1\",\"color\":[192,192,192]}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"check_deckgl_polygons = deckgl_polygons","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"check_deckgl_triangles = deckgl_triangles.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"neighborhood_opacity = 0.75","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"unselected_opacity_255 = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"deckgl_polygons[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"selected_deckgl_points = deckgl_points.filter(x => x.leiden == select_cluster)","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"transcript_radius = 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"radius_min_pixels = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"transcript_opacity = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"darken_transcripts_factor = 0.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"tmp = 9","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"scatter_layer = new deck.ScatterplotLayer({\n id: 'scatter_layer',\n // data: scatter_data,\n data: selected_deckgl_points,\n getPosition: d => {\n return [d.x, d.y]\n },\n getFillColor: d => {\n // points are labeled by leiden cluster\n var color_name = cluster_colors[d.leiden]\n var rgb_array = d3.color(color_name)\n // var rgb = [rgb_array.r/darken_transcripts_factor, \n // rgb_array.g/darken_transcripts_factor, \n // rgb_array.b/darken_transcripts_factor]\n var rgb = [rgb_array.r, \n rgb_array.g, \n rgb_array.b] \n return rgb\n },\n getRadius: transcript_radius, \n pickable: true,\n // autoHighlight: true,\n highlightColor: d => [50, 50, 50], \n radiusMinPixels: radius_min_pixels,\n updateTriggers: {\n getFillColor: select_cluster,\n // getPosition: map_type\n }, \n opacity: transcript_opacity,\n // set to toggle based on clicking neighborhood \n visible: true\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"deckgl_points[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"cat_name = 'neighborhood'","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"// deckgl.setProps({layers: [triangle_layer, polygon_layer, scatter_layer]});\ndeckgl.setProps({layers: [polygon_layer, scatter_layer]});","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"poly_line_width = 1","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.map(x => x['x']))","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"center_y = d3.mean(deckgl_points.map(x => x['y']))","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"// zoom = -2.75\nzoom = 3","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":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 getTooltip: ({object}) => {\n return object && ` ${object.name}\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":11,"value":"Delaunay = (await require(\"d3-delaunay\")).Delaunay","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":51,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"// based on https://bl.ocks.org/gka/1552725 \nfunction alphashapefilter(delaunay, alpha) {\n const asq = alpha ** 2;\n function dist2(p, q) {\n return (\n (delaunay.points[2 * p] - delaunay.points[2 * q]) ** 2 +\n (delaunay.points[2 * p + 1] - delaunay.points[2 * q + 1]) ** 2\n );\n }\n return function(i) {\n let t0 = delaunay.triangles[i * 3 + 0],\n t1 = delaunay.triangles[i * 3 + 1],\n t2 = delaunay.triangles[i * 3 + 2];\n return dist2(t0, t1) < asq && dist2(t1, t2) < asq && dist2(t2, t0) < asq;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}