Skip to main content
SimilarExport ZIP
100%

TEST - Cell_Table_Integration

✓ Published1🌍 Public
PParkhwahwa
Last edited Dec 8, 2019
Created on Dec 8, 2019

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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
90% 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
88% 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
88% 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
88% 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
87% match
Loading thumbnail…

Table_Cell Integration Trial2

This visualization integrates a gene table with a diagram of a cell. The cell diagram shows color-coded regions representing net gene expression changes based on data for a list of genes. It uses D3 v5 to draw the cell areas as SVG paths. Clicking a cell region filters the gene table, highlighting associated genes. The table is sortable and styled with CSS, while the data is loaded from an online JSON file.

PParkhwahwa
86% match
Loading thumbnail…

Table_Cell Integration Trial9

This visualization integrates a treemap with a schematic cell diagram, showing the distribution of differentially expressed genes across cellular locations. The treemap uses d3.hierarchy to display hierarchical gene-level data, while the cell diagram is drawn with SVG paths representing cellular compartments like the plasma membrane and cytosol. The cell regions are colored using d3.scaleSequential with interpolateBlues and interpolateReds based on net differential expression values. A filterable table lists gene details, with d3 transitions animating row updates. The data is loaded from remote JSON and TSV files, and interactions include zooming and clicking to highlight selected locations.

Ssolanoon0113@gmail.com
84% match
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
82% match