Skip to main content
Get up and running with Network Analysis quickly and start visualizing your network data.

​
Prerequisites

Before you begin, ensure you have:
  • A modern web browser (Chrome, Firefox, Safari, or Edge)
  • An Excel file (.xlsx) with network relationship data
  • A local web server to serve the files (options provided below)
Your Excel file should have at least two columns: one for origin nodes and one for destination nodes. Weight and coordinate columns are optional.

​
Installation

1

Get the application

Clone the repository or download the source files:
git clone https://github.com/moafar/network-analysis.git
cd network-analysis
The application consists of just 4 files:
  • index.html - Main layout and UI structure
  • app.js - Core logic and visualization rendering
  • presentation.js - Event handlers and UI interactions
  • styles.css - Visual styling
All dependencies (D3, vis-network, Leaflet, SheetJS) are loaded from CDN - no installation required!
2

Start a local server

You need to serve the files via HTTP (not file://) to avoid CORS issues with CDN libraries.Choose one of these methods:
python3 -m http.server 8000
Using VS Code? Install the “Live Server” extension and right-click index.html → “Open with Live Server”
3

Open in browser

Navigate to the local server URL:
http://localhost:8000
You should see the Network Analysis interface with a sidebar for data loading and column mapping.

​
Load Your First Dataset

1

Click Load Excel

Click the Load Excel button in the sidebar and select your .xlsx file.
If your Excel file has multiple sheets, you’ll be prompted to select one.
2

Map columns

After loading, use the dropdown menus to map your data columns:
  • Origin - The source node column (required)
  • Destination - The target node column (required)
  • Weight - Optional numeric column for edge weights (auto-counts if not specified)
  • Coordinates - Optional lat/lng columns for geographic visualization
Origin and Destination columns cannot be the same. Select different columns for each.
3

Explore visualizations

Once columns are mapped, visualizations generate automatically. Switch between tabs to explore:
  • Sankey - Flow diagram showing volume of connections
  • Gravitational Network - Force-directed graph layout
  • Ego Networks - Compare up to 4 destinations side-by-side
  • Geographic Map - Map view with arcs (requires coordinate columns)

​
Your First Visualization

Let’s walk through a simple example with referral network data:

​
Example Data Structure

Your Excel file should look like this:
Origin HospitalDestination HospitalReferrals
Hospital AHospital B15
Hospital AHospital C8
Hospital BHospital D22
Hospital CHospital D12

​
Mapping and Viewing

  1. Load the file - Click Load Excel and select your file
  2. Map columns:
    • Origin → “Origin Hospital”
    • Destination → “Destination Hospital”
    • Weight → “Referrals”
  3. View Sankey diagram - See flows between hospitals with edge width proportional to referrals
  4. Apply filters - Use the origin/destination dropdowns to focus on specific hospitals
  5. Adjust Top-N - Use the slider to show only the top 50 connections (or any number 5-500)

​
Visualization Controls

Each visualization has specific controls in the toolbar:

​
Sankey & Network

  • Top-N Slider - Limit displayed edges (5-500)
  • Origin Filter - Show only edges from selected origins
  • Destination Filter - Show only edges to selected destinations
  • Zoom Controls - +/- buttons and reset

​
Ego Networks

  • Destination Dropdowns - Select up to 4 destinations to compare
  • Each panel shows the 1-hop neighborhood around that destination

​
Geographic Map

  • Origin/Destination Filters - Same as Sankey/Network
  • Color By - Group nodes by a data column
  • Cost Mode - Toggle to show distance × weight (arc width = spatial cost)
  • Interactive Legend - Click legend items to filter by group

​
Statistics Display

Every visualization shows real-time statistics:

Sankey & Network

  • Displayed links / Total links
  • Displayed weight / Total weight
  • Percentage of total shown

Ego Networks

  • Neighbors count per destination
  • Edges in ego network
  • Total referrals

​
Tips for Best Results

If your Excel file has thousands of edges:
  • Use Top-N filters to show only the most important connections
  • Apply origin/destination filters to focus on specific nodes
  • Start with Sankey or Ego Networks (faster than full Network graph)
To use the Geographic Map tab:
  • Your data must include latitude and longitude columns for both origins and destinations
  • Select all 4 coordinate columns in the sidebar: Origin Lat, Origin Lng, Dest Lat, Dest Lng
  • Coordinates should be in decimal degrees (e.g., 41.8781, -87.6298)
If you don’t specify a Weight column:
  • The app counts occurrences of each (origin, destination) pair
  • Example: If “Hospital A → Hospital B” appears 3 times, weight = 3
  • Useful for raw transaction logs where each row is one referral/event
  • Sankey: Nodes colored by their role (origins vs destinations)
  • Network: Uses D3 category10 color scale cycling through nodes
  • Ego Networks: Central destination in blue, neighbors in orange
  • Map: Circle = origin only, Square = destination only, Diamond = both

​
Troubleshooting

“XLSX library not loaded” - You must serve files via HTTP, not open directly with file://. Use one of the local server methods above.
Blank visualizations after loading - Ensure both Origin and Destination columns are mapped and are different columns.
Map not showing - Check that all 4 coordinate columns are selected and contain valid numeric lat/lng values.

​
Next Steps

Now that you have the basics working, explore advanced features:

Data Format Guide

Learn about Excel file requirements and data structure best practices

Filtering Guide

Master filtering techniques across all visualization types

Deployment Guide

Deploy your own instance to GitHub Pages, Netlify, or other hosting

Build docs developers (and LLMs) love

Get started for freeTalk to us