Single-Cell Expression Explorer

What you’re building

You just ran a 10x Genomics Chromium single-cell RNA-seq experiment. Cell Ranger counted the transcripts. Seurat or Scanpy reduced the dimensions, clustered the cells, and spit out a CSV of UMAP coordinates with cluster assignments. Now you need to actually look at the data — but the PI standing behind you does not have R installed, the postdoc across the hall uses Python, and the rotation student has neither.

You are going to build a tool that lets anyone open a single HTML file, load that CSV, and explore the results interactively. No R. No Python. No Jupyter. Just a browser.

By the end of this lesson you will have a single-cell expression explorer that renders thousands of cells as colored dots on a canvas, lets you toggle gene expression overlays, and shows cluster summary statistics. You will build it with a single prompt.

Who this is for

• PIs and staff scientists who want to explore single-cell results without opening R or Python.
• Core facility staff who need a quick way to share results with collaborators across departments.
• Grad students preparing figures for lab meeting or a paper and wanting to interactively explore cluster assignments before committing to a static plot.

write.csv(cbind(Embeddings(obj, "umap"), obj@meta.data[, c("seurat_clusters", "marker_genes")]), "coordinates.csv")

import pandas as pd
df = pd.concat([pd.DataFrame(adata.obsm["X_umap"], columns=["UMAP_1","UMAP_2"], index=adata.obs_names), adata.obs[["leiden"]]], axis=1)
df.to_csv("coordinates.csv")

The showcase

Here is what the finished explorer looks like once you open the HTML file in a browser:

• Header with a file upload zone for CSV files and a “Load Sample Data” button.
• Main canvas (800x600) rendering every cell as a colored dot, positioned by UMAP_1 and UMAP_2 coordinates.
• Cluster legend on the right side listing each cluster with its color, name, and cell count.
• Gene selector dropdown that lets you pick a gene column (CD3E, CD14, MS4A1, NKG7, FCGR3A) and re-color all points by expression level using a blue-to-red gradient.
• Sidebar panel with a Chart.js bar chart showing cells per cluster.
• Hover tooltip showing cell ID, cluster, and expression values when you mouse over a point.
• Cluster-vs-cluster comparison — select two clusters to see a bar chart of mean expression for each marker gene, highlighting which genes differentiate them.

The sample dataset contains 500 cells across 7 clusters representing common PBMC (peripheral blood mononuclear cell) types. Everything runs client-side. No data leaves the browser.

The prompt

Open your terminal Terminal The app where you type commands. Mac: Cmd+Space, type "Terminal". Windows: open WSL (Ubuntu) from the Start menu. Full lesson → , navigate to a project folder project folder A directory on your computer where the tool lives. Create one with "mkdir my-project && cd my-project". Full lesson → , start your AI CLI tool AI CLI tool Claude Code, Gemini CLI, or Codex CLI — a command-line AI that reads files, writes code, and runs commands. Full lesson → (e.g., by typing claude), and paste this prompt:

Build a single self-contained HTML file called single-cell-explorer.html that visualizes
pre-computed single-cell RNA-seq dimensionality reduction coordinates. Requirements:

1. DATA FORMAT
   - Accepts CSV files with columns: cell_id, UMAP_1, UMAP_2, cluster, and optional
     gene expression columns (any additional numeric columns are treated as genes)
   - Parse CSV on upload using vanilla JS (no Papa Parse)
   - Include a "Load Sample Data" button that populates with 500 embedded sample cells:
     7 clusters (0-6) with these approximate cell type compositions and marker profiles:
       Cluster 0: CD4 T cells (120 cells) — CD3E high (~2.5-4.0), others low (<0.5)
       Cluster 1: CD14 Monocytes (100 cells) — CD14 high (~3.0-5.0), FCGR3A moderate (~1.0-2.0)
       Cluster 2: B cells (80 cells) — MS4A1 high (~2.5-4.5), others low
       Cluster 3: CD8 T cells (70 cells) — CD3E high (~2.0-3.5), NKG7 moderate (~1.0-2.0)
       Cluster 4: NK cells (50 cells) — NKG7 high (~3.0-5.0), FCGR3A moderate (~1.0-2.5)
       Cluster 5: FCGR3A Monocytes (45 cells) — FCGR3A high (~3.0-4.5), CD14 moderate (~1.0-2.0)
       Cluster 6: Dendritic cells (35 cells) — all markers low-moderate (~0.5-1.5)
     Generate UMAP_1 and UMAP_2 as Gaussian clusters centered at well-separated points
     (spread ~1.0-1.5 per cluster) so clusters are visually distinct on the plot.
     Gene expression values should be log-normalized (non-negative floats, mostly 0-5 range).
     Gene columns: CD3E, CD14, MS4A1, NKG7, FCGR3A

