2b:null 2c:["$","title",null,{"children":"LocalOT 3D Interactive Data Viewer for Spatial Transcriptomics | Han Liu | Observable"}] 31:T624,mutable globalParamsUpdateWidget = html`

Enter Slice Numbers (comma separated):

Show Axes

Show Lines

Aspect Ratio (X, Y, Z):

Set Camera Eye Angle (X, Y, Z):

Dot Size:

`32:T457,mutable geneParamSetting = html`

Set Opacity Value ( Range: 0-1):

Set Gene Value (ag. Slc30a3, Adam2, Cux2, Bcl11b):

Set Colormap Value:

`33:Tf68,filterByGeneData = () => { // Retrieve the slice input value and split it into an array of numbers const sliceValue = document.getElementById('sliceInput').value; const yValuesToFilter = sliceValue.split(',').map(Number); // Convert comma-separated values to an array of numbers const showAxis = document.getElementById('showAxesCheckbox').checked; // Get selected color scheme from the dropdown const color = document.getElementById('colorDropdown').value; // Get opacity input value const opacity = document.getElementById('opacityInput').value; // Get aspect ratio values for the 3D plot's axes const aspectX = document.getElementById('aspectX').value; const aspectY = document.getElementById('aspectY').value; const aspectZ = document.getElementById('aspectZ').value; // Get camera position values for the 3D plot const cameraX = document.getElementById('cameraX').value; const cameraY = document.getElementById('cameraY').value; const cameraZ = document.getElementById('cameraZ').value; // Retrieve the gene input value for filtering const geneValue = document.getElementById('geneInput').value; // Get dot size input value for marker size in the plot const dotSize = document.getElementById('dotSize').value; // Filter the dataset by the gene value and y-values provided in slice input let filteredByGeneData = filterByGene(geneValue).filter(d => yValuesToFilter.includes(+d.Y)); // Extract gene values from the filtered dataset let geneValues = filteredByGeneData.map(d => parseFloat(d.geneValue)); // Determine the maximum and minimum gene values for color scaling let maxValue = geneValues.reduce((max, current) => (current > max ? current : max), -Infinity); let minValue = geneValues.reduce((min, current) => (current < min ? current : min), Infinity); // Define available color interpolations for the plot const interpolations = { Cool: d3.interpolateCool, Viridis: d3.interpolateViridis, Plasma: d3.interpolatePlasma, Magma: d3.interpolateMagma, Inferno: d3.interpolateInferno, Rainbow: d3.interpolateRainbow, Warm: d3.interpolateWarm, Cividis: d3.interpolateCividis }; // Select the chosen color interpolation or default to 'Cool' let selectedColor = interpolations[color] || d3.interpolateCool; // Create a color scale based on the chosen interpolation and the range of gene values let colorScale = d3.scaleSequential(selectedColor).domain([minValue, maxValue]); // Plot the filtered data using Plotly Plotly.newPlot(document.getElementById('genePlotDiv'), [ { x: filteredByGeneData.map(d => +d.X), // Extract X coordinates as numbers y: filteredByGeneData.map(d => +d.Y), // Extract Y coordinates as numbers z: filteredByGeneData.map(d => +d.Z), // Extract Z coordinates as numbers mode: 'markers', // Set the mode to markers for scatter plot type: 'scatter3d', // Use a 3D scatter plot marker: { color: filteredByGeneData.map(d => colorScale(parseFloat(d.geneValue))), // Map gene values to colors size: dotSize, // Set marker size opacity: opacity !== "" ? parseFloat(opacity) : 0.4 // Use input opacity or default to 0.4 }, text: filteredByGeneData.map(d => `Slice: ${d.Y}`), // Set hover text to show the original slice value hovertemplate: 'X: %{x}
Y : %{y}
Z: %{z}
%{text}', // Custom hover template name: 'Combined Dataset' // Legend label } ], { margin: { l: 0, r: 0, b: 0, t: 0 }, // Set plot margins scene: { xaxis: { title: 'X Axis', visible: showAxis}, yaxis: { title: 'Y Axis', visible: showAxis}, zaxis: { title: 'Z Axis', visible: showAxis}, aspectratio: { x: aspectX, y: aspectY, z: aspectZ }, // Apply aspect ratio settings camera: { eye: { x: cameraX, y: cameraY, z: cameraZ } // Set the camera position } } }); }; 34:T631,function renderGenePlot() { // Use Plotly to create a new 3D scatter plot inside the 'genePlotDiv' element Plotly.newPlot(document.getElementById('genePlotDiv'), [ { // Map the data to the 3D coordinates (x, y, z) x: parsedData.map(d => +d.X), // Convert X values to numbers y: parsedData.map(d => +d.Y), // Convert Y values to numbers z: parsedData.map(d => +d.Z), // Convert Z values to numbers mode: 'markers', // Set the plot mode to display markers type: 'scatter3d', // Define the plot type as a 3D scatter plot marker: { color: 'lightblue', // Set a static color for all markers size: 4, // Set marker size opacity: 0.4 // Set marker opacity }, text: parsedData.map(d => `Slice: ${d.Y}`), // Add hover text showing the slice (Y value) hovertemplate: 'X: %{x}
Y : %{y}
Z: %{z}
%{text}', // Customize the hover display format name: 'Combined Dataset' // Label the dataset for the legend } ], { margin: { l: 0, r: 0, b: 0, t: 0 }, // Set margins to 0 for a tight layout scene: { xaxis: { title: 'X Axis', visible: false }, // Hide the X-axis title and axis line yaxis: { title: 'Y Axis', visible: false }, // Hide the Y-axis title and axis line zaxis: { title: 'Z Axis', visible: false }, // Hide the Z-axis title and axis line aspectratio: { x: 1, y: 3, z: 1 }, // Set aspect ratio for the 3D plot camera: { eye: { x: 2, y: -1.5, z: 0.5 } // Position the camera view for the 3D scene } } }); } 35:Te5b,filterBySliceData = () => { const sliceValue = document.getElementById('sliceInput').value; const showAxis = document.getElementById('showAxesCheckbox').checked; const showLine = document.getElementById('showLineCheckbox').checked; console.log("sliceValue: ", sliceValue) const yValuesToFilter = sliceValue.split(',').map(Number); // Convert input to an array of numbers const filteredBySliceData = parsedData.filter(d => yValuesToFilter.includes(+d.Y)); const aspectX = document.getElementById('aspectX').value; const aspectY = document.getElementById('aspectY').value; const aspectZ = document.getElementById('aspectZ').value; const cameraX = document.getElementById('cameraX').value; const cameraY = document.getElementById('cameraY').value; const cameraZ = document.getElementById('cameraZ').value; const dotSize = document.getElementById('dotSize').value; // console.log("coordinatesArray", coordinatesArray) const lineStartIndex = sumCountsInRange(counts, 0, sliceValue[0]); const lineEndIndex = sumCountsInRange(counts, 0, sliceValue[sliceValue.length -1]); let randomLines = Array.from({ length: lineEndIndex - lineStartIndex + 1 }, (_, i) => lineStartIndex + i); if (lineEndIndex - lineStartIndex > 1000){ randomLines = getRandomUniqueValues(randomLines, 1000) } console.log("randomLines",randomLines) console.log("Line Start and end: ", lineStartIndex, lineEndIndex) const pairedDots = randomLines .map(index => coordinatesArray[index]) // Get values at specified indexes .filter(([coord1, coord2]) => coord1 && coord2); // Filter as before console.log("pairedDots: ", pairedDots) // const pairedDots = coordinatesArray.slice(lineStartIndex,lineEndIndex).filter(([coord1, coord2]) => coord1 && coord2); // List of colors for the lines // const lineColors = comparedColors.slice(lineStartIndex,lineEndIndex); const lineColors = randomLines .map(index => comparedColors[index]) // Get values at specified indexes .filter(([coord1, coord2]) => coord1 && coord2); // Filter as before // Convert paired dots to line segments for Plotly with individual colors const lineSegments = showLine ? pairedDots.flatMap((pair, index) => ({ x: [pair[0].X, pair[1].X, null], // Null separates line segments y: [pair[0].Y, pair[1].Y, null], z: [pair[0].Z, pair[1].Z, null], mode: 'lines', type: 'scatter3d', line: { dash: 'dot', // Dotted line style color: lineColors[index], // Assign color from the lineColors array width: 4 }, hoverinfo: 'none', // No hover text for lines showlegend: false })) : ""; // classificationDiv.innerHTML = ''; // Update the Plotly plot Plotly.newPlot(document.getElementById('classificationPlotDiv'), [ { x: filteredBySliceData.map(d => +d.X), y: filteredBySliceData.map(d => +d.Y), z: filteredBySliceData.map(d => +d.Z), mode: 'markers', type: 'scatter3d', marker: { color: filteredBySliceData.map(d => d.celltype_colors), size: dotSize, opacity: 1 }, text: parsedData.map(d => `Slice: ${d.Y}`), hovertemplate: 'X: %{x}
Y: %{y}
Z: %{z}
%{text}', }, ...lineSegments // Add the line segments with individual colors to the plot ], { margin: { l: 0, r: 0, b: 0, t: 0 }, scene: { xaxis: { title: 'X Axis', visible: showAxis}, yaxis: { title: 'Y Axis', visible: showAxis}, zaxis: { title: 'Z Axis', visible: showAxis}, aspectratio: { x: aspectX, y: aspectY, z: aspectZ }, camera: { eye: { x: cameraX, y: cameraY, z: cameraZ } } } }); }36:[{"id":"385ad5692d45aa5eb7f244090810f987342ed2754bd703eafd270c140c625c9ce70af845ded27ee9caa6adcfe5483cb40227f546d50d8e9c3c369993d9c42aae","href":"https://static.observableusercontent.com/files/385ad5692d45aa5eb7f244090810f987342ed2754bd703eafd270c140c625c9ce70af845ded27ee9caa6adcfe5483cb40227f546d50d8e9c3c369993d9c42aae","name":"mouse33alignCells.json","type":"application/json","lastModified":1731699533758.348,"size":13570755},{"id":"a3774dbdb5a31bab4ba1e10065fc7477fac51620c6094cd73e3e1d73df8edd51d3882f6252fe14e2c6969a888c749310e6838660cc7e384883d4b1303b710db5","href":"https://static.observableusercontent.com/files/a3774dbdb5a31bab4ba1e10065fc7477fac51620c6094cd73e3e1d73df8edd51d3882f6252fe14e2c6969a888c749310e6838660cc7e384883d4b1303b710db5","name":"Slices.csv","type":"text/csv","lastModified":1725224402237.702,"size":11749230}] 2f:{"id":"0ac03a306004ade8","slug":"3d-interactive-data-viewer","title":"LocalOT 3D Interactive Data Viewer for Spatial Transcriptomics","thumbnail":"85c10c1ec4e8ddaa67523f0c00988f3462bf42f92e7d2106336a4a54bf5ffedd","access_level":"public","create_time":"$D2024-09-01T20:58:17.646Z","update_time":"$D2025-10-16T15:20:06.867Z","view_time":null,"first_public_time":"$D2024-09-01T22:00:24.822Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"8a3d31b303288012","login":"hanliuxxx","name":"Han Liu","avatar_url":"https://avatars-next.observableusercontent.com/0906f84ce04affad59cdc3dbedb67befde3c0a9ca1cfdaa73fa2b4323861a1ce","tier":"starter_2024"},"version":916,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"08550ca7155b8f2a","login":"hanliuxxx","name":"Han Liu","avatar_url":"https://avatars-next.observableusercontent.com/0906f84ce04affad59cdc3dbedb67befde3c0a9ca1cfdaa73fa2b4323861a1ce","tier":null}],"members":[{"type":"individual","id":"08550ca7155b8f2a","login":"hanliuxxx","name":"Han Liu","avatar_url":"https://avatars-next.observableusercontent.com/0906f84ce04affad59cdc3dbedb67befde3c0a9ca1cfdaa73fa2b4323861a1ce","tier":null,"role":"editor"},{"type":"team","id":"8a3d31b303288012","login":"hanliuxxx","name":"Han Liu","avatar_url":"https://avatars-next.observableusercontent.com/0906f84ce04affad59cdc3dbedb67befde3c0a9ca1cfdaa73fa2b4323861a1ce","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"LocalOT 3D Interactive Data Viewer for Spatial Transcriptomics","cells":[{"id":0,"value":"# LocalOT 3D Interactive Data Viewer for Spatial Transcriptomics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":492,"value":"### Gloabl Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":498,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"##### 1. show line or not 2. random lines among selected slices 3. giutub dsecription","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":466,"value":"## 1. Cellular Classification","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"classificationDiv = html`\n

\n \n

\n`;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"## 2. Gene Trend Track via Transparent 3D Visual","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"geneDiv = html`\n

\n \n

\n`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"globalParamsUpdateWidget.querySelector(\"#gloablParamUpdateButton\").onclick = () => {\n filterBySliceData();\n filterByGeneData();\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"document.getElementById('geneParamUpdateButton').onclick = filterByGeneData;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"uniqueYValues = Array.from(new Set(parsedData.map(d => +d.Y)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"getDynamicOpacity = (yValue) => {\n // Assuming uniqueYValues is a list of all Y values\n let minY = Math.min(...uniqueYValues);\n let maxY = Math.max(...uniqueYValues);\n \n // Calculate normalized opacity based on the range of Y values\n let normalizedOpacity = (yValue - minY) / (maxY - minY); // Normalizes Y values to a range of 0 to 1\n\n // Scale opacity to a range, e.g., 0.15 to 0.35\n return 0.15 + normalizedOpacity * (0.35 - 0.25);\n};\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"renderGenePlot();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"counts","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"sumCountsInRange(counts, 0, 10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"geneDiv.querySelector('#resetGenePlot').onclick = () => {\n const plotDiv = document.getElementById('genePlotDiv');\n plotDiv.innerHTML = ''; // Clear the existing plot\n renderGenePlot(); // Re-render the plot\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"classificationDiv.querySelector('#resetClassificationPlot').onclick = () => {\n const plotDiv = document.getElementById('classificationPlotDiv');\n plotDiv.innerHTML = ''; // Clear the existing plot\n renderClassificationPlot(); // Re-render the plot\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"renderClassificationPlot()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"function renderClassificationPlot() {\n Plotly.newPlot(document.getElementById('classificationPlotDiv'), [\n {\n x: parsedData.map(d => +d.X), // Ensure the coordinates are treated as numbers\n y: parsedData.map(d => +d.Y),\n z: parsedData.map(d => +d.Z),\n mode: 'markers',\n type: 'scatter3d',\n marker: {\n color: parsedData.map(d => d.celltype_colors), // Use colors from the dataset\n size: 4, // Adjust size if needed\n opacity: 1\n },\n text: parsedData.map(d => `Slice: ${d.Y}`), // Include original Y in hover text\n hovertemplate: 'X: %{x}
Y : %{y}
Z: %{z}
%{text}', // Custom hover template\n name: 'Combined Dataset'\n }\n ], {\n margin: { l: 0, r: 0, b: 0, t: 0 },\n scene: {\n xaxis: { title: 'X Axis' },\n yaxis: { title: 'Y Axis' },\n zaxis: { title: 'Z Axis' },\n aspectratio: { x: 1, y: 3, z: 1 },\n camera: {\n eye: { x: 2, y: -1.5, z: 0.5 }\n }\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"function getCellTypeColor(parsedData, targetCellName) {\n const match = parsedData.find(d => d.cellname === targetCellName);\n return match ? match.celltype_colors : null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"function getCoordinates(parsedData, targetCellName) {\n const match = parsedData.find(d => d.cellname === targetCellName);\n return match ? { X: match.X, Y: match.Y, Z: match.Z } : null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"getCoordinates(parsedData, '100023173600007776283900355785793185282')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"parsedData = d3.csvParse(data).map(item => {\n // Create a new object with 'cellname' as the key\n let newItem = { ...item, cellname: item[\"\"] };\n \n // Delete the old key\n delete newItem[\"\"];\n \n return newItem;\n}).sort((a, b) => a.Y - b.Y);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"data = FileAttachment(\"Slices.csv\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"colorMap = new Map(parsedData.map(d => [d.cellname, d.celltype_colors]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"comparedColors = colorPairs.map(([color1, color2]) => \n color1 === color2 ? color1 : \"#000000\"\n);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"colorPairs = pairs.map(([key, value]) => [\n colorMap.get(key),\n colorMap.get(value)\n]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"parsedDataMap = new Map(parsedData.map(d => [d.cellname, { X: d.X, Y: d.Y, Z: d.Z}]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"coordinatesArray = pairs.map(([key, value]) => [\n parsedDataMap.get(key),\n parsedDataMap.get(value)\n]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"pairs = Array.from({ length: 32 }, (_, i) => \n Object.entries(alignments[i]).map(([key, value]) => [key, value])\n).flat();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"counts = Object.keys(alignments).reduce((acc, key) => {\n acc[key] = Object.keys(alignments[key]).length;\n return acc;\n}, {});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"function sumCountsInRange(counts, start, end) {\n if (start === end) {\n return 0; // Return 0 if start equals end\n }\n\n return Object.keys(counts)\n .filter(key => parseInt(key) >= start && parseInt(key) < end) // Exclude the upper boundary\n .reduce((sum, key) => sum + counts[key], 0);\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"function getRandomUniqueValues(list, n) {\n if (n > list.length) {\n throw new Error(\"Requested number of values exceeds the list size\");\n }\n\n return [...list].sort(() => Math.random() - 0.5).slice(0, n);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"alignments = FileAttachment(\"mouse33alignCells.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"filterByGene = (SelectedGene) => {\n let gene_expression = [];\n for (let slice_num = 0; slice_num <= 32; slice_num++) {\n // Find the index of the gene in the current slice\n let index = json_data[slice_num][\"gene_names\"].findIndex(element => element === SelectedGene);\n\n if (index !== -1) { // Check if the gene was found\n let cur_gene_expression = json_data[slice_num][\"matrix\"].map(row => row[index]);\n gene_expression = gene_expression.concat(cur_gene_expression);\n } else {\n console.log(`Gene ${SelectedGene} not found in slice ${slice_num}`);\n }\n }\n let result = parsedData.map((item, index) => ({\n ...item,\n geneValue: gene_expression[index]\n }));\n // console.log(\"filter by gene\",result)\n return result;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"json_data = fetch(\"http://localhost:8000/mouse33genes.json\")\n .then(response => response.json())\n .then(data => {\n return data;\n });\n//http-server /Users/hanliu/Desktop -p 8000 --cors","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"import {legend} from '@d3/color-legend'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"## Disclaimer\n\nThis code was created by Han Liu on 11/1/2024 and is provided as-is without any warranties, including fitness for a particular purpose. The author is not responsible for any errors, bugs, or unintended consequences arising from its use. Please test and adapt the code to your specific needs before deployment.\n\nBy using this code, you accept full responsibility for its implementation and outcomes.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"