### Start Local Development Server (Bash)

Source: https://context7.com/goragodwiriya/electron/llms.txt

Provides commands to start a local HTTP server for development. It includes options for using PHP's built-in server, Python 3's http.server, or Node.js's serve package. After starting the server, the application can be accessed via 'http://localhost:8000'.

```bash
# Using PHP built-in server
php -S localhost:8000

# Using Python 3
python -m http.server 8000

# Using Node.js (npx)
npx serve .

# Then open http://localhost:8000 in your browser

```

--------------------------------

### Initialize Parties Grid with Election Data (JavaScript)

Source: https://context7.com/goragodwiriya/electron/llms.txt

Populates the party information grid with detailed cards showing party metrics, leaders, and policies. It takes yearData as input, which is assumed to be fetched using getElectionDataForYear. Each party card displays the logo, name, leader, seat metrics, policy tags, and a dissolution badge if applicable.

```javascript
// Initialize parties grid
const yearData = getElectionDataForYear(2566);
initializePartiesGrid(yearData);

// Each party card displays:
// - Party logo with brand color
// - Party name and leader
// - Seat metrics (total, constituency, party list)
// - Policy tags
// - Dissolution badge for dissolved parties
```

--------------------------------

### Load Thailand Map and Initialize Interaction (JavaScript)

Source: https://context7.com/goragodwiriya/electron/llms.txt

Asynchronously loads the Thailand SVG map from 'assets/thailand-map.svg' and inserts it into the 'thailandMap' container. It then initializes map interactions and updates map colors. This function is automatically called on DOMContentLoaded.

```javascript
// Load and initialize map
async function loadThailandMap() {
    const mapContainer = document.getElementById('thailandMap');
    const response = await fetch('assets/thailand-map.svg');
    const svgText = await response.text();
    mapContainer.innerHTML = svgText;

    initializeMapInteraction();
    updateMapColors();
}

// Called automatically on DOMContentLoaded
document.addEventListener('DOMContentLoaded', loadThailandMap);
```

--------------------------------

### Select Province and Display Election Results (JavaScript)

Source: https://context7.com/goragodwiriya/electron/llms.txt

Handles province selection by programmatically selecting a province (e.g., 'bangkok'). It loads district data from a JSON file (e.g., 'data/districts-2566.json') and displays detailed election results in a side panel, including winner, party, and votes for each district.

```javascript
// Programmatically select a province
await selectProvince('bangkok');

// Loads district data from data/districts-2566.json
// Displays province summary and district-level results table:
// | เขต | ผู้ชนะ | พรรค | คะแนน |
// | 1   | สมชาย | ก้าวไกล | 45,234 |

```

--------------------------------

### Process Province Data for Map (PHP)

Source: https://context7.com/goragodwiriya/electron/llms.txt

Generates province-level results and district JSON files required for the interactive map. This script creates files like 'province-results.js' and district-specific JSON files for different election years (e.g., 'districts-2566.json').

```bash
# Generate province and district data files
php process-provinces.php

# Creates:
# - data/province-results.js (province summaries)
# - data/districts-2566.json (district-level 2566 data)
# - data/districts-2562.json (district-level 2562 data)
# - data/districts-2554.json (district-level 2554 data)

```

--------------------------------

### Load and Cache District Election Data (JavaScript)

Source: https://context7.com/goragodwiriya/electron/llms.txt

Fetches and caches district-level election data for a given year and province ID. The data is stored in 'districtDataCache' for subsequent requests, optimizing performance. The returned data includes a list of districts with winner information and party colors.

```javascript
// Load district data with caching
const districtData = await loadDistrictData(2566, 'bangkok');

// Returns:
// {
//   districts: [
//     { district: 1, winner: "...", winnerParty: "ก้าวไกล", winnerVotes: 45234, color: "#F47933" },
//     { district: 2, winner: "...", winnerParty: "ก้าวไกล", winnerVotes: 42156, color: "#F47933" }
//   ]
// }

// Data is cached in districtDataCache for subsequent requests

```

--------------------------------

### Split Province Data for Map Rendering (PHP)

Source: https://context7.com/goragodwiriya/electron/llms.txt

Extracts map-specific data from province results to optimize map rendering. This script generates 'data/map-data.js', which contains the 'provinceMapData' object used for coloring provinces on the map based on winning party data.

```bash
# Generate map-data.js for SVG coloring
php split-province-data.php

# Creates: data/map-data.js
# Contains provinceMapData object with winning party colors per province

```

--------------------------------

### Initialize Year Selector and Data Reloading (JavaScript)

Source: https://context7.com/goragodwiriya/electron/llms.txt

Initializes event listeners for year selector buttons. When a button is clicked, it updates the active state, sets the 'currentYear', fetches the corresponding election data, and then triggers updates for various visualization components including stats banners, charts, bars, party stats, party grids, and map colors.

```javascript
// Year selector initialization
function initializeYearSelector() {
    const yearButtons = document.querySelectorAll('.year-btn');

    yearButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            // Update active state
            yearButtons.forEach(b => b.classList.remove('active'));
            this.classList.add('active');

            // Get selected year and reload data
            currentYear = parseInt(this.dataset.year);
            const yearData = getElectionDataForYear(currentYear);

            // Update all components
            updateStatsBanner(yearData);
            initializeParliamentChart(yearData);
            initializeVoteBars(yearData);
            initializePartyStats(yearData);
            initializePartiesGrid(yearData);
            updateMapColors();
        });
    });
}

```

--------------------------------

### Normalize Election Data (PHP)

Source: https://context7.com/goragodwiriya/electron/llms.txt

Processes raw election JSON files and generates the 'election-data.js' module with normalized party information. This script is executed via the command line and outputs processing status and the generated file name.

```bash
# Generate election-data.js from raw JSON data
php normalize-data.php

# Output:
# === Processing Election Data ===
# Processing 2566...
#   Found 12 parties with seats
# Processing 2562...
#   Found 11 parties with seats
# Processing 2554...
#   Found 8 parties with seats
# === Complete ===
# Generated: data/election-data.js

```

--------------------------------

### Update Map Province Colors (JavaScript)

Source: https://context7.com/goragodwiriya/electron/llms.txt

Updates the fill colors of SVG province elements on the map based on the winning party data for the currently selected election year. This function is called when switching election years to reflect the changes in results.

```javascript
// Update map colors when switching years
currentYear = 2562;
updateMapColors();

// Each province SVG element gets its fill color from provinceMapData
// Example: Bangkok changes from orange (2566) to blue (2562)

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.