Les Misérables Character Network Visualization

A React-based visualization of character connections in Victor Hugo's novel "Les Misérables"

Project Overview

This project is a solution to a coding challenge that required creating a visualization of character relationships in Les Misérables. The application maps the social network of characters in the novel, highlighting the most important characters based on their connections within the story. The data comes from the Les Misérables dataset which represents co-appearances of characters in the novel.

Challenge Requirements

This visualization addresses the following requirements from the coding challenge:

1. Create a visualization of the Les Misérables dataset
2. Identify and highlight the most important characters in the novel
3. Include the creator's name in the title of the page
4. Deliver a solution that demonstrates quality code, thoughtful problem-solving approach, appealing visual design, and effective visualization that answers the central question

Features

• Interactive network visualization of character relationships
• Identification and highlighting of the 5 most important characters based on connection strength
• Interactive filtering to focus on important characters and their connections
• Color-coding of character groups
• Responsive design with intuitive controls

How It Works

Identifying Important Characters

The importance of a character is determined based on connection strength—the number of times a character appears in relationships with others in the dataset:

1. Calculating Connection Strength

   • Each link (relationship) between two characters has a value, representing how strong their connection is.
   • The total connection strength of a character is the sum of all value weights of links where they appear.

2. Sorting Characters by Importance

   • Once we have the connection strength for each character, they are sorted in descending order.
   • The characters with the highest connection strength are considered the most important.

3. Marking Important Characters

   • The top 5 most connected characters are identified as "important."
   • They are visually distinguished with:
     • A star symbol (★)
     • A glowing effect
     • Bold, colored text
     • Larger node size
     • Highlighted borders

Visualization Features

• Interactive Filtering: Toggle between viewing all characters or focusing only on important characters and their direct connections
• Visual Encoding: Node size corresponds to character importance, link thickness represents relationship strength
• Group Coloring: Characters are color-coded by their grouping in the novel
• Legend: Provides explanation of visual elements

Requirements Fulfilled

1. Using SDK for Visualization

   • Successfully implemented a network visualization using the provided SDK
   • Effectively visualized the Les Misérables character dataset from the specified URL
   • Created an interactive and informative network representation

2. Identifying & Highlighting Important Characters

   • Algorithm identifies the 5 most important characters based on connection strength
   • Visual highlighting with star symbols, colors, and size differences
   • Interactive filtering to focus on important characters

3. Personal Identification

   • My name prominently displayed in the title

4. Code Quality

   • Structured React components with hooks
   • TypeScript interfaces for type safety
   • Error and loading state handling
   • Proper cleanup in useEffect hooks
   • Separation of concerns (data processing, visualization, UI controls)

5. Visual Design & Interaction

   • Clean styling using SCSS
   • Responsive layout
   • Interactive controls
   • Informative legend
   • Clear visual hierarchy

6. Answering the Central Question

   • Clearly identifies most connected characters
   • Shows relationship structure between characters
   • Interactive filtering for focused analysis
   • Intuitive design for understanding character importance

Technologies Used

• React
• TypeScript
• SDK
• SCSS for styling
• Axios for data fetching

Installation and Setup

1. Install dependencies:

   npm install
   

2. Run the development server:

   npm run dev
   

3. Build for production:

   npm run build
   

Notes

This visualization was created as a solution to a coding challenge. It demonstrates an approach to identifying important characters in a literary work through network analysis and showcases effective use of the SDK for creating interactive data visualizations.

Conclusion

This project successfully meets all the requirements of the coding challenge while providing an engaging and informative visualization of character relationships in Les Misérables. The application effectively answers the central question about identifying the most important characters by using connection strength as a metric and providing clear visual indicators and interactive exploration tools.