📊 Visual Assets Index¶

A catalog of diagrams, screenshots, and visual documentation for the Citation Compass project

📋 Table of Contents¶

🏠 Application Screenshots¶

Main Dashboard & Home Interface¶

• Home Dashboard - Complete overview of the platform with feature cards, status indicators, and the "Going Deeper with Convolutions" demo example
• ML Predictions Interface - Initial ML predictions page showing paper input options and model information
• ML Predictions with Interface - ML predictions page with loaded paper details and prediction controls

Core Features¶

• Enhanced Visualizations Interface - Network visualization controls, parameters, and tips for citation network analysis
• Embedding Explorer - Paper embedding exploration interface with individual embeddings, comparison, and visualization tabs
• Analysis Pipeline - Advanced analytics pipeline with configuration options, performance metrics, and research insights

🎯 Demo Assets from Home Page¶

Featured Example: "Going Deeper with Convolutions"¶

The home page contains several embedded visualizations for the featured paper example: - Citation Prediction Bar Chart - Shows top predicted citing papers with confidence scores - Network Position Diagram - Interactive network showing paper relationships and citation flows - Impact Timeline Chart - Citation growth over time from 2016-2024 - Interactive Citation Network - Embedded iframe showing paper connections

📊 Visualization Types Available¶

Network Visualizations¶

• Citation Networks - Interactive graphs showing paper-to-paper citation relationships
• Prediction Overlays - ML prediction confidence shown as edge thickness and colors
• Network Position Analysis - Papers positioned by centrality and influence

ML Model Visualizations¶

• Embedding Spaces - 2D/3D representations of paper embeddings using PCA/t-SNE
• Confidence Heatmaps - Prediction confidence matrices between paper pairs
• Performance Metrics - Model evaluation charts and statistical summaries

Analysis Results¶

• Temporal Charts - Citation growth and impact over time
• Distribution Plots - Confidence score distributions and statistical analysis
• Comparison Charts - Side-by-side paper similarity and difference analysis

🔗 Related Documentation¶

Architecture & Technical¶

• System Architecture Diagram - Complete 5-layer architecture overview with professional styling, component relationships, and data flow visualization
• Data Flow Pipeline - Linear 6-stage pipeline with improved title positioning and enhanced arrow visibility
• Data Flow Radial - Alternative circular visualization with central citation network core and radiating processing stages
• Database Schema - Neo4j graph database design with 6 node types, relationships, constraints, and indexing strategy
• User Journey Flow - UX workflow diagram showing how different user personas interact across multiple interfaces
• ML model architecture diagrams (to be created)

Process Flow¶

• Data Flow Pipeline - Linear processing stages from external sources to user interfaces
• Data Flow Radial - Circular flow showing cyclical data processing with central network core
• User Journey Flow - Multi-persona workflows across Streamlit web app, CLI tools, and Jupyter notebooks
• ML prediction workflow charts (to be created)

📁 Asset Organization¶

docs/assets/
├── diagrams/             # Architecture and process diagrams
│   ├── system-architecture.png
│   ├── data-flow-pipeline.png
│   ├── data-flow-radial.png
│   ├── database-schema.png
│   └── user-journey-flow.png
├── screenshots/          # Application interface screenshots
│   ├── 01-home-dashboard.png
│   ├── 02-ml-predictions-interface.png
│   ├── 03-ml-predictions-with-interface.png
│   ├── 04-enhanced-visualizations-interface.png
│   ├── 05-embedding-explorer.png
│   └── 06-analysis-pipeline.png
├── charts/               # Standalone analysis charts (TBD)
└── presentations/        # Presentation materials (TBD)

💡 Usage Guidelines¶

For README Integration¶

• Use system-architecture.png to summarize system components
• Use user-journey-flow.png to show interfaces and user paths
• Use database-schema.png for graph database context
• Use data-flow-pipeline.png or data-flow-radial.png to show processing flow
• Use 01-home-dashboard.png as the primary overview screenshot
• Include 06-analysis-pipeline.png for advanced features
• Include 04-enhanced-visualizations-interface.png for network analysis

For Documentation¶

• Link to specific screenshots when explaining features
• Use the embedded visualizations from the home page as examples
• Reference the analysis pipeline outputs for performance metrics

For Presentations¶

• System architecture diagram: technical overview and relationships
• User journey flow: UX and multi-interface coordination
• Database schema: graph database modeling context (Neo4j)
• Data flow pipeline: linear processing view
• Data flow radial: alternative circular view
• Home dashboard: overview of features
• Analysis pipeline: analytics and ML capabilities
• Network visualizations: example outputs on real data

Use Cases for Visuals¶

Suggested ways to use these assets: - System overview: Architecture and data flow diagrams - Feature walkthroughs: Screenshots for user-facing pages - Technical documentation: Database schema and model visuals - Reports: Export selected charts and figures as needed

Last Updated: September 15, 2025 Total Assets: 5 architecture diagrams + 6 screenshots + embedded visualizations Status: ✅ Core screenshots complete, ✅ System architecture complete, ✅ Data flow diagrams complete (2 variants), ✅ Database schema complete, ✅ User journey flow complete