Cell Type Distribution Graphs

License

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.

Description

Bar Graph Preview

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.

Sorting

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

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.

Legend

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.

Fixed Bars

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.

Project Setup

Compile with Hot Reload

ng serve

Development server will be hosted on http://localhost:4200/tissue-bar-graphs by default.

Production Build

ng build

Build artifacts will be stored in the dist/tissue-bar-graphs directory.

Building web component

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.

Web component options

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`

Usage Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HRA Tissue Blocks - Web Component Demo</title>
  <base href="https://github.com/hubmapconsortium/tissue-bar-graphs/blob/main/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://github.com/hubmapconsortium/tissue-bar-graphs/raw/main/wc.js"></script>
</head>
<body>
  <hra-tissue-blocks y-axis-field="percentage" group-by="sex" order-type="ascending"></hra-tissue-blocks>
</body>
</html>