Skip to main content
SimilarExport ZIP
100%

Visualization Project - Gene Cell Locations

✓ Published2🌍 Public
MMinwoo Pak
Last edited Jun 18, 2021
Created on Nov 29, 2019
Forked from HTML Starter

This interactive visualization maps gene expression changes onto a schematic animal cell, with subcellular compartments such as the nucleus, mitochondria, and plasma membrane colored by net differential expression (net_DEG) using sequential blue and red color scales. Users can zoom and pan the SVG scene, and clicking a compartment selects it for highlighting. The visualization is built with React and D3 v5, using `scaleSequential`, `interpolateBlues`, `interpolateReds`, and the `zoom` API, with data loaded from JSON and TSV files hosted on GitHub.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cell Diagram for Integration

This interactive visualization presents a stylized cell diagram where each subcellular location is colored according to differential gene expression data. Areas such as the extracellular space, plasma membrane, and cytosol are rendered as SVG paths, with integrated net_DEG values mapped to a blue-to-red color scale. Built with React and D3 v5, the example uses `scaleSequential` and `interpolateBlues`/`interpolateReds` to encode signed values, while custom `line` curves with `curveCardinal` define the organelle boundaries. The diagram supports zooming through D3’s `zoom` interaction, and the underlying gene-location data is loaded from JSON and a user-selected TSV file.

MMinwoo Pak
87% match
Loading thumbnail…

Table_Cell Integration Trial12_final

This interactive visualization maps gene expression levels across subcellular locations, displaying net differential expression as red and blue color intensities on a stylized cell diagram. Users can select locations like the plasma membrane or nucleus to filter a sortable gene information table showing DEG values and associated biological pathways. Built with React and D3 v5, the SVG rendering uses `scaleSequential` with `interpolateBlues` and `interpolateReds` for coloring, while `d3.line` with `curveCardinal` draws cellular compartments. Gene data loads from external JSON and TSV files, with hover effects and animated table transitions.

Yyoungchun-kwon
86% match
Loading thumbnail…

Table_Cell Integration Trial_SuperSuperSuperFinalFinalFinal

This interactive visualization maps gene expression data onto a diagram of a cell, showing the net differential expression (DEG) for each cellular location through blue and red sequential color scales. Users can click on a cell region to update a sortable HTML table of associated genes and a treemap of hierarchical gene categories. Built with React and D3 v5, it uses SVG paths, `scaleSequential` with `interpolateBlues` and `interpolateReds`, and `transition` for table updates. Data is loaded via `d3.json` and `d3.tsv` from a remote GitHub repository.

MMinwoo Pak
84% match
Loading thumbnail…

Protein Localization Visualization

This interactive visualization maps protein expression levels onto a stylized diagram of a cell, using color intensity to show the net differential expression (net_DEG) across subcellular locations. The diagram is rendered as SVG paths, and users can zoom and pan through the entire graphic. The code imports `d3.scaleSequential` with `interpolateBlues` and `interpolateReds` to encode negative and positive values, respectively, while also using `d3.line` and `curveCardinal` to draw the cell component boundaries. Data is loaded from a CSV file.

MMinwoo Pak
82% match
Loading thumbnail…

TEST - Cell_Table_Integration

This interactive visualization integrates a color-coded model of a cell with a filterable data table. It shows the locations of gene expression within cellular compartments, such as the plasma membrane and cytosol, by mapping the cumulative net differential expression (net_DEG) of user-selected genes to a red-blue color scale. Users can hover over the cell diagram to select specific locations, and the linked table displays gene information, including the number of associated level1 and level2 cellular locations. The application is built with React and uses d3 for SVG rendering, path generation, and data processing, sourcing its data from a provided JSON database and a text file containing the gene list.

PParkhwahwa
81% match
Loading thumbnail…

Table_Cell Integration Trial10

This interactive visualization integrates a treemap with a stylized cell diagram to explore gene expression data. It displays the net differential expression (net_DEG) for genes in different cellular locations, coloring the cell’s extracellular space, plasma membrane, and cytosol with red and blue sequential scales. The treemap shows hierarchical gene categories, while a filterable table lists gene details. Built with React and D3 v5, it uses SVG paths with curveCardinal, scaleSequential, and transitions to update the table and cell areas on selection.

Ssolanoon0113@gmail.com
81% match
Loading thumbnail…

Table_Cell Integration Trial4

This interactive visualization integrates a cell diagram with a treemap and gene info table to explore gene expression across subcellular locations. Users can hover over cell regions or click to highlight areas, while a sortable table displays gene names, DEG values, and functional level lengths. The cell areas are drawn as SVG paths using D3’s `line` generator with cardinal curve interpolation, colored by net differential expression via `scaleSequential` and `interpolateBlues`/`interpolateReds`. The treemap, built with `d3.treemap`, also reads external JSON data, and transitions animate table row updates on selection.

PParkhwahwa
79% match
Loading thumbnail…

Table_Cell Integration Trial12_EH

This interactive visualization maps gene expression data onto a stylized diagram of a cell, showing which subcellular locations (e.g., plasma membrane, cytosol) have up- or down-regulated genes. It integrates a treemap of gene ontology categories, a color-coded cell diagram drawn with `d3.line` and `curveCardinal`, and a filterable HTML table. The code uses `d3.scaleSequential` with `interpolateBlues` and `interpolateReds` to color cell regions based on net differential expression values, and transitions animate table row updates.

PParkhwahwa
79% match