UKRI NICER
CE Data Observatory

Defra Fellowship Call

December 19th 2023

Project aims

1. Develop a data and modelling framework for the NICER programme and future UKRI CE research investments;

2. Develop a national CE-Observatory dashboard to:

   • visualise up-to-date, quality and comparable baseline data on flows and stocks of materials and products alongside linked dimensions e.g. value added, emissions; and
   • explore alternative future states with CE interventions applied

Site architecture

flowchart TD
  A[fa:fa-js Site code] --> B([fa:fa-github-alt Github </br> repository])
  C[Content design] --> D(["CMS </br> (Contentful)"]) 
  E[Data] --> F[("Database </br> (Supabase)")]
  B --> G{{Deploy}}
  D --> G{{Deploy}}
  F --> G{{Deploy}}
  G -.-> H(CE Data Observatory Site)
  click B "https://www.github.com" _blank
  click D "https://www.contentful.com/" _blank
  style A fill:#ccedcd,stroke:#333,stroke-width:2px
  style C fill:#edcecc,stroke:#333,stroke-width:2px
  style E fill:#cccded,stroke:#333,stroke-width:2px
  style H stroke:#333,stroke-width:4px

Site code

• Written in TypeScript
  • Frontend framework: Gatsby
    • Component library: Mantine
    • Charting libraries: Apache e-charts, Plotly, Sankey Plus

Content design & management

• Contentful: Used to link data tables to UI components and customise pages

Database

• Supabase: Used to store data

User interface

Find here a link to the observatory site (ce-observatory.com)

Core components

• Splash screen
• Navigation bar
• Data filters
• Visuals controls
• Scenario builder

• Indicator value boxes
• Sankey diagram
• Bubble chart
• Bar chart
• Metadata popout

Additional chart types

• Maps

• Line chart

Content management system

Contentful interface

Database

Supabase interface

Inputting to the site

1. Site documentation

2. Video overview

3. Data template - defines table schemas

4. Feature requests - CE-Hub continuing to build out site content and functionality