31:T774,{ const autoHighlight = true // have deck.gl animate function apply_map_morph(d){ var inst_x var inst_y if (map_type === 'Spatial'){ inst_x = d.x inst_y = - d.y } else { inst_x = umap_x_scale(d['umap-x']) inst_y = - umap_y_scale(d['umap-y']) } return [inst_x, inst_y] } var transitions = { getPosition: { duration:transitionDuration, easing: d3.easeCubic } } const scatterLayer = new deck.ScatterplotLayer({ id: 'scatterLayer', data: data, getPosition: apply_map_morph, getFillColor: d => { var inst_color if (['undefined'].includes(select_meta_type)){ // show dim scatterplot inst_color = [50, 50, 50, 100] } else { // value or category based metadata if (select_meta_type === 'number'){ // color by value //////////////////////////////////////// if (d[select_meta] > 0){ inst_color = [255, 0, 0, opacity_scale(d[select_meta])] } else { inst_color = [50, 50, 50, 15] } } else { // color by category //////////////////////////////////////// var rgb = d3.color(cat_colors[d[select_meta]]) inst_color = [rgb.r, rgb.g, rgb.b, 255 * cat_opacity] } } return inst_color }, getRadius: radius, pickable: true, // autoHighlight: true, highlightColor: d => [50, 50, 50], radiusMinPixels: radius_min_pixels, updateTriggers: { getFillColor: select_meta, getPosition: map_type }, transitions: transitions }) deckgl.setProps({layers: [scatterLayer]}); }32:[] 2f:{"title":"Deck.gl Jupyter Spatial and UMAP","cells":[{"id":0,"value":"md`# Deck.gl Jupyter Spatial and UMAP\n\nhttps://colab.research.google.com/drive/1lXDh_AFgx3m9Qp307nz--1UwoBDkfbtH?usp=sharing\n\nswitched to import {slider, select} from '@jashkenas/inputs'\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"container = html `\n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"dashboard = html`\n\n

${viewof map_type}

${viewof select_meta}

\n\n

\n ${container}\n

\n\n` ","pinned":true,"hidden":false,"mode":"ojs"},{"id":659,"value":"select_meta_type = typeof data[0][select_meta]","pinned":true,"hidden":false,"mode":"ojs"},{"id":495,"value":"ini_map_type = 'UMAP'","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"// viewof select_meta = Select([null].concat(meta_data_cols), {label: \"Metadata\", value: ini_cat})\nviewof select_meta = select({'options':['none'].concat(meta_data_cols), value: ini_cat})","pinned":true,"hidden":false,"mode":"ojs"},{"id":679,"value":"ini_cat = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"num_frames = 45","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"delay_frames = 30","pinned":true,"hidden":false,"mode":"ojs"},{"id":366,"value":"numbers = Array.from({length: num_frames + 1}, (_, i) => i/num_frames)","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"// viewof radius = Range([0, 255], {step: 1})\nradius = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"import {Select, Range} from '@observablehq/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":338,"value":"md`### Scrubber Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"meta_data_cols = Object.keys(data[0])\n .filter(x => non_param_cols.includes(x) === false)","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"meta_data_cols","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"meta_max = Math.max.apply(Math, data.map(function(x) { return parseFloat(x[select_meta]) }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"data.map(x => { return parseFloat(x['some']) })","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"opacity_scale = d3.scaleLinear()\n .domain([0, meta_max])\n .range([0, 250])","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"opacity_scale(20)","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"non_param_cols = ['x', 'y', 'umap-x', 'umap-y', 'name']","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"data = [\n {\n 'name': 'one',\n 'x': 1, \n 'y': 1, \n 'cat':'dog', \n 'val': 1,\n 'umap-x':1,\n 'umap-y':1 \n },\n {\n 'name': 'two',\n 'x': 20, \n 'y': 20, \n 'val': 20,\n 'cat':'elephant', \n 'umap-x':-20,\n 'umap-y':-20 \n } \n]\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":637,"value":"cat_colors = ({\n 'dog': 'blue', \n 'elephant': 'red'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":638,"value":"d3.color(cat_colors['cat'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":503,"value":"transitionDuration = 3000","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"x_min = Math.min.apply(Math, data.map(function(o) { return parseFloat(o['x']) }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"x_max = Math.max.apply(Math, data.map(function(o) { return parseFloat(o['x']) }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"y_min = Math.min.apply(Math, data.map(function(o) { return parseFloat(o['y']) }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"y_max = Math.max.apply(Math, data.map(function(o) { return parseFloat(o['y']) }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"umap_x_min = Math.min.apply(Math, data.map(function(o) { return parseFloat(o['umap-x']) }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"umap_x_max = Math.max.apply(Math, data.map(function(o) { return parseFloat(o['umap-x']) }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"umap_y_min = Math.min.apply(Math, data.map(function(o) { return parseFloat(o['umap-y']) }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"umap_y_max = Math.max.apply(Math, data.map(function(o) { return parseFloat(o['umap-y']) }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"umap_x_scale = d3.scaleLinear()\n .domain([umap_x_min, umap_x_max])\n .range([x_min, x_max]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"umap_y_scale = d3.scaleLinear()\n .domain([umap_y_min, umap_y_max])\n .range([y_min, y_max]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"import {slider, select} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"unselected_opacity_scale = 0.25","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"meta_size_scale = 1.25","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"default_opacity = 0.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"radius_min_pixels = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 750","pinned":true,"hidden":false,"mode":"ojs"},{"id":538,"value":"width = 'auto'","pinned":true,"hidden":false,"mode":"ojs"},{"id":707,"value":"cat_opacity = 0.9","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"initial_view_state = ({\n target: [ini_x, -ini_y, 0],\n zoom: zoom,\n minZoom:minZoom\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":520,"value":"ini_x = d3.mean(data, d => +d.x) // 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":522,"value":"ini_y = d3.mean(data, d => +d.x) // 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":511,"value":"zoom = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":514,"value":"minZoom = zoom - 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"data[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":566,"value":"tooltip = meta_data_cols","pinned":true,"hidden":false,"mode":"ojs"},{"id":676,"value":"tooltip","pinned":true,"hidden":false,"mode":"ojs"},{"id":568,"value":"tooltip_string = tooltip.map(x => x + ':' + String(data[0][x]) ).join('\\n')","pinned":true,"hidden":false,"mode":"ojs"},{"id":545,"value":"data[0]['name']","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"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 const view = new deck.OrthographicView({id: 'ortho'})\n \n return new deck.DeckGL({\n container,\n views:[view],\n initialViewState:initial_view_state,\n controller: true,\n getTooltip: ({object}) => {\n return object && \n `name: ${object.name}\\npos: ${object.x}, ${object['y']}\\n` + \n tooltip.map(x => x + ': ' + String(object[x]) ).join('\\n')\n }, \n \n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"deck = require.alias({\n // optional dependencies\n h3: {}\n})('deck.gl@latest/dist.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":607,"value":"data[0].hasOwnProperty('name')","pinned":true,"hidden":false,"mode":"ojs"},{"id":645,"value":"md`## Choose Map Type`","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"viewof map_type = {\n const element = html`\n

`;\n\n d3.select(element)\n .style('padding-right', '25px') \n .selectAll('div')\n .data(['Spatial', 'UMAP'])\n .join('span')\n .on('click', function(d){\n d3.select(element).selectAll('span')\n .style('color', '#808080')\n d3.select(this)\n .style('color', 'blue') \n element.value = d.replace(', ', '')\n element.dispatchEvent(new CustomEvent(\"input\")); \n }) \n .style('min-width', '200px')\n .style('max-width', '200px') \n .style('margin-right', '10px') \n .text(d => d)\n .style('font-weight', '550px') \n .style(\"font-family\", \"sans-serif\")\n .style(\"font-size\", \"16\")\n .style(\"text-anchor\", \"end\")\n .style('font-weight', 'bold')\n .style('color', d => d === 'UMAP' ? 'blue': '#808080')\n\n\n element.value = ini_map_type\n element.dispatchEvent(new CustomEvent(\"input\"))\n\n return element\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}