14 KiB

Raw Permalink Blame History

Globe Visualization 6: Global University Rankings & Research Output

Interactive Filtering & Data-Driven Exploration - Iteration 6

This is the sixth iteration in a progressive web-enhanced learning series demonstrating advanced Mapbox GL JS techniques with globe projection. This iteration focuses on interactive filtering and UI controls for exploring global research data.

🌍 Theme: Global University Rankings & Research Output

This visualization showcases the world's top 120 research universities with comprehensive metrics:

Rankings: Global positioning from #1 to #120
Research Score: Composite measure of research excellence (55-99)
Publications: Annual research output (5,500-19,800 papers)
Citations: Total academic citations (122K-456K)
Research Funding: Annual funding in millions ($400M-$4,200M)
Nobel Prizes: Total laureates affiliated with institution (0-161)

📚 Learning Progression

Previous Iterations:

Iteration 1: Population circles - Basic globe setup
Iteration 2: Temperature heatmap - Color gradients
Iteration 3: Economic data - Advanced expressions
Iteration 4: Digital infrastructure - Multi-layer composition
Iteration 5: (Educational theme foundation)
Iteration 6 (this): Interactive filtering & UI controls

🔬 Web-Enhanced Learning

Research Source: Mapbox GL JS Filter Markers Example URL: https://docs.mapbox.com/mapbox-gl-js/example/filter-markers/

Key Filtering Techniques Learned and Applied:

1. Layer-Based Filtering with setFilter()

From the web source, I learned to use map.setFilter() to dynamically control which features are rendered:

// Apply complex filter expression to layer
map.setFilter('universities-layer', filterExpression);

This is the core filtering mechanism that updates the visualization in real-time based on user selections.

2. Filter Expression Patterns

The web source demonstrated several filter expression types that I implemented:

Equality Filtering (==):

['==', 'icon', symbol]  // From web source
['==', 'region', selectedRegion]  // My application

Range Filtering (<=, >=):

// My implementation for ranking and metric thresholds
['<=', ['get', 'ranking'], maxRanking]
['>=', ['get', 'publications'], minPublications]

Compound Filtering (all, in):

// Combining multiple conditions
filterExpression = ['all',
    ['in', ['get', 'region'], ['literal', selectedRegions]],
    ['<=', ['get', 'ranking'], 120],
    ['>=', ['get', 'publications'], minPubs]
];

3. UI Control Implementation

The web source showed checkbox-based layer visibility toggling. I expanded this to include:

Checkbox Filters (from web source pattern):

checkbox.addEventListener('change', () => {
    // Update filter state
    applyFilters();
});

Range Sliders (my enhancement):

slider.addEventListener('input', (e) => {
    currentFilters.minValue = parseInt(e.target.value);
    applyFilters();
});

4. Dynamic Layer Updates

Learned from web source that filters can be changed without reloading data:

// Efficient re-filtering without data reload
map.setFilter('layer-id', newFilterExpression);

This enables smooth, real-time filtering as users adjust controls.

5. Query Rendered Features for Statistics

Extended the pattern to calculate statistics on filtered data:

const features = map.queryRenderedFeatures({
    layers: ['universities-layer']
});
// Calculate aggregate statistics from visible features

🎯 Advanced Filtering Features

Multi-Criteria Filtering System

Region Filters (Checkbox-based):

North America (27 universities)
Europe (25 universities)
Asia-Pacific (42 universities)
Middle East (9 universities)
Africa (6 universities)
Latin America (11 universities)
All (default - 120 universities)

Ranking Range (Slider):

Filter by top N universities (10, 20, 30...120)
Dynamic adjustment from elite tier to broader selection

Publications Threshold (Slider):

Filter by minimum annual research output
Range: 0 to 20,000 publications
Step: 1,000 publications

Citations Threshold (Slider):

Filter by minimum total citations
Range: 0 to 500,000 citations
Step: 25,000 citations

Research Funding (Slider):

Filter by minimum annual funding
Range: $0M to $4,500M
Step: $100M

Nobel Prizes (Slider):

Filter by minimum Nobel laureates
Range: 0 to 161 prizes
Step: 5 prizes

Interactive Controls

Reset Filters: One-click restoration of all filters to default state

Pause/Resume Rotation: Toggle auto-rotation for detailed examination

🎨 Visual Design

Color-Coded Research Excellence

