Skip to content

Commit 1ec75ac

Browse files
noamjgalnoamjgal
committed
refactor: simplify and reorganize statistics presentation in HTML and CSS; remove outdated stats panel and introduce a new coverage stats section for improved clarity
1 parent 48cccc8 commit 1ec75ac

3 files changed

Lines changed: 40 additions & 143 deletions

File tree

‎css/styles.css‎

Lines changed: 24 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -615,38 +615,34 @@ body {
615615
display: block;
616616
}
617617

618-
/* Statistics Panel (top-right) - Simplified version */
619-
.stats-panel {
620-
position: absolute;
621-
top: 92px;
622-
right: var(--space-xl);
623-
z-index: 100;
624-
background: var(--panel-bg);
625-
backdrop-filter: blur(24px) saturate(180%);
626-
-webkit-backdrop-filter: blur(24px) saturate(180%);
627-
border: 1px solid var(--panel-border);
628-
border-radius: var(--radius-xl);
629-
box-shadow: var(--panel-shadow);
630-
width: 336px;
631-
max-height: calc(100vh - 112px);
632-
overflow: hidden;
633-
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
618+
/* Coverage Stats Section */
619+
.coverage-stats {
620+
background: rgba(255, 255, 255, 0.03);
621+
border: 1px solid rgba(255, 255, 255, 0.06);
622+
border-radius: var(--radius-md);
623+
padding: var(--space-md);
624+
backdrop-filter: blur(8px);
625+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
634626
}
635627

636-
.stats-panel.collapsed {
637-
width: 252px;
638-
border-radius: var(--radius-lg);
628+
.coverage-stats:hover {
629+
background: rgba(255, 255, 255, 0.06);
630+
border-color: rgba(255, 255, 255, 0.12);
639631
}
640632

641-
.stats-panel.collapsed .menu-content {
642-
max-height: 0;
643-
opacity: 0;
644-
pointer-events: none;
645-
padding: 0 var(--space-xl);
633+
.coverage-header {
634+
font-size: 13px;
635+
font-weight: 600;
636+
color: var(--text-primary);
637+
margin-bottom: var(--space-xs);
638+
text-transform: uppercase;
639+
letter-spacing: 0.5px;
640+
opacity: 0.9;
646641
}
647642

648-
.stats-panel.collapsed .menu-title h2 {
649-
opacity: 0.5;
643+
.coverage-stats .stats-text {
644+
margin: 0;
645+
line-height: 1.4;
650646
}
651647

652648
/* Update legend items styling for left panel - Unified bubble */
@@ -876,19 +872,6 @@ body {
876872
flex-shrink: 0;
877873
}
878874

879-
/* Mobile responsive adjustments for stats panel */
880-
@media (max-width: 768px) {
881-
.stats-panel {
882-
top: 60px;
883-
right: 10px;
884-
width: 280px;
885-
}
886-
887-
.stats-panel.collapsed {
888-
width: 224px;
889-
}
890-
}
891-
892875
/* Legend color definitions - removed backgrounds for SVG icons */
893876
.covered-building { background: var(--accent-green); }
894877
.uncovered-building { background: var(--accent-red); }
@@ -961,8 +944,8 @@ body {
961944
/* Map attribution - moved to bottom-left to avoid widget conflicts */
962945
.map-attribution {
963946
position: absolute;
964-
bottom: 8px;
965-
left: 8px;
947+
bottom: 5px;
948+
left: 20px;
966949
background: rgba(0, 0, 0, 0.7);
967950
color: rgba(255, 255, 255, 0.8);
968951
padding: 4px 8px;
@@ -1695,17 +1678,6 @@ body {
16951678
width: 140px;
16961679
}
16971680

1698-
.stats-panel {
1699-
right: 8px;
1700-
width: 220px;
1701-
top: 68px;
1702-
max-height: calc(100vh - 76px);
1703-
}
1704-
1705-
.stats-panel.collapsed {
1706-
width: 160px;
1707-
}
1708-
17091681
/* Smaller brand banner */
17101682
.brand-banner {
17111683
padding: 8px 12px;
@@ -1902,15 +1874,6 @@ body {
19021874
width: 120px;
19031875
}
19041876

1905-
.stats-panel {
1906-
width: 200px;
1907-
right: 4px;
1908-
}
1909-
1910-
.stats-panel.collapsed {
1911-
width: 140px;
1912-
}
1913-
19141877
.map-legend-panel {
19151878
width: 120px;
19161879
right: 4px;

‎index.html‎

Lines changed: 14 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -53,31 +53,6 @@
5353
</div>
5454
</div>
5555

56-
<!-- Statistics Panel (top-right) - Narrative -->
57-
<div class="stats-panel collapsed">
58-
<!-- Panel Header -->
59-
<div class="menu-header">
60-
<div class="menu-title">
61-
<h2>Coverage</h2>
62-
</div>
63-
<div class="menu-actions">
64-
<button class="menu-button minimize" id="statsMinimize" title="Minimize">
65-
<span>−</span>
66-
</button>
67-
</div>
68-
</div>
69-
70-
<!-- Panel Content -->
71-
<div class="menu-content">
72-
<!-- Statistics Section -->
73-
<p class="stats-text">
74-
<span id="currentCoverageText">Existing bomb shelters are accessible within <strong id="currentRadius">--m</strong> by <strong id="currentCoverage">--%</strong> of residential buildings.</span>
75-
<span id="residentsLeftOutText">This leaves approximately <strong id="residentsLeftOut">--</strong> residents without adequate shelter access in the study area.</span>
76-
<span id="newCoverageText">By adding <strong id="newSheltersCount">--</strong> bomb shelters, total coverage increases to <strong id="newCoverage">--%</strong> of informal housing units in the Beer Sheva Valley.</span>
77-
</p>
78-
</div>
79-
</div>
80-
8156
<!-- Unified Control Menu (left sidebar) -->
8257
<div class="main-menu">
8358
<!-- Menu Header with Title -->
@@ -120,6 +95,18 @@ <h2>Shelter Analysis</h2>
12095
</div>
12196
</div>
12297

98+
<!-- Coverage Stats Section -->
99+
<div class="control-section">
100+
<div class="control-group">
101+
<div class="coverage-stats">
102+
<div class="coverage-header">Coverage Summary</div>
103+
<p class="stats-text">
104+
Existing bomb shelters are accessible within <strong id="currentRadius">100m</strong> by <strong id="currentCoverage">--%</strong> of buildings. You have added <strong id="newSheltersCount">0</strong> bomb shelters, increasing total coverage to <strong id="newCoverage">--%</strong>.
105+
</p>
106+
</div>
107+
</div>
108+
</div>
109+
123110
<!-- New Shelters Control - Simplified -->
124111
<div class="control-section">
125112
<div class="control-group" id="addedSheltersSection">
@@ -150,10 +137,6 @@ <h2>Shelter Analysis</h2>
150137
</div>
151138
</div>
152139
</div>
153-
154-
155-
156-
157140
</div>
158141
</div>
159142

@@ -311,7 +294,7 @@ <h3>What This Analysis Shows</h3>
311294
<span class="expand-icon">+</span>
312295
</div>
313296
<div class="section-content" id="analysis-content">
314-
<p>This tool analyzes bomb shelter accessibility within the Negev's informal Bedouin settlements and proposes optimal locations for new shelters to broaden coverage. On the accessibility grid, <strong style="color: #14b814;">green areas</strong> signify neighborhoods with adequate shelter access under current conditions. Conversely, <strong style="color: #c81414;">red areas</strong> pinpoint underserved communities that would greatly benefit from additional shelter facilities. New shelters are strategically placed using an optimizer. This system's primary goal is to maximize the number of residential houses protected by each new shelter, all while ensuring there's no redundant coverage with existing shelters.</p>
297+
<p>This tool analyzes bomb shelter accessibility within the Negev's informal Bedouin settlements and proposes optimal locations for new shelters to broaden coverage. On the accessibility grid, <strong style="color: #14b814;">green areas</strong> signify neighborhoods with adequate shelter access under current conditions. Conversely, <strong style="color: #c81414;">red areas</strong> pinpoint underserved communities that would greatly benefit from additional shelter facilities. New shelters are strategically placed using an optimizer. This system's primary goal is to maximize the number of buildings protected by each new shelter, all while ensuring there's no redundant coverage with existing shelters.</p>
315298
</div>
316299
</div>
317300

@@ -339,10 +322,7 @@ <h3>Data Sources</h3>
339322
</div>
340323
<div class="section-content" id="data-sources-content">
341324
<h4>Building Data</h4>
342-
<p>We sourced building footprints from Microsoft Planetary Computer. To focus on residential buildings within informal Bedouin settlements, we applied several filters. These included a GIS layer of informal settlements provided by The Authority for Development and Settlement of the Bedouin in the Negev (הרשות לפיתוח והתיישבות הבדואים בנגב), census tracts from the Central Bureau of Statistics (למ"ס) where no legally recognized settlements exist, and filtering by building footprint size.</p>
343-
344-
<h4>Population Estimates</h4>
345-
<p>Given the lack of traditional census data for informal settlements, our population estimates are based on a consensus from NGOs, including Bimkom. We use an approximate residential building density of 7 people per residential building.</p>
325+
<p>We sourced building footprints from Microsoft Planetary Computer. To focus primarily on buildings within informal Bedouin settlements, we applied several filters. These included a GIS layer of informal settlements provided by The Authority for Development and Settlement of the Bedouin in the Negev (הרשות לפיתוח והתיישבות הבדואים בנגב), census tracts from the Central Bureau of Statistics (למ"ס) where no legally recognized settlements exist, and filtering by building footprint size to greater than 40 sqm to focus on residences.</p>
346326

347327
<h4>Shelter Data</h4>
348328
<p>Information on existing emergency shelter locations and community-requested sites is meticulously collected by Bimkom field workers and through community submissions. For more detailed information on shelter locations, please reach out to <strong><a href="https://bimkom.org/eng/home-mobile/" target="_blank">Bimkom</a></strong>.</p>
@@ -415,14 +395,6 @@ <h2>Guide</h2>
415395

416396
<div class="guide-step">
417397
<div class="step-number">4</div>
418-
<div class="step-content">
419-
<span class="step-title">Click Coverage</span>
420-
<p class="step-description">Click on coverage window to review accessibility statistics.</p>
421-
</div>
422-
</div>
423-
424-
<div class="guide-step">
425-
<div class="step-number">5</div>
426398
<div class="step-content">
427399
<span class="step-title">Explore Data</span>
428400
<p class="step-description">Click "Data Layers" to show new information like community requests for shelters and change display layers.</p>

‎js/app.js‎

Lines changed: 2 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -102,14 +102,11 @@ class ShelterAccessApp {
102102
newSheltersSlider: document.getElementById('newShelters'),
103103
newSheltersValue: document.getElementById('newSheltersValue'),
104104
heatmapToggle: document.getElementById('heatmapToggle'), // Now a checkbox
105-
// Statistics
105+
// Statistics - simplified
106106
currentCoverage: document.getElementById('currentCoverage'),
107107
currentRadius: document.getElementById('currentRadius'),
108-
residentsLeftOut: document.getElementById('residentsLeftOut'),
109108
newSheltersCount: document.getElementById('newSheltersCount'),
110109
newCoverage: document.getElementById('newCoverage'),
111-
buildingsCovered: document.getElementById('buildingsCovered'),
112-
additionalPeople: document.getElementById('additionalPeople'),
113110
// Legend
114111
legendItems: document.getElementById('legend-items'),
115112
// Layer toggles
@@ -237,23 +234,6 @@ class ShelterAccessApp {
237234
* Setup unified main menu functionality
238235
*/
239236
setupMainMenu() {
240-
// Handle stats panel minimize button
241-
const statsMinimize = document.getElementById('statsMinimize');
242-
const statsPanel = document.querySelector('.stats-panel');
243-
if (statsMinimize && statsPanel) {
244-
statsMinimize.addEventListener('click', () => {
245-
statsPanel.classList.toggle('collapsed');
246-
const icon = statsMinimize.querySelector('span');
247-
if (statsPanel.classList.contains('collapsed')) {
248-
icon.textContent = '+';
249-
statsMinimize.title = 'Expand';
250-
} else {
251-
icon.textContent = '−';
252-
statsMinimize.title = 'Minimize';
253-
}
254-
});
255-
}
256-
257237
// Handle menu minimize button
258238
const menuMinimize = document.getElementById('menuMinimize');
259239
const mainMenu = document.querySelector('.main-menu');
@@ -271,8 +251,6 @@ class ShelterAccessApp {
271251
});
272252
}
273253

274-
275-
276254
// Handle layers modal
277255
this.setupModal('layers');
278256
}
@@ -1699,35 +1677,19 @@ class ShelterAccessApp {
16991677
const totalCoveragePercentage = (totalBuildingsCovered / stats.total_buildings) * 100;
17001678
const currentCoveragePercentage = (existingCoverage / stats.total_buildings) * 100;
17011679

1702-
// Calculate additional people (7 people per building)
1703-
const additionalPeople = Math.max(0, newBuildingsCovered * 7);
1704-
1705-
// Calculate residents left out (uncovered buildings * 7 people per building)
1706-
const uncoveredBuildings = Math.max(0, stats.total_buildings - existingCoverage);
1707-
const residentsLeftOut = uncoveredBuildings * 7;
1708-
1709-
// Update narrative statistics
1680+
// Update simplified statistics
17101681
if (this.elements.currentCoverage) {
17111682
this.elements.currentCoverage.textContent = `${currentCoveragePercentage.toFixed(1)}%`;
17121683
}
17131684
if (this.elements.currentRadius) {
17141685
this.elements.currentRadius.textContent = `${this.coverageRadius}m`;
17151686
}
1716-
if (this.elements.residentsLeftOut) {
1717-
this.elements.residentsLeftOut.textContent = residentsLeftOut.toLocaleString();
1718-
}
17191687
if (this.elements.newSheltersCount) {
17201688
this.elements.newSheltersCount.textContent = newSheltersSelected.toLocaleString();
17211689
}
17221690
if (this.elements.newCoverage) {
17231691
this.elements.newCoverage.textContent = `${totalCoveragePercentage.toFixed(1)}%`;
17241692
}
1725-
if (this.elements.buildingsCovered) {
1726-
this.elements.buildingsCovered.textContent = newBuildingsCovered.toLocaleString();
1727-
}
1728-
if (this.elements.additionalPeople) {
1729-
this.elements.additionalPeople.textContent = additionalPeople.toLocaleString();
1730-
}
17311693
}
17321694

17331695
/**

0 commit comments

Comments
 (0)