Eaglescope
Eaglescope is a configurable code-free interactive visualization and cohort definition and analysis tool designed for biomedical data exploration. It is designed to be hosted flexibly without the need for a dedicated server, and creates an interactive dashboard based upon a configuration file and either an API or data file. It uses visualizations of sets of features to describe and enable contextual filtering of the data. This allows for users to understand deeper patterns or anomalies within the data, and to create datasets specifically tuned to their requirements effortlessly. Eaglescope is typically utilized either as a tool to create refined datasets tailored for training and validating machine learning AI models, or as a central hub for further exploration, allowing users to seamlessly navigate to biomedical viewers such as DICOM or whole slide imaging (WSI) platforms.
Development
Please see our code of conduct for the expectations for all open source community members.
Install dependencies by running npm install
Use develop mode by running npm run dev
Build ./dist for use with a static web server by running npm run build
To run code style checks, run npm run lint or to also try to automatically fix some issues, run npm run lint:fix.
To run unit and functional tests (also run automatically using github actions, run npm run test which runs the tests in this folder.
Setup and Configuration
The simplest way to set up eaglescope is to build (npm run build) then host the contents of ./dist/ using a static web server such as rapache or python -m http.server. Additionally, configuration and data resources are already on the web with appropriate cross origin headers, you can simply navigate to https://sharmalab.github.io/eaglescope/?configurl=(configuration json file).
Each Eaglescope dashboard needs a configuration url which contains global information for the dashboard, information about the data resource and how to read it, and configuration for each visualization.
| CONFIGURATION FIELD | DESCRIPTION | EXAMPLE VALUE |
| HOME_URL | What url the “home” button directs to. | "https://github.com/sharmalab/eaglescope/" |
| TITLE | The title in the header and browser tab for this dashboard. | "Eaglescope Demo | Wines" |
| UNIT_OF_GRID_VIEW | The unit size in pixels for the x and y values for visualization size. | [200,200] |
| MARGIN_OF_GRID_VIEW | The unit size in pixels for margins around visualizations. | [10,10] |
| HAS_SETTINGS | Whether to render the settings button to modify the dashboard temporarily. | Any “truthy” value is true, otherwise do not include this field. |
| RESIZABLE | Whether to allow users to resize visualizations. | Any “truthy” value is true, otherwise do not include this field. |
| DRAGGABLE | Whether to allow users to reorder and reposition visualizations. | Any “truthy” value is true, otherwise do not include this field. |
| DATA_RESOURCE_URL | The url or path for the API or file for this dashboard’s data. | “http://localhost:1234/config/wines.csv” |
| DATA_FORMAT | Which parsing method to use; can be ‘json’ or ‘csv’. | “csv” or “json” |
Additionally, the field “VISUALIZATION_VIEW_CONFIGURATION” contains a list of visualization config, where each element in the list represents one visualization. Most visualizations support the following fields:
| CONFIGURATION FIELD | DESCRIPTION | EXAMPLE VALUE |
| id | Unique reference to each visualization | “chart_4” |
| title | Rendered title | "Volatile and Citric Acidity" |
| description | Comments for the chart | “Compare these fields” |
| chartType | Which visualization to render. | Must be an implemented chart type. See this link (https://github.com/sharmalab/eaglescope/blob/90d6dd1f6c9d0af3d27d740c1eb9e5011608ac1d/source/components/VisualTools/VisTypeComponents.js#L10) for a list of chart types. |
| fields | Maps fields from their name in the data resource to the fields the chart uses, usually \ “x”, “y” | { "x": "volatile acidity", "y": "citric acid" } |
| size | The size of the visualization in units of UNIT_OF_GRID_VIEW from the dashboard configuration. | [2, 1] |
| priority | When rendering, how to order. Higher priority floats up. | 42 |
Visualization Types
| Chart Type | Use for | Photo | Fields |
|---|---|---|---|
| PIE_CHART | Proportions for distinct values of x. |  |
x |
| BAR_CHART | Total count of distinct values of x. |  |
x |
| HISTOGRAM | Binned continuous values of x, with binsCount bins. |  |
x |
| SCATTER_CHART | The relationship between two generally continuous variables. |  |
x and y for the spatial axes values |
| PARALLEL_COORDINATES | Data points as lines going through a set of variables. |  |
y: an array of each field to render in order. |
| KM_CURVE | Shows heatmap-like density in a 2D space of x, y. | Event, time, and group as objects including field and title. Also, eventValue, and censoredValue. | |
| DENSITY_2D | Shows observation density in a 2D space of x, y. |  |
x and y for the spatial axes values |
| HEATMAP | Uses color to show mean value of z for discrete-grouped observations by x and y. |  |
x and y for spatial arrangement of values, z for colors |
| HORIZONTAL_BAR_CHART | A horizontal bar chart. | x and y for the spatial axes values | |
| VIS_DATA_TABLE | A tabular representation of data for columns supplied. |  |
(list of objects representing fields to show in table) |