jairosnyirenda19/malawi-force-layout-demo

# Malawi Districts Graph Visualization ## What is this project? This project is about visualizing how districts in Malawi are connected to each other. The idea is to show all the districts as dots (nodes) and draw lines (edges) between them if they are connected. The goal is to make the graph easy to read, with as few crossing lines and overlapping nodes as possible. ## Problem Statement When you first plot the districts using their starting positions, the graph can look messy. Some nodes are too close, some lines cross over each other, and it’s hard to see the connections clearly. The challenge is to move the nodes around so the graph looks neat and balanced, but still keeps all the connections correct. ## Approaches Used ### 1. D3.js Fine-Tuned Algorithm For the first approach, I used the force-directed layout from the D3.js library. This is a well-known, professional tool that uses physics-like forces to spread out the nodes and keep connected nodes close together. D3.js does a great job of making the graph look good with very little effort. ### 2. Custom Force-Directed Algorithm For the second approach, I wrote my own simple force-directed algorithm in JavaScript. This version uses basic rules: nodes push away from each other, connected nodes pull together, and a gentle force keeps everything near the center. It’s not as fancy as D3.js, but it shows how the algorithm works under the hood. ## How to Run 1. Make sure you have Node.js installed. 2. In this folder, run: ```bash npm i npx http-server ``` 3. Open your browser and go to the address shown in the terminal (usually localhost). 4. On the main page (`index.html`), you’ll see links to both approaches: - D3.js Fine-Tuned Algorithm - Custom Algorithm 5. Click each link to see how the graph looks with each method. ## What I Learned - D3.js is very good at making graphs look nice, but it’s also helpful to understand how the algorithm works by building it yourself. - Writing a custom algorithm …