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.
Reporting Issues: If you find a bug or have a feature request, please open an issue on Eaglescope's GitHub Issues page. Be sure to provide a clear description of the problem, steps to reproduce, and any relevant screenshots.
Pull Requests: If you’d like to propose additions, changes, or improvements, please submit a pull request against the main branch. Make sure to provide a clear description of your changes and any relevant context. Screenshots for visual changes are appreicated (before and after), as well as any tests performed.
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, which are also run automatically using github actions, run npm run test which runs the tests in this folder.
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” |
| LAYOUT | If set, split visualizations with a matching "designation" will be put in a special row/column on top/left. | "left", or "top": default behavior is no split. |
| LAYOUT_SIZE | When LAYOUT is set, the size of the top/left section across that dimension. | css-like string; default is "300px" |
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 ( ) 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 |
| designation | When LAYOUT is set to split, set to "left" or "top" to put in the non-default area; don't set to leave in the main area. Do not mismatch left and top across LAYOUT and designation, or affected charts not render at all. | left |
| 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) |