31:T6d7,viewof cgm = { // Clustergrammer-GL uses query selectors to re-find the container, so if we // might want multiple instances of Clustergrammer-GL on the page, they’ll // need unique identifiers! (It’d be better if Clustergrammer-GL used // element.querySelector instead of document.querySelector and didn’t depend // on these identifiers.) const containerId = DOM.uid("container"); const container = html`

`; // Clustergrammer-GL depends on the container having been inserted into the // document before it’s initialized. We can do this by yielding! However, // since we’re defining this cell as a view, we don’t want the view’s value // to resolve until CGM has initialized. Hence we define the view’s value as // a promise that resolves immediately after. We could simplify this if // Clustergrammer-GL allowed you to pass in a detached container. let resolve; container.value = new Promise(r => resolve = r); yield container; // Initialize CGM. // (We might want to use Observable’s reactive width here?) const cgm = CGM({ network, viz_width: 900, viz_height: 900, container }); // Redefine the order parameters as getters and setters, so that we can intercept // when these change and emit an event. That will allow other cells to listen for // these changes are react accordingly. Object.defineProperties(cgm.params.order.new, { row: reactiveValue(container, "row", cgm.params.order.new.row), col: reactiveValue(container, "col", cgm.params.order.new.col) }); // Resolve the view’s value so that downstream cells can run. resolve(cgm); d3.select('.row_search_container').remove() }32:T4ba,umap_data = umap_data_ini.map( x => { var inst_long = umap_x_scale(parseFloat(x['pos-x'])) var inst_lat = umap_y_scale(parseFloat(x['pos-y'])) var inst_cat = cat_dict[x['']].split(': ')[1] var rgb = d3.color(cat_colors[inst_cat]) var inst_color if (selection === 'category'){ // color by category var inst_alpha if (selection_type == 'col-dendro'){ if (dendro_selections.includes(x[''])){ inst_alpha = 255 } else { inst_alpha = 25 } } else { inst_alpha = 255 } inst_color = [rgb.r, rgb.g, rgb.b, inst_alpha] } else { // color by dimension var inst_index = network.col_node_names.indexOf(x['']) var inst_data = dimension_data[inst_index] var inst_opacity = opacity_scale(Math.abs(inst_data)) if (inst_data > 0){ inst_color = [255, 0, 0, inst_opacity] } else { inst_color = [0, 0, 255, inst_opacity] } } var inst_obj = ({ name: x[''], position: [inst_long, inst_lat], food_type: inst_cat, color: inst_color }) return inst_obj } )33:T40f,scatter_layer = { const scatterLayer = new deck.ScatterplotLayer({ data: umap_data, getPosition: d => d.position, getFillColor: d => d.color, getRadius: 700, opacity: 0.75, pickable: true, autoHighlight: true, highlightColor: d => [50, 50, 50, 200], // stroked: true, // lineWidthMinPixels: 0.05, onHover: function(info, event){ // if ('object' in info){ // mutable inst_neighborhood = info.object.Neighborhood // } }, onClick: function(info, event){ // if ('object' in info){ // if (info.object.name !== selected_station.name){ // // select stations to view paths // mutable path_types = 'all' // mutable selected_station = info.object // } else { // // turn off paths // mutable selected_station = {} // } // } } }) deckgl.setProps({layers: [ scatterLayer]}); return scatterLayer }34:[{"id":"fd565ac17b747a730d2c3f869f30cea652e323cf37c67b9d84140e64d619f90a55e709a90c09d028d809fd6d4ad5e7298b11303e37c1421ad2f1f48aa66849aa","href":"https://static.observableusercontent.com/files/fd565ac17b747a730d2c3f869f30cea652e323cf37c67b9d84140e64d619f90a55e709a90c09d028d809fd6d4ad5e7298b11303e37c1421ad2f1f48aa66849aa","name":"pre-calc-viz.json","type":"application/json","lastModified":1582217071271.86,"size":14937275},{"id":"c4d584f3565e720df2de7962bd4e80fdb08b927c98fbeb8863697fe91b2c43a72b93f3a20b758102c6407d182408d12deb25485576747271d6a2ac8c6fca6fd2","href":"https://static.observableusercontent.com/files/c4d584f3565e720df2de7962bd4e80fdb08b927c98fbeb8863697fe91b2c43a72b93f3a20b758102c6407d182408d12deb25485576747271d6a2ac8c6fca6fd2","name":"clustergrammer-gl-0.11.9.js","type":"application/javascript","lastModified":1587566241776.648,"size":787178},{"id":"528cd8d183651c3cd33f113b0f22843a943d2a6a2782ba27650081ba1ec6c3c6a1bac2241163346846da6f4f00cb93276be9c94ee40dbfea5cbc76102077a276","href":"https://static.observableusercontent.com/files/528cd8d183651c3cd33f113b0f22843a943d2a6a2782ba27650081ba1ec6c3c6a1bac2241163346846da6f4f00cb93276be9c94ee40dbfea5cbc76102077a276","name":"clustergrammer-gl.0.19.0.packd.js","type":"application/javascript","lastModified":1608754831336.885,"size":1017517},{"id":"fe44572e2cbec13c5e0232ad4873f38a25e37c6b5fb488622c31c9d3fef880bbf53e699978d7f78eaeba26e78d09d7916313a86303ad0865d06a006040dab59a","href":"https://static.observableusercontent.com/files/fe44572e2cbec13c5e0232ad4873f38a25e37c6b5fb488622c31c9d3fef880bbf53e699978d7f78eaeba26e78d09d7916313a86303ad0865d06a006040dab59a","name":"df_meta_v2.csv","type":"text/csv","lastModified":1608754794427.551,"size":364100}] 2f:{"title":"Clustergrammer-GL Visium Example","cells":[{"id":43,"value":"md`\n# Clustergrammer-GL Visium Example\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"viewof orientation = select({\n description: \"Select Orientation - switch to fullscreen for Landscape\",\n options: [\"Portrait\", \"Landscape\"],\n value: \"Portrait\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"tmp = { \n\n if (orientation == 'Portrait' && is_fullscreen === false){\n \n var inst_html = html`\n

\n ${container}

${viewof cgm}

\n \n `\n } else {\n\n \n var inst_html = html`

${container}

${viewof cgm}

`\n }\n \n return inst_html\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"md`This notebook visualizes a public spatial transcriptomics Visium dataset obtained from [10X Genomics](https://www.10xgenomics.com/spatial-transcriptomics/) (spatial data not shown). The data in the heatmap is adapted from the GitHub project https://github.com/ismms-himc/visium-clustergrammer2. The Voila dashboard version of this dataset can be seen here: http://bit.ly/visium-clustergrammer2. The top 250 variable genes are shown in the heatmap. The spatial view and heatmap are linked in the following ways: clicking on a column dendrogram shows the highlighted spots in the spatial view, 2) clicking on a row/gene show the expression of the gene in the spatial dataset.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"function reactiveValue(container, name, value) {\n return {\n get() {\n return value;\n },\n set(v) {\n value = v;\n container.dispatchEvent(new CustomEvent(\"input\", {detail: {name, value}}));\n return value;\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"mutable is_fullscreen = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"container = html `

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"inst_height = {\n var inst_height\n if (orientation === 'Portrait'){ \n inst_height = 850\n } else {\n inst_height = 850\n }\n return inst_height\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"// {\n// let container = html`

`;\n// yield container;\n// cgm({\n// network,\n// viz_width: 900,\n// viz_height: 900,\n// container\n// });\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`### FileAttachment(\"pre-calc-viz.json\")`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"md`Load [Network JSON](https://clustergrammer.readthedocs.io/clustergrammer_js.html#visualization-json) and initialize cgm object`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"network = FileAttachment(\"pre-calc-viz.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"// cgm = require(\"https://bundle.run/clustergrammer-gl@0.11.9\")\n// cgm = require(await FileAttachment(\"clustergrammer-gl-0.11.9.js\").url())","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"md`## Clustergrammer-GL`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"CGM = require(await FileAttachment(\"clustergrammer-gl.0.19.0.packd.js\").url())","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"import {slider, select} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"selection_type = Generators.observe(notify => {\n\n const mousemove = () => notify(cgm.params.tooltip.tooltip_type);\n \n viewof cgm.addEventListener(\"click\", mousemove);\n notify(cgm.params.tooltip.tooltip_type);\n \n return () => viewof cgm.removeEventListener(\"mousemove\", mousemove);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"mutable selected_row = Generators.observe(notify => {\n const mouse_click = () => {\n\n if (cgm.params.tooltip.tooltip_type === 'row-label'){\n var inst_name = cgm.params.int.mouseover.row.name\n if (selection != inst_name){\n mutable selection = inst_name\n } else {\n mutable selection = 'category'\n }\n }\n \n notify(cgm.params.int.mouseover.row.name)\n }\n \n viewof cgm.addEventListener(\"click\", mouse_click);\n \n notify(cgm.params.int.mouseover.row.name);\n\n return () => viewof cgm.removeEventListener(\"mousemove\", mouse_click);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"dendro_selections = Generators.observe(notify => {\n\n const mousemove = () => {\n \n if (cgm.params.tooltip.tooltip_type.includes('dendro')){\n mutable selection = 'category'\n }\n\n notify(cgm.params.dendro.selected_clust_names)\n }\n \n viewof cgm.addEventListener(\"click\", mousemove);\n notify(cgm.params.dendro.selected_clust_names);\n\n return () => viewof cgm.removeEventListener(\"mousemove\", mousemove);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"md`## Deck.gl `","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"umap_data_ini = d3.csvParse(await FileAttachment(\"df_meta_v2.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"opacity_scale = d3.scaleLinear()\n .domain([0, 5])\n .range([0, 255]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"umap_x_min = Math.min.apply(Math, umap_data_ini.map(function(o) { return parseFloat(o['pos-x']) }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"umap_x_max = Math.max.apply(Math, umap_data_ini.map(function(o) { return parseFloat(o['pos-x']) }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"umap_y_min = Math.min.apply(Math, umap_data_ini.map(function(o) { return parseFloat(o['pos-y']) }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"umap_y_max = Math.max.apply(Math, umap_data_ini.map(function(o) { return parseFloat(o['pos-y']) }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"umap_x_scale = d3.scaleLinear()\n .domain([umap_x_min, umap_x_max])\n .range([-74, -73]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"umap_y_scale = d3.scaleLinear()\n .domain([umap_y_min, umap_y_max])\n .range([40, 40.75]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"cat_dict = {\n var cat_dict = {}\n network.col_nodes.map(x => {\n cat_dict[x.name] = x['cat-0']\n })\n return cat_dict\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"cat_colors = {\n var cat_colors = {} \n var cat_colors_ini = network.cat_colors.col['cat-0']\n var ini_keys = Object.keys(cat_colors_ini)\n \n ini_keys.map(x => {\n cat_colors[x.split(': ')[1]] = cat_colors_ini[x]\n })\n return cat_colors\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"mutable selection = 'category'","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"selected_row_index = network.row_node_names.indexOf(selected_row)","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"dimension_data = network.mat[selected_row_index]","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"deckgl = {\n \n // // reference for below https://observablehq.com/@tomvantilburg/deckgl-mapbox-and-3d-tiles\n // // This is an Observable hack: clear previously generated content\n container.innerHTML = '';\n \n return new deck.DeckGL({\n container,\n initialViewState: {\n longitude: inst_lng,\n latitude: inst_lat,\n zoom: inst_zoom,\n minZoom: 8,\n maxZoom: 15, \n },\n controller: true,\n\n getTooltip: ({object}) => {\n // return object && `${object.Neighborhood} \\n ${object['cross-x']} and ${object['cross-y']}\n return object && `${object.name}\\n Food Type: ${object.food_type}` },\n // Mapbox settings\n // set `map: false` to turn off Mapbox base map\n // map: mapboxgl,\n // This token is for demo-purpose only and rotated regularly. Get your token at https://www.mapbox.com\n // mapboxApiAccessToken: mapbox_token,\n mapStyle: 'mapbox://styles/mapbox/light-v9',\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"inst_zoom = 9","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"inst_lng = -73.45","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"inst_lat = 40.35","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"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"}],"files":"$W34","stdlib":"1","titling":"auto"}