Universities are colored by Research Score using an 8-stop gradient:

95-99 (Royal Blue #0066ff): Exceptional - MIT, Harvard, Oxford, Cambridge
90-94 (Deep Sky Blue #00bfff): Outstanding - Top 20 institutions
85-89 (Lime Green #32cd32): Excellent - Top 30-40
80-84 (Gold #ffd700): Very Good - Top 50
75-79 (Orange #ffa500): Good - Top 60-70
70-74 (Tomato #ff6347): Above Average - Top 80
65-69 (Crimson #dc143c): Average - Top 100
55-64 (Deep Red #8b0000): Emerging - Top 120

Size-Coded Rankings

Circle radius inversely proportional to ranking (better rank = larger):

Rank 1-10: 14-18px radius (Largest - most prominent)
Rank 11-25: 11-14px radius
Rank 26-50: 9-11px radius
Rank 51-75: 7-9px radius
Rank 76-100: 5-7px radius
Rank 101-120: 4-5px radius (Smallest)

Dynamic Labels

Top 30 universities display text labels with:

Name overlay on hover
Size scaled by ranking (9-13px)
White text with black halo for readability
Smart placement to avoid overlap

📊 Comprehensive Data Model

University Properties

Each of the 120 universities includes:

{
    name: "University Name",
    country: "Country",
    region: "Region",
    ranking: 1-120,              // Global position
    publications: 5500-19800,    // Annual research papers
    citations: 122000-456000,    // Total citations
    funding: 400-4200,           // Annual funding ($M)
    nobelPrizes: 0-161,          // Total Nobel laureates
    researchScore: 55-99         // Composite excellence score
}

Regional Distribution

Asia-Pacific: 42 universities (35%)
North America: 27 universities (22.5%)
Europe: 25 universities (21%)
Latin America: 11 universities (9%)
Middle East: 9 universities (7.5%)
Africa: 6 universities (5%)

Top 10 Universities Highlighted

MIT (USA) - Research Score: 98
Stanford (USA) - Research Score: 97
Harvard (USA) - Research Score: 99 | Nobel Prizes: 161
UC Berkeley (USA) - Research Score: 96 | Nobel Prizes: 110
Cambridge (UK) - Research Score: 97 | Nobel Prizes: 121
Oxford (UK) - Research Score: 98 | Nobel Prizes: 72
Imperial College (UK) - Research Score: 94
UCLA (USA) - Research Score: 93
Columbia (USA) - Research Score: 94 | Nobel Prizes: 101
UCL (UK) - Research Score: 93

🔧 Technical Implementation

Filter Expression Architecture

The filtering system uses Mapbox's expression syntax with compound conditions:

let filterExpression = ['all'];  // AND operator for multiple conditions

// Region filter (OR within selected regions)
if (selectedRegions.length > 0) {
    filterExpression.push([
        'in',
        ['get', 'region'],
        ['literal', selectedRegions]
    ]);
}

// Ranking filter (less than or equal to max)
filterExpression.push(['<=', ['get', 'ranking'], maxRank]);

// Publication threshold (greater than or equal to min)
filterExpression.push(['>=', ['get', 'publications'], minPubs]);

// Apply to layer
map.setFilter('universities-layer', filterExpression);

Real-Time Statistics Calculation

After each filter update, statistics are recalculated from visible features:

function updateStatistics() {
    const features = map.queryRenderedFeatures({
        layers: ['universities-layer']
    });

    const count = features.length;
    const avgResearch = features.reduce((sum, f) =>
        sum + f.properties.researchScore, 0) / count;
    const totalPubs = features.reduce((sum, f) =>
        sum + f.properties.publications, 0);
    const totalCitations = features.reduce((sum, f) =>
        sum + f.properties.citations, 0);
    const totalNobel = features.reduce((sum, f) =>
        sum + f.properties.nobelPrizes, 0);

    // Update UI displays
}

Hover over any university to see detailed metrics:

University name and location
Global ranking and research score
Publications and citations
Research funding
Nobel Prize count

🎓 Key Improvements Over Previous Iterations

From Web Research:

Dynamic filtering using setFilter() method
Compound filter expressions with all, in, >=, <= operators
Checkbox-based UI controls for categorical filtering
Real-time layer updates without data reloading
Feature querying for statistics calculation

My Enhancements:

Multi-dimensional filtering (6 independent criteria)
Range sliders for continuous metrics
Coordinated filter state management
Live statistics dashboard updating with filters
Mutual exclusivity for "All" vs specific region selection
Reset functionality for user convenience
Comprehensive research dataset (120 universities, 6 metrics each)

Progressive Learning Synthesis:

Iteration 1-3 foundations: Circle styling, color gradients, expressions
Iteration 4 multi-layer: Layer composition techniques
Iteration 6 innovation: Interactive filtering and exploration UI

🚀 Usage

Open index.html in a modern web browser
Explore the globe - drag, zoom, rotate to navigate
Filter by Region - Select one or more geographic regions
Adjust Ranking - Use slider to focus on top N universities
Filter by Metrics - Set minimum thresholds for publications, citations, funding, Nobel prizes
View Statistics - Live dashboard shows aggregate metrics for filtered selection
Hover Universities - Detailed popup with all metrics
Reset - Clear all filters with one click
Control Rotation - Pause/resume auto-rotation as needed

📁 Project Structure

mapbox_globe_6/
├── index.html              # Main visualization with UI controls
├── src/
│   ├── index.js           # Filtering logic and interactivity
│   └── data/
│       └── data.js        # 120 universities with 6 metrics each
├── README.md              # This documentation
└── CLAUDE.md             # Development context

🎯 Web Research Integration Quality

Source Attribution

Technique: Filter markers/features by property values
Original Example: Checkbox toggles for icon-based filtering
Adaptation: Extended to multi-criteria, multi-type filtering system
Novel Synthesis: Combined checkbox, slider, and compound expression patterns

Progressive Learning Demonstrated

Previous: Static visualizations, pre-filtered data
This Iteration: Dynamic, user-controlled exploration
Improvement: Interactive filtering enables data-driven discovery
Innovation: 6-dimensional filtering space for research data

Mapbox Best Practices Applied

✅ Efficient filter expressions (no data reloading) ✅ Feature querying for dynamic statistics ✅ Proper use of all, in, >=, <= operators ✅ UI responsiveness with live updates ✅ Layer-based filtering with setFilter() ✅ Clean separation of data, logic, and presentation

🔍 Use Cases

Research Policy Makers: Identify universities meeting specific funding and output criteria

Prospective Students: Explore institutions by region and research strength

Academic Collaborators: Find universities with strong citation impact

Funding Agencies: Analyze research output patterns by geographic distribution

University Administrators: Benchmark against peer institutions across multiple metrics

📈 Statistics Dashboard

Real-time metrics update with every filter adjustment:

Universities: Count of currently visible institutions
Avg Research Score: Mean excellence score of filtered set
Total Publications: Sum of annual research output
Total Citations: Aggregate citation impact
Total Nobel Prizes: Sum of laureates across filtered universities

🌟 Key Takeaways

Technical Mastery:

Complex filter expression composition
Multi-criteria filtering architecture
Real-time feature querying and aggregation
Coordinated UI state management
Dynamic statistics calculation

Visual Excellence:

8-stop color gradient for research scores
Inverse size scaling for rankings
Professional dark theme with glassmorphism
Responsive layout for mobile and desktop
Clear legends and intuitive controls

Educational Value:

Demonstrates practical filtering patterns from Mapbox docs
Shows extension from simple to complex filtering
Illustrates data-driven exploration workflows
Provides reusable filtering architecture

Progressive Learning:

Wave 1 (Iter 1-5): Foundation building
Wave 2 (Iter 6-12): Enhancement & styling ← We are here
Next: More sophisticated interactions, animations, advanced UI patterns

This iteration demonstrates mastery of interactive filtering techniques from Mapbox documentation, applied to a rich educational research dataset with multi-dimensional exploration capabilities.

🔗 Web Source Reference

Mapbox GL JS Filter Markers Example https://docs.mapbox.com/mapbox-gl-js/example/filter-markers/

Key Concepts Learned:

Filter expressions syntax
Dynamic layer filtering with setFilter()
Checkbox-based UI controls
Real-time visibility updates
Feature property access with ['get', 'property']

Applied & Extended:

Multiple filter types (checkbox, slider)
Compound expressions with all operator
Range-based filtering (>=, <=)
Multi-value filtering with in operator
Statistics calculation on filtered data
Coordinated filter state management

14 KiB Raw Permalink Blame History