CE Observatory Dashboard Presentation

National Interdisciplinary Circular Economy Research (NICER) Programme

UKRI National Circular Economy Hub (CE-Hub)

Presentation to cover

Presentation to cover

  1. Observatory project aims

  2. Dashboard frontend incl. components and software dependencies

  3. (Meta)data pipeline and software dependencies

  4. In-app scenario builder

  5. Next steps

Project aims

  1. Bring together a systemic data and modelling approach for the NICER programme and future UKRI CE research investments
  1. Develop a national CE-Observatory dashboard to visualise detailed baseline data and explore alternative future CE states across a range of resource-product-industry categories

Building off outputs including

  1. Review and metadata catalogue of public data assets
  2. Programmatic scripts for: extracting; cleaning and matching data
  3. Data collated for select products and cases
  4. Vensim business dynamics model
  5. Prototype dashboards developed in R Shiny and Python Dash

Dashboard interface

  • Best viewed on computer screen at ~75% zoom

  • Programming language(s): JavaScript/TypeScript (scripts hosted on Github)

  • Frontend framework: Gatsby (built on React.js library)

    • Fetches data from bit.io and component specification from contentful on builds

  • Component library: Mantine

  • Content management system (CMS): Contentful (to manage reusable components)

Dashboard components

Scrollable page consisting of core charts, controls and ‘shelves’ made up of tiles containing more information for deeper dives and understanding barriers/enablers

Core chart components

  • Sidebar navigation
  • Sankey diagram - D3 Sankey Plus
  • Area chart - inflow, stock and outflow over time (Apache e-charts)
  • Bubble chart - ‘CE score’, lifespan and mass/value (Apache e-charts)
  • KPI value boxes
  • Scenario builder - customisable ‘what ifs’ & pre-programmed scenarios
  • Metadata popout - Data quality, methodological process, indicator definition

Material & product controls

Moving the icon-based filtering of materials/components/products into a separate control shelf

More info shelf

More detailed data for relevant inputs presented in tiles. For example and for electronics:

  • Compositional data

  • Waste treatment data (in % terms)

  • Flytipping incidents and waste summary

  • Extra business-level data e.g. employment

Barriers/enablers shelf

Charts tracking dynamics identified as relevant to outcomes/impacts of interest e.g.

  • Product design: iFixit and Open repair
  • Business models and price differentials
  • Policy layer

(Meta)data pipeline

  • Programming language(s): R, Python, PostgreSQL and Javascript

Data input and retrieval

‘Contribute’ pipeline

File (e.g. CSV) uploads of structured data following specified format and schema:

  1. Pre-written PostGreSQL chunks e.g. to append
  2. Centred around ease of use
  3. Metadata covering provenance, methods used

Extract pipeline

Using public data from official and emerging sources:

  1. Signature resource-product combinations selected. Assigned to a top-level navigation tab
  2. Raw data extracted via API, web-scraping, download requests and manual retrieval. RAPs (to extent possible) hosted on GitHub to support version control & Open by default

Data transformation

  • Data validated and cleaned (e.g. outlier replacement) and unknown values estimated (interpolation)
  • Prioritised using decision rules or other methods
  • Reformatted and restructured to populate required end-points (e.g. derived aggregations)

Data storage and loading

  • Shared data stored on bit.io (data warehouse)
  • Contentful for defining page components
  • Database >> Dashboard: API calls from UI to bit.io (PostgreSQL query API solution with cloud database storage) at time of build

Data visualisation

Scenario builder

  • Curated pre-programmed scenarios including baseline e.g. different levels of policy ambition

  • Customised ‘what ifs’

  • Options for integrating systems dynamic model:

Next steps

  • Task list incl.
    • Greater user control over components and contents
    • Spatial representation, production & consumption
    • Agree indicator defintions
    • Against-baseline functionality
    • Data version control
    • Web Content Accessibility Guidelines 2.1
  • Case expansion
  • Documentation
  • Private beta – testing with invited super-users (ongoing, internal to programme)
  • Public beta – testing with prospective end-users

Observatory Dashboard