Visualization tool for comparing cell type distributions in tissue blocks registered with HuBMAP and other public data portals. This project uses Angular 12 (generated with Angular CLI version 12.2.12) and Vega-Lite 4 for interactive visualizations.
Currently, cell type population can be visualized as counts or percentages in the form of bar graphs. Specific properties of the bar graph can be configured in bargraph.visualization.ts, which follows the JSON schema for Vega-Lite Specification v4.
By default, the tissue blocks are sorted by total cell count in descending order. The unique cell types occurring across all datasets are considered automatically to provide a dropdown for sort, allowing sort by count or proportion of a specific cell type. In some cases, datasets have vertical tissue block positions available which allows sorting of the blocks by their Y-position (generally enabled for blocks registered on the CCF-RUI). Sorting can be updated within the transform property of the specification, which generates a computed property for ordering the datasets.
Grouping depends on the annotations available on the source dataset, such as sex, age group, ethnicity etc. Grouping makes use of the facet operator in Vega-Lite to show adjoining views for each group, as pictured above. Sorting also applies to each facet/group, considering the mean of the sorted property while ordering each facet.
An existing color preset can be chosen to automatically populate the legend based on the unique cell types across all the datasets. The number of symbols per column can be configured among other source-specific options.
Certain datasets can be excluded from sorting so that they appear at a fixed position in all views. Currently, fixed bars can only be positioned towards the left. The number of fixed bars can be configured in the source options. If the datasets need to be displayed in the same group, they must use the same value for the grouped attribute. Then the facet for that group always remains fixed to the left.
ng serve
Development server will be hosted on http://localhost:4200/tissue-bar-graphs by default.
ng build
Build artifacts will be stored in the dist/tissue-bar-graphs directory.
npm run build:elements
Build artifacts for the web component will be stored in the dist/hra-tissue-blocks directory. This build uses Angular Elements with a custom Webpack build configuration.
The web component supports additional properties that can be passed to override the initial configuration for the bar graph.
| Option | Description | Default Value |
|---|---|---|
show-ui | Enables the configuration UI. | false |
config-source | Configuration JSON source. Each value must follow the Configuration interface in parameters.models.ts. The preview mode uses a different JSON source over the main application. | main.config.json |
dataset-source | Source for data sheets. View the root keys in main.config.json for supported values. | The first key occurring in config-source |
sort-by | Attribute/cell type on which datasets need to sorted. Depends on available cell types or sortable attributes for a collection. | Total Cell Count |
group-by | Attribute/cell type on which facets will be displayed. Depends on groupable attributes for a collection. | None |
y-axis-field | Field with quantitative data. Supported values are count and percentage. | count |
order-type | Set ordering as ascending or descending. | descending |
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HRA Tissue Blocks - Web Component Demo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="wc.js"></script>
</head>
<body>
<hra-tissue-blocks y-axis-field="percentage" group-by="sex" order-type="ascending"></hra-tissue-blocks>
</body>
</html>Cellar (CODEX) - https://cellar.cmu.hubmapconsortium.org/app/cellar/
Cellxgene - https://cellxgene.cziscience.com/
GTEx - https://gtexportal.org/home/datasets/
Gut Cell Atlas - https://www.gutcellatlas.org/
HuBMAP - https://portal.hubmapconsortium.org/