2. MAIN SCATTER PLOT (HTML5 Canvas — NOT Chart.js, Canvas handles 5000+ points better)
   - Render each cell as a small circle (radius 3px) at its UMAP_1/UMAP_2 position
   - Auto-scale axes to fit all data points with 10% padding
   - Color by cluster assignment using 7 distinct colors from a colorblind-friendly palette
   - On hover, show a tooltip with cell_id, cluster, and all gene expression values
   - Axis labels: "UMAP 1" and "UMAP 2"

3. GENE EXPRESSION OVERLAY
   - A dropdown listing all gene columns detected in the CSV
   - When a gene is selected, re-color all points using a gradient: dark blue (low/zero)
     to bright red (high expression), scaled to the min-max of that gene
   - Show a color gradient legend bar below the dropdown
   - A "Reset to Clusters" button to go back to cluster coloring

4. CLUSTER SIDEBAR
   - Right-side panel with a Chart.js bar chart showing cell count per cluster
   - Below the bar chart, a summary table: cluster ID, cell count, percentage of total
   - Use Chart.js loaded from CDN (https://cdn.jsdelivr.net/npm/chart.js)

5. CLUSTER COMPARISON
   - Two dropdowns to select "Cluster A" and "Cluster B"
   - A grouped Chart.js bar chart showing mean expression of each gene in Cluster A
     vs Cluster B, with error bars (standard deviation)
   - Highlight bars where the difference in means exceeds 1.0 (potential marker genes)

6. DESIGN
   - Dark theme: background #0f172a, panels #1e293b, text #e2e8f0, accent #38bdf8
   - Clean sans-serif font (Inter from Google Fonts CDN)
   - Layout: canvas on the left (~65% width), sidebar on the right (~35% width)
   - Comparison section below the main canvas, full width
   - Drag-and-drop zone for CSV upload with visual feedback
   - Responsive: stack vertically on narrow screens

7. TECHNICAL
   - Pure HTML/CSS/JS in one file, no build step
   - Canvas for the scatter plot (performance with thousands of points)
   - Chart.js from CDN for bar charts only
   - Generate the 500-cell sample dataset in JavaScript with seeded random values
     so the sample data is identical every time

What you get

After the LLM finishes (typically 60-90 seconds), you will have a single file: single-cell-explorer.html. Open it in any browser.

Expected output structure

single-cell-explorer.html    (~800-1200 lines)

Click Load Sample Data and you should see:

1. A scatter plot with 500 colored dots forming 7 visually distinct clusters.
2. A cluster legend with colors matching the plot. Cluster 0 (CD4 T cells) should be the largest group.
3. The sidebar bar chart showing cell counts: Cluster 0 at 120, declining to Cluster 6 at 35.
4. Selecting “CD3E” from the gene dropdown should re-color the plot — Clusters 0 and 3 (T cells) turn red/warm while other clusters stay blue/cool.
5. The cluster comparison chart should show clear differences: comparing Cluster 0 vs Cluster 1 should reveal CD3E high in Cluster 0 and CD14 high in Cluster 1.

If something is off

How it works (the 2-minute explanation)

You do not need to understand every line of the generated code, but here is the mental model:

1. CSV parsing splits on newlines and commas, uses the first row as headers, and converts numeric columns to floats. Any column that is not cell_id or cluster and contains numeric values is treated as a gene expression column.
2. Canvas rendering maps UMAP_1 and UMAP_2 values to pixel coordinates by finding the data range and scaling to the canvas dimensions with padding. Each cell is drawn as a filled circle using arc().
3. Cluster coloring assigns each cluster ID a color from a palette. The same palette drives the legend and the sidebar chart.
4. Gene overlay replaces cluster colors with a gradient. For each cell, the expression value is normalized to 0-1 across the gene’s range, then mapped to an RGB interpolation from blue (low) to red (high). Cells with zero expression stay blue; highest-expressing cells turn red.
5. Chart.js bar charts handle the sidebar cell count and the cluster comparison. These are standard bar chart configurations — the same new Chart(canvas, config) pattern you have seen in earlier lessons.

Customize it

The base explorer handles the most common use case — loading coordinates and looking at clusters. Here are three extensions, each a single follow-up prompt:

Add cluster labels directly on the plot

Add text labels on the scatter plot showing the cluster name at the centroid (mean X, mean Y)
of each cluster. Use white text with a dark background pill/badge so the labels are readable
against the colored points. Make the labels toggleable with a checkbox.

Add a lasso selection tool

Add a lasso selection tool: when I hold Shift and drag on the canvas, draw a freeform
selection outline. After releasing, highlight the selected cells, show their count, and
display a bar chart of gene expression means for just the selected subset vs the rest of
the dataset. This lets me explore sub-populations within a cluster.

Export the current view as a publication figure

Add an "Export PNG" button that saves the current canvas view as a high-resolution PNG
(2x scale for retina). Include the axis labels, cluster legend, and a title bar in the
exported image. Also add an "Export SVG" option that recreates the scatter plot as an SVG
element (for vector editing in Illustrator) using the same colors and positions.

Try it yourself

1. Open your CLI tool in an empty folder.
2. Paste the main prompt from above.
3. Open the generated single-cell-explorer.html in your browser.
4. Click “Load Sample Data” and explore the clusters.
5. Try the gene expression overlay — select each marker gene and see which clusters light up.
6. If you have a real coordinate CSV from a Seurat or Scanpy analysis, drag it onto the upload zone.
7. Pick one customization from the list above and add it.

Key takeaways

• Canvas handles thousands of points where Chart.js and SVG would choke — this is the right tool for single-cell visualization in the browser.
• Pre-computed coordinates are the universal export format for single-cell analysis. Whether your lab uses Seurat, Scanpy, or any other tool, the output is a table of coordinates and clusters that this explorer can display.
• Gene expression overlays turn a static cluster plot into an exploratory tool — seeing which clusters express which markers is how you assign biological identity to computational clusters.
• A single HTML file eliminates the “I don’t have R/Python installed” problem that plagues every core facility. Email the file along with the CSV and anyone can explore the data.
• The hybrid Canvas + Chart.js approach gives you performance for the scatter plot and polish for the bar charts. Know when to use each.

What’s next

You have completed all 17 tools in the AI-Powered Bioinformatics Tools track. From sequence analysis dashboards to CRISPR guide design, from colony breeding planners to isotope QC dashboards, from forensic chain-of-custody tracking to eDNA contamination checking, and from RNA-seq pipelines to this single-cell explorer, you now have a portfolio of browser-based and CLI tools that cover the breadth of a modern core facility operation.

Here is what to do from here:

• Revisit and customize. Go back to the tools most relevant to your specific facility or research. The customization prompts in each lesson are starting points — the real value comes when you adapt these tools to your actual data and workflows.
• Share with your lab. Every single-file HTML tool you built can be emailed to a collaborator or dropped into a shared drive. Start with the one that solves the most immediate pain point for your group.
• Continue building skills. The shared modules cover deeper topics — planning and orchestration (Module 10), debugging strategies (Module 10, Lesson 4), and deployment (Module 11) — that will make your tool-building faster and more reliable. You can also return to the Biotech Track to revisit any lesson.
• Build something new. You have the pattern: describe the data format, specify the visualization, list the features, paste the prompt. The next tool you build will be one that does not exist in any lesson — because it solves a problem unique to your work.