Middlemarch Character Relationship Visualizer (Built-in Chronological Slider + Interactive Graphs)

Overview

This project is an interactive web-based tool that visualizes character relationships throughout George Eliot's Middlemarch. It uses chapter-level co-occurrence data to construct dynamic character networks that users can explore through an intuitive chronological slider that moves based on chapters in the book. The visualizer enables users to watch the network evolve as the novel progresses, and helps reveal how relationships strengthen, weaken, or shift over time. It is designed to complement research on computational literary analysis and digital humanities approaches to Victorian literature. The application is built with React + Vite and renders interactive networks. It is optimized for clarity, responsiveness, and easy extension for future analytical features.

Features

Core Functionality

• Interactive character network visualization for Middlemarch
• Chronological slider allowing users to traverse chapters and view changes in relationships over time.
• Dynamic updates to:
  • Node visibility (characters entering/exiting the narrative)
  • Edge weights (relationship strength)
  • Node size (degree, strength, or custom metrics)
  • Coloring based on character communities or families

Data & Processing

• Uses pre-processed co-occurrence files stored in src/data/.
• Each chapter or segment corresponds to a separate JSON data snapshot.
• Character IDs are unified using a predefined alias list.
• Relationship weights represent interaction intensity based on co-occurrence metrics.

Visualization Features

• Zooming, panning, and drag-based node repositioning.
• Optional toggles for:
  • Community Coloring
  • Node labels on hover
  • Edge weight visibility
  • Focusing on a character when clicked
• Smooth animated transitions when moving between chapters.

Frontend Features

• Built with React (Vite) for fast load times and modular code.
• Reusable visualization component (CharacterNetwork.jsx)
• Responsive layout suitable for desktop and tablet viewing.
• Easily deployable via GitHub pages, Netlify, or Vercel.

Project Structure

 CODE/
 │
 ├── frontend/                         # Main frontend application
 │   ├── src/
 │   │    ├── assets/                  # Images, icons, UI assets
 │   │    ├── data/                    # Preprocessed network data (JSON)
 │   │    ├── App.jsx                  # Root application component
 │   │    ├── CharacterNetwork.jsx     # Core visualization component
 │   │    ├── main.jsx                 # Entry point for React + Vite
 │   │  
 │   ├── index.html                    # Base HTML wrapper
 │   ├── package.json                  # Project metadata & dependencies
 │   ├── package-lock.json             # Dependency lock file
 │   ├── vite.config.js                # Vite build configuration
 │   ├── eslint.config.js              # Linting configuration
 │   └── README.md                     # This file
 └── .gitignore               # Specifies intentionally untracked files

Input Data

The application expects clean network snapshots stored in: frontend/src/data.

Required Files

• Network snapshots by chapter Example naming convention: chapter_001.json, chapter_002.json, ... chapter_086.json
• Each file should contain:

{ 
  "nodes": [
    { "id": "Dorothea Brooke", "group": "Brooke", "strength": 14}
  ],
  "edges": [
    { "source": "Dorothea Brooke", "target": "Celia", "weight": 3 }
  ]
}

• Optional:
  • Character alias map
  • Metadata for chapters or narrative segments
• Side note: This data was pulled directly from existing raw data available from the George Eliot Archives. It has been checked for consistency and accuracy.

Installation

1. Prerequisites

• Node.js 18+
• npm

2. Setup
   • Clone the repository:

     git clone <repository-url>
     cd Character_Networks/frontend
     

   • Install dependencies npm install
   • Start the development server npm run dev
   • Visit the local development URL printed by Vite (e.g., http://localhost:5173/).

Usage

Exploring the Visualizer

1. Open the application in your browser.
2. Use the chronological slider at the top of the screen to:
   • Move forward/backward through the novel
   • Observe how edges strengthen or fade
   • Watch new characters appear as they enter the story
3. Hover or click on nodes to view
   • Character names
   • Degrees/connection strength
   • Community membership

Modifying Parameters

You can customize visual settings inside CharacterNetwork.jsx:

• Force-directed layout physics
• Scaling of node size based on degree/strength
• Color palette
• Transition speeds

Output

This frontend does not generate files, but displays:

• Animated network transitions
• Per-chapter visuals
• Community-colored layouts
• Responsive network UI If exporting PNG/SVG is desired, an export button could be added in the future (ask and I can help).

Known Issues and Limitations

• Performance: Extensive networks or widespread transitions may cause frame drops on low-end devices.
• Data dependency: Visualization quality depends on the accuracy of processed co-occurrence data.
• Non-directional relationships: Co-occurrence is a proximity proxy, not a true semantic interaction classifier.
• Character aliasing: While we did our best, ensure alias preprocessing is completed before generating JSON inputs, this frontend made a great effort of merging aliases, but it may not be perfect.

License

[License details TBD - e.g., MIT License, Apache 2.0, etc. Add link to LICENSE file if applicable] yet to decide

Contact

Benjamin Just (bmj0034@auburn.edu) Ahmed Elafandi (aze0039@auburn.edu) Joseph Wilcox (jlw0158@auburn.edu)