geneInfoTable

100%

✓ Published0🌍 Public

Last edited Jun 23, 2021

Created on Nov 30, 2019

Forked from Visualization Project - Gene Cell Locations

This example presents a sortable data table of gene information, displaying columns such as gene name, DEG values, and subcellular location lists. The table is built with D3 v5 and React, using `d3.select` and `d3.ascending`/`d3.descending` for column sorting. Data is loaded from JSON and TSV files via `d3.json` and `d3.tsv`, with the table rendered as SVG and styled via CSS.

AI-generated description

A bare minimum HTML page.

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

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

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

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

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

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

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

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

71% match