An interactive network visualization application that explores the intricate connections between organized crime figures, intelligence operatives, and political figures spanning nearly a century. Built from data extracted from "The World Beneath" podcast series.
- Full Network View: Explore the complete web of connections between all characters
- Individual Character Networks: Generate focused networks showing all connections for any specific character
- Multi-dimensional Relationships: Visualize upstream (bosses), downstream (subordinates), and horizontal (peers/associates/family) connections
- Second-degree Connections: See not just direct connections, but connections of connections
- Category-based Filtering: Browse by Organized Crime, Intelligence & Law Enforcement, Political Figures, or Other
- 149+ Characters: Comprehensive database covering nearly a century of interconnected figures
- Smart Character Matching: Flexible search handles name variations and aliases
- Wikipedia Integration: Complete biographical information with professional photos
- Detailed Summaries: Full character backgrounds without truncation
- Historical Context: Era-specific information and organizational affiliations
- Role Classifications: Clear categorization of each character's primary role and influence
- Responsive Layout: Works seamlessly on desktop and mobile devices
- Interactive Elements: Drag-and-drop network nodes, hover effects, and detailed tooltips
- Color-coded Relationships: Visual distinction between different types of connections
- Clean UI: Professional styling with intuitive navigation
Visit the live application: Connected World Network
- Frontend: React 19+ with modern hooks
- Visualization: D3.js for interactive network graphs
- Styling: Tailwind CSS with custom components
- Build Tool: Vite for fast development and optimized builds
- Deployment: GitHub Pages ready
- 149 Characters from organized crime, intelligence, and political spheres
- 41 Documented Relationships with detailed annotations
- 4 Major Categories: Organized Crime, Intelligence, Politics, Other
- Multi-era Coverage: From 1900s prohibition era to modern times
- Cross-domain Connections: Revealing surprising links between different worlds
- Meyer Lansky emerges as the most central figure, connecting multiple eras and organizations
- Intelligence-Crime Intersections: Documented connections between FBI/OSS operatives and organized crime
- Political Connections: Relationships spanning from local politics to presidential administrations
- Modern Relevance: Connections extending to contemporary political figures
- Node.js 18+
- npm or yarn package manager
- Git
-
Clone the repository
git clone https://github.com/yourusername/character-network-app.git cd character-network-app -
Install dependencies
npm install # or yarn install -
Start development server
npm run dev # or yarn dev -
Open in browser Navigate to
http://localhost:3000
npm run build
# or
yarn build-
Configure repository settings
- Go to repository Settings → Pages
- Set source to "GitHub Actions"
-
Deploy using npm script
npm run deploy
-
Access your deployed app Your app will be available at:
https://yourusername.github.io/character-network-app/
- Netlify: Drag and drop the
distfolder - Vercel: Connect your GitHub repository
- Surge:
npm install -g surge && surge dist/
character-network-app/
├── public/
│ ├── enhanced_character_network.json # Network data
│ ├── final_comprehensive_character_database.json # Character profiles
│ └── index.html
├── src/
│ ├── CompletelyFixedApp.jsx # Main application component
│ ├── App.jsx # App wrapper
│ ├── App.css # Styles
│ └── main.jsx # Entry point
├── package.json
├── vite.config.js # Vite configuration
└── README.md
- Full Network View: Start with the complete network to see all connections
- Category Filtering: Select a category from the dropdown to focus on specific types of characters
- Individual Networks: Click any character to generate their personal network showing all connections
- Interactive Exploration:
- Drag nodes to rearrange the visualization
- Hover over nodes for quick information
- Click nodes to switch focus to that character
- Red nodes: Organized Crime figures
- Blue nodes: Intelligence & Law Enforcement
- Green nodes: Political figures
- Yellow nodes: Other figures
- Connection lines: Represent documented relationships with annotations
This application is built from data extracted from "The World Beneath" podcast series, which provides in-depth investigation into the connections between organized crime, intelligence agencies, and political figures throughout American history.
Podcast Credits: "The World Beneath" - Listen on Apple Podcasts
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- "The World Beneath" Podcast - Primary data source
- D3.js Community - For excellent visualization tools
- React Team - For the robust frontend framework
- Wikipedia - For character photos and biographical information
If you encounter any issues or have questions:
- Check the Issues page
- Create a new issue with detailed description
- Include browser information and steps to reproduce
Made with ♥ by [Your Name]
Exploring the hidden connections that shape our world