-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
218 lines (208 loc) · 12 KB
/
Copy pathindex.html
File metadata and controls
218 lines (208 loc) · 12 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="screen-orientation" content="landscape">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>D3.js Legal Entity Map</title>
<link rel="stylesheet" href="style.css">
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>
</head>
<body>
<div class="d3lem-app">
<div class="container">
<h1>D3.js Legal Entity Map</h1>
<p class="subtitle">d3lem</p>
<p class="description">Explore the Indian Legal Ecosystem</p>
<section class="instructions-card" aria-label="How to explore this visualization">
<ul>
<li><strong>Explore:</strong> Drag nodes to reposition clusters; hover to highlight connections. Link colors reflect entity groups or relationship types.</li>
<li><strong>Focus:</strong> Use filters (Entity, Relationship, Group) to isolate specific connections, or switch to Table View for detailed data.</li>
</ul>
<p class="limitation-note"><strong>Note:</strong> Subordinate Courts are shown as a single aggregated node; their complex framework requires more detailed treatment beyond this version's scope.</p>
</section>
<div class="controls">
<button id="toggleViewBtn">Show Table View</button>
<button id="editTableBtn">Edit Table</button>
<button id="shareEmbedBtn">Share / Embed</button>
<div class="filter-controls">
<label for="nodeFilter">Filter by Entity:</label>
<select id="nodeFilter">
<option value="">Show All Entities</option>
</select>
<label for="relationshipFilter">Filter by Relationship:</label>
<select id="relationshipFilter">
<option value="">Show All Relationships</option>
</select>
<label for="groupFilter">Filter by Group:</label>
<select id="groupFilter">
<option value="">Show All Groups</option>
<optgroup label="Entity Groups">
<!-- Entity groups will be populated here -->
</optgroup>
<optgroup label="Relationship Groups">
<!-- Relationship groups will be populated here -->
</optgroup>
</select>
<button id="clearFilter">Clear Filter</button>
</div>
</div>
<div class="visualization-container">
<!-- Arrow Diagram View (Default) -->
<div id="diagram-view" class="view active">
<svg id="arrow-diagram"></svg>
<div class="legend-container">
<div class="legend">
<div class="legend-item">
<div class="legend-color" style="background-color: #2E8B57;"></div>
<span>Legislative & Regulatory</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #4169E1;"></div>
<span>Judiciary</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #FF6347;"></div>
<span>Tribunals & Arbitration</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #9370DB;"></div>
<span>People & Officeholders</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #20B2AA;"></div>
<span>Legal Framework</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #DAA520;"></div>
<span>Non-Administrative</span>
</div>
</div>
<p class="legend-note">
Relationship lines are colored by the source entity's group category
</p>
</div>
</div>
<!-- Table View -->
<div id="table-view" class="view">
<div id="table-controls" style="display: none; margin-bottom: 10px;">
<button id="addRowBtn">Add Row</button>
</div>
<div id="table-download-controls" style="margin-bottom: 10px;">
<button id="downloadExcelBtn">Download as Excel</button>
</div>
<table id="data-table">
<thead>
<tr>
<th>Entity</th>
<th>Relationship</th>
<th>Target</th>
<th id="action-header" style="display: none;">Actions</th>
</tr>
</thead>
<tbody id="table-body">
<!-- Judicial entity relationships will be populated by JavaScript -->
</tbody>
</table>
</div>
<!-- About This Project Section (visible in both views) -->
<div class="project-note">
<button class="project-note-toggle" id="projectNoteToggle" aria-expanded="false">
<span class="toggle-icon">▶</span>
<strong>About d3lem:</strong>
</button>
<div class="project-note-content collapsed" id="projectNoteContent">
<p>This Indian Legal Entity Map visualizes the underlying network of relationships between courts, tribunals, regulatory bodies, and legal professionals in the Indian judicial system. It emerged from managing multiple cases across various courts for a financial institution's survival struggle, revealing the complex connections that shape how legal entities interact, including funding flows, appointment processes, and oversight mechanisms.</p>
<p>The visualization documents the relationships between entities at both central and state levels, mapping how the judiciary connects with legislative bodies, executive agencies, and other institutions that influence its functioning and independence.</p>
</div>
</div>
</div>
</div>
<!-- Password Prompt Modal -->
<div id="password-modal" class="modal-overlay" style="display: none;">
<div class="modal-content password-modal">
<h3>Enter Password to Edit</h3>
<form id="password-form">
<input type="password" id="password-input" placeholder="Enter password" autocomplete="off" />
<div id="password-error" class="error-message" style="display: none; color: #d32f2f; margin-top: 10px;"></div>
<div class="modal-buttons">
<button type="submit" id="password-submit">Submit</button>
<button type="button" id="password-cancel">Cancel</button>
</div>
</form>
</div>
</div>
<!-- Edit Row Modal -->
<div id="edit-modal" class="modal-overlay" style="display: none;">
<div class="modal-content edit-modal">
<h3>Edit Row</h3>
<form id="edit-form">
<div class="form-group">
<label for="edit-source">Source Entity:</label>
<input type="text" id="edit-source" list="source-options" placeholder="Enter or select source entity" />
<datalist id="source-options"></datalist>
</div>
<div class="form-group">
<label for="edit-relationship">Relationship:</label>
<input type="text" id="edit-relationship" list="relationship-options" placeholder="Enter or select relationship" />
<datalist id="relationship-options"></datalist>
</div>
<div class="form-group">
<label for="edit-target">Target Entity:</label>
<input type="text" id="edit-target" list="target-options" placeholder="Enter or select target entity" />
<datalist id="target-options"></datalist>
</div>
<div id="edit-error" class="error-message" style="display: none; color: #d32f2f; margin-top: 10px;"></div>
<div class="modal-buttons">
<button type="submit" id="edit-save">Save</button>
<button type="button" id="edit-cancel">Cancel</button>
</div>
</form>
</div>
</div>
<!-- Share/Embed Modal -->
<div id="share-embed-modal" class="modal-overlay" style="display: none;">
<div class="modal-content share-modal" style="max-width: 800px;">
<h3>Share / Embed This Visualization</h3>
<p style="margin-bottom: 15px; color: #666;">Copy the code below to embed this visualization in your website:</p>
<div class="form-group">
<label for="embed-code">Embed Code:</label>
<textarea id="embed-code" readonly style="width: 100%; height: 200px; font-family: 'Courier New', monospace; font-size: 12px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #f9f9f9; resize: vertical;"></textarea>
</div>
<div style="margin-top: 10px; display: flex; gap: 10px; align-items: center;">
<button id="copy-embed-code" style="padding: 8px 16px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer;">Copy Code</button>
<span id="copy-success" style="color: #2E7D32; display: none;">✓ Copied to clipboard!</span>
</div>
<div style="margin-top: 20px; padding: 15px; background: #f5f5f5; border-radius: 4px;">
<h4 style="margin-top: 0;">Instructions:</h4>
<ol style="margin: 10px 0; padding-left: 20px;">
<li>Copy the embed code above</li>
<li>Paste it into your HTML page where you want the visualization to appear</li>
<li>Make sure all required files (data.js, helpers.js, network-diagram.js, embed.js, style.css) are accessible from your website</li>
<li>Adjust the container div's width and height as needed</li>
</ol>
</div>
<div class="modal-buttons" style="margin-top: 20px;">
<button type="button" id="share-embed-close">Close</button>
</div>
</div>
</div>
<!-- Modular JavaScript files -->
<script src="data.js?v=1" defer></script>
<!-- Optional: local-only overrides, ignored by git -->
<script src="access-control.local.js" defer data-local-only onerror="console.info('No access-control.local.js overrides found (this is expected in public builds).')"></script>
<script src="helpers.js?v=1" defer></script>
<script src="network-diagram.js?v=1" defer></script>
<script src="main.js?v=1" defer></script>
</div>
<!-- Footer Credit -->
<footer class="d3lem-footer">
<p>Built with <a href="https://d3js.org/" target="_blank" rel="noopener noreferrer">D3.js</a> |
Inspired by <a href="https://observablehq.com/@d3/mobile-patent-suits" target="_blank" rel="noopener noreferrer">Mobile Patent Suits</a> example</p>
</footer>
</body>
</html>