KnouandClaude Opus 5
4d2b3e3d44
Classify each county by area-weighted Köppen class shares: a county is predominantly its top class when that class covers at least 50% of its land and leads the runner-up by at least 5 percentage points; otherwise it is Mixed (133 of 3,143 counties in the 50 states and DC). - Add build_county_koppen_metric.py (writes data/metrics/koppen.csv) and apply_koppen_metric_to_climate_data.py (writes koppenZone plus koppenPrimaryClass/koppenSecondaryClass for Mixed counties). - Move shared helpers into scripts/common/ (county loading, Köppen legend, area-weighted raster shares); fix the 180th-meridian raster window for Aleutians West. - Add check_climate_data.py to validate the app CSV. - Draw Mixed counties in app.js as diagonal stripes of their top two classes, fixed to the ground and following the map at every zoom, with a crossfade only when the stripe size changes. Filtering a class also matches Mixed counties where it is primary or secondary. - Document the rule, display, and pipeline plan in docs/ and update the README and data-source notes. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
114 lines
4.1 KiB
HTML
114 lines
4.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>US County Climate Explorer</title>
|
|
<link rel="icon" href="data:," />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Source+Sans+3:wght@400;600;700&display=swap" rel="stylesheet" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
|
crossorigin=""
|
|
/>
|
|
<link rel="stylesheet" href="styles.css?v=dtr-20260531" />
|
|
</head>
|
|
<body>
|
|
<div class="page-shell">
|
|
<aside class="control-panel">
|
|
<h1>US County Climate Explorer</h1>
|
|
<p class="intro">Explore county-level climate filters. Click any county to inspect details and zoom directly to it.</p>
|
|
|
|
<div class="control-stack">
|
|
<label for="metricGroupSelect">Group</label>
|
|
<select id="metricGroupSelect"></select>
|
|
|
|
<div id="metricSelectWrap" class="metric-select-wrap">
|
|
<label for="metricSelect">Metric</label>
|
|
<select id="metricSelect"></select>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="koppenFilterWrap" class="range-wrap is-hidden">
|
|
<label for="koppenFilterSelect">Category Filter</label>
|
|
<select id="koppenFilterSelect"></select>
|
|
</div>
|
|
|
|
<div class="range-wrap">
|
|
<label for="minRange">Minimum Value</label>
|
|
<input id="minRange" type="range" />
|
|
<output id="minValue"></output>
|
|
</div>
|
|
|
|
<div class="range-wrap">
|
|
<label for="maxRange">Maximum Value</label>
|
|
<input id="maxRange" type="range" />
|
|
<output id="maxValue"></output>
|
|
</div>
|
|
|
|
<div class="button-row">
|
|
<button id="resetViewButton" type="button">Reset Country View</button>
|
|
<button id="clearSelectionButton" type="button">Clear Selection</button>
|
|
</div>
|
|
|
|
<div class="control-panel-spacer" aria-hidden="true"></div>
|
|
<div class="sources-control" style="margin-top: auto;">
|
|
<button id="sourcesButton" type="button" aria-haspopup="dialog">Sources</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="map-panel">
|
|
<div id="map" aria-label="US county climate map"></div>
|
|
<section id="metricInfoPanel" class="metric-info-panel" aria-label="County metric details">
|
|
<button
|
|
id="metricInfoToggle"
|
|
class="metric-info-toggle"
|
|
type="button"
|
|
aria-expanded="true"
|
|
aria-controls="stateDetails"
|
|
>
|
|
Hide County Metrics
|
|
</button>
|
|
<div id="stateDetails" class="state-details">
|
|
<h2>Selected County</h2>
|
|
<p>Click a county to see details and auto-focus.</p>
|
|
</div>
|
|
</section>
|
|
<section id="legendInfoPanel" class="legend-info-panel is-collapsed" aria-label="Map legend">
|
|
<button
|
|
id="legendInfoToggle"
|
|
class="legend-info-toggle"
|
|
type="button"
|
|
aria-expanded="false"
|
|
aria-controls="legend"
|
|
>
|
|
Show Legend
|
|
</button>
|
|
<div id="legend" class="legend"></div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<div id="sourcesModal" class="sources-modal" role="dialog" aria-modal="true" aria-labelledby="sourcesModalTitle" hidden>
|
|
<div class="sources-modal-backdrop" data-sources-close></div>
|
|
<section class="sources-dialog" aria-label="Sources details">
|
|
<header class="sources-dialog-header">
|
|
<h2 id="sourcesModalTitle">Sources</h2>
|
|
<button id="sourcesCloseButton" class="sources-close-button" type="button" aria-label="Close sources">X</button>
|
|
</header>
|
|
<div id="sourcesModalContent" class="sources-modal-content"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<script
|
|
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
|
crossorigin=""
|
|
></script>
|
|
<script src="app.js?v=koppen-mixed-cleanup-20260914"></script>
|
|
</body>
|
|
</html>
|