React-based web application for the J. Craig Venter Institute

Web application to explore and analyze adolescent brain development data

JCVI DEAP application

Sample Video

This video is probably too long. The video is being displayed poorly. This has to do with the size (height/width) of the video vs what is being shown in html. The first video is scaled to width of 1080px and the second file has not been scaled but is being adjusted in html.

The project

We developed a web application for the J. Craig Venter Insitute to help scientists work with an enormous trove of data from two major studies of adolescent brain development -- the Adolescent Brain Cognitive Development (ABCD) study and the Healthy Brain and Child Development Study (HBCD). While the number of records (rows) in the data is not huge (~100k), the ABCD study, for example, has collected more than 80,000 variables. The data's size makes it difficult for users to work with. The platform currently allows users to view detailed summaries of all the variables and curate custom datasets. We are also working with the JCVI team to add extensive charting capabilities and the ability to run models directly from the platform.

Our role

We partnered with JCVI to develop the application from concept to delivery. We are responsible for building both the frontend of the tool as well as the backend that powers data retrieval and management of user resources such as tables, explorations, and analyses.

Features of the work

  • We wrote the application using React with Typescript
  • We employed Gatsby to dramatically improve speed
  • We used Netlify to improve the build and deploy process
  • We made the query API fast and flexible with GraphQL

Tools used

Highcharts

Highcharts

React

React

Gatsby

Gatsby

BigQuery

BigQuery

Typescript

Typescript

Made for

JCVI