Protein Localization Visualization

100%

Protein Localization Visualization

✓ Published0🌍 Public

Last edited Jun 18, 2021

Created on Jun 12, 2021

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.

AI-generated description

Protein Localization Visualization

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

83% match

Loading thumbnail…

Visualization Project - Gene Cell Locations

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.

MMinwoo Pak

82% 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

77% 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

76% 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

74% 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

74% 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

73% 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

71% match