chore: Modularize frontend architecture and remove ORCA code

.gitignore

@@ -215,3 +215,8 @@ __marimo__/
 # Streamlit
 .streamlit/secrets.toml
 
+# Node.js
+node_modules/
+
+# macOS
+.DS_Store

README.md

@@ -16,11 +16,10 @@ This visual is derived from the excellent [ORCA top-contributor-network](https:/
 ### View Locally
 
 ```shell
-cd dist
 python -m http.server 8000
 ```
 
-Then open <http://localhost:8000/>.
+Then open <http://localhost:8000/> (the root index.html)
 
 ## CLI Commands
 
@@ -109,6 +108,46 @@ Edit `config.toml` to configure:
 
 ## Development
 
+### Architecture
+
+The visualization code is organized into modular ES6 modules in `src/js/`:
+
+```
+src/js/
+├── config/          # Configuration (theme, scales)
+├── data/            # Data filtering and utilities
+├── interaction/     # Mouse hover and click handling
+├── layout/          # Canvas sizing and layout
+├── render/          # Drawing functions (shapes, text, labels)
+├── simulations/     # D3 force simulations
+├── state/           # State management
+├── utils/           # Utilities (helpers, validation, formatters, debug)
+└── __tests__/       # Unit tests
+```
+
+The main entry point is `index.js` which:
+1. Loads dependencies (D3, etc.)
+2. Imports all modular components
+3. Exports `createContributorNetworkVisual` function
+
+The visualization is used in `dist/index.html` to render the interactive network.
+
+### Running Tests
+
+```shell
+npm test
+```
+
+Tests use Vitest and cover filtering, validation, and utility functions.
+
+### Making Changes
+
+When modifying the visualization:
+1. Edit files in `src/js/`
+2. Changes are immediately available in the browser (no build step needed)
+3. Refresh `http://localhost:8000/` to see updates
+4. Run `npm test` to verify changes don't break tests
+
 ### Code Quality
 
 ```shell

css/style.css

@@ -362,14 +362,63 @@ li#item-remaining::before {
 /*************** CHART ***************/
 /*************************************/
 
-/* This is all done within the createORCAVisual function */
+/* This is all done within the createContributorNetworkVisual function */
 
 #chart-container {
     position: relative;
     background-color: var(--color-background);
     width: 100%;
     min-height: 800px;
     padding: 20px;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+#chart-zoom-controls {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    z-index: 10;
+}
+
+#chart-zoom-controls button {
+    width: 36px;
+    height: 36px;
+    border-radius: 6px;
+    border: 1px solid #ddd;
+    background: #fff;
+    color: #443F3F;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 1;
+    cursor: pointer;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+    transition: transform 120ms ease, border-color 120ms ease;
+}
+
+#chart-zoom-controls svg {
+    width: 18px;
+    height: 18px;
+    display: block;
+    margin: 0 auto;
+}
+
+#zoom-reset {
+    width: 36px;
+    height: 36px;
+    padding: 0;
+}
+
+#chart-zoom-controls button:hover {
+    border-color: #CF3F02;
+    transform: translateY(-1px);
+}
+
+#chart-zoom-controls button:active {
+    transform: translateY(0);
 }
 
 #chart-zoom-controls {
@@ -379,7 +428,7 @@ li#item-remaining::before {
     display: flex;
     flex-direction: column;
     gap: 8px;
-    z-index: 2;
+    z-index: 10;
 }
 
 #chart-zoom-controls button {
@@ -421,12 +470,12 @@ li#item-remaining::before {
 
 #chart-container canvas {
     display: block;
-    margin: 0;
 }
 
 #canvas, #canvas-click {
     position: absolute;
     top: 0;
+    left: 0;
     pointer-events: none;
     z-index: 0;
     transition: opacity 200ms ease-in;