31:T748,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': cluster_color }) 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 }32:T559,triangle_layer = new deck.PolygonLayer({ id: 'polygon_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: 1, getPolygon: d => d.coordinates, 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 } } });33: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; }34:[] 2f:{"title":"Cell Neighborhoods 0.1.0","cells":[{"id":0,"value":"# Cell Neighborhoods 0.1.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 alpha}

${viewof opacity}

\n \n

${container}

\n \n

\n` \n","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"ini_alpha = 75","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"min_alpha = 25","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"max_alpha = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"alpha_step = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"viewof alpha = slider({ min: min_alpha, max: max_alpha, value: ini_alpha, step: alpha_step, description: 'alpha parameter'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"ini_opacity = 0.75","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"viewof opacity = slider({ min: 0.01, max: 1, value: ini_opacity, 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":56,"value":"// all_points = FileAttachment(\"kidney_positions_and_leiden.csv\").csv()\nall_points = ([\n {\n 'name': '1',\n 'leiden': '0',\n 'x': '0',\n 'y': 0\n },\n {\n 'name': '2',\n 'leiden': '0',\n 'x': '1',\n 'y': '0.5'\n },\n {\n 'name': '3',\n 'leiden': '0',\n 'x': '2',\n 'y': '3'\n },\n {\n 'name': '4',\n 'leiden': '0',\n 'x': '4',\n 'y': 4\n },\n {\n 'name': '5',\n 'leiden': '0',\n 'x': '10',\n 'y': '8'\n },\n {\n 'name': '6',\n 'leiden': '0',\n 'x': '20',\n 'y': '-7'\n },\n {\n 'name': '7',\n 'leiden': '1',\n 'x': '0',\n 'y': '-10'\n },\n {\n 'name': '8',\n 'leiden': '1',\n 'x': '1',\n 'y': '-10.5'\n },\n {\n 'name': '9',\n 'leiden': '1',\n 'x': '2',\n 'y': '-13'\n },\n {\n 'name': '10',\n 'leiden': '1',\n 'x': '4',\n 'y': '-14'\n },\n {\n 'name': '11',\n 'leiden': '1',\n 'x': '10',\n 'y': '-18'\n },\n {\n 'name': '12',\n 'leiden': '1',\n 'x': '20',\n 'y': '-17'\n }\n \n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"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":51,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"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']))","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"cat_name = 'name'","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"deckgl.setProps({layers: [triangle_layer]});","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"poly_line_width = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"height = 850","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"center_x = d3.mean(all_points.map(x => x['x']))","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"center_y = d3.mean(all_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":17,"value":"$33","pinned":true,"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":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"}],"files":"$W34","stdlib":"1","titling":"auto"}