Youth Data Explorer

Interactive data visualization for GLOCAL Foundation

An interactive data visualization platform built for GLOCAL Foundation of Canada, enabling exploration of youth development survey data through responsive charts and custom design.

Overview

The Youth Data Explorer transforms complex survey data into accessible, interactive visualizations. The platform allows users to explore trends, compare demographics, and understand patterns in youth development indicators across different regions.

Tech Stack

Frontend

  • React - UI framework
  • Plotly - Interactive charting library
  • Bootstrap - Responsive layout
  • Custom CSS - Design system

Data Pipeline

  • R - Data processing and transformation
  • CSV/JSON - Data formats

Deployment

  • GitHub Pages - Static site hosting

Key Features

Interactive Visualizations

  • Dynamic Plotly charts with filtering
  • Responsive design for mobile and desktop
  • Multiple chart types (bar, line, scatter)

Custom Design System

  • Cohesive color palette and typography
  • Consistent spacing and layout
  • Professional, accessible interface

Pure React Architecture

  • Navbar implemented in pure React (no Bootstrap JS dependencies)
  • Component-based structure
  • Clean separation of concerns

Challenges Solved

  • Migrated from Bootstrap JavaScript to pure React components
  • Fixed chart rendering issues on mobile devices
  • Designed custom CSS system for brand consistency
  • Optimized performance for large datasets

Impact

Deployed platform serves GLOCAL Foundation’s mission of supporting youth development by making data insights accessible to stakeholders, researchers, and community members.

What I Learned

  • Building production data visualization applications
  • React component architecture and state management
  • Working with Plotly for interactive charts
  • Responsive design principles
  • Client collaboration and iterative development
<!--
  See https://www.debugbear.com/blog/responsive-images#w-descriptors-and-the-sizes-attribute and
  https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images for info on defining 'sizes' for responsive images
-->

  
    <source
      class="responsive-img-srcset"
      
        srcset="/assets/img/youth-explorer-dashboard-480.webp 480w,/assets/img/youth-explorer-dashboard-800.webp 800w,/assets/img/youth-explorer-dashboard-1400.webp 1400w,"
        type="image/webp"
      
      
        sizes="95vw"
      
    >
  

<img
  src="/assets/img/youth-explorer-dashboard.png"
  
    class="img-fluid rounded z-depth-1"
  
  
    width="100%"
  
  
    height="auto"
  
  
  
  
    title="Dashboard view"
  
  
  
    loading="lazy"
  
  onerror="this.onerror=null; $('.responsive-img-srcset').remove();"
>

</picture>

</figure>

</div>

</div>

Youth Data Explorer interactive dashboard

–>