interactiveAtlas = { // --- Step 1: Define the Icon Map at the top level --- // This makes it accessible to both the filter creation and the plot rendering. const iconMap = { "Charter City": "https://raw.githubusercontent.com/raysvitla/404-embassy-atlas/main/images/Charter_City_404embassy_atlas.png", "DAO": "https://raw.githubusercontent.com/raysvitla/404-embassy-atlas/main/images/DAO_404embassy_atlas.png", "SEZ": "https://raw.githubusercontent.com/raysvitla/404-embassy-atlas/main/images/SEZ_404embassy_atlas.png", "Diaspora": "https://raw.githubusercontent.com/raysvitla/404-embassy-atlas/main/images/diaspora_404embassy_atlas.png", "For-Profit Corp": "https://raw.githubusercontent.com/raysvitla/404-embassy-atlas/main/images/for_profit_corp_404embassy_atlas.png", "Media Outlet": "https://raw.githubusercontent.com/raysvitla/404-embassy-atlas/main/images/media_404embassy_atlas.png", "Movement": "https://raw.githubusercontent.com/raysvitla/404-embassy-atlas/main/images/movement_404embassy_atlas.png", "Non-Profit Foundation": "https://raw.githubusercontent.com/raysvitla/404-embassy-atlas/main/images/non_profit_foundation_404embassy_atlas.png", "Protocol": "https://raw.githubusercontent.com/raysvitla/404-embassy-atlas/main/images/protocol_404embassy_atlas.png", "Think Tank": "https://raw.githubusercontent.com/raysvitla/404-embassy-atlas/main/images/think_tank_404embassy_atlas.png", "Venture Fund": "https://raw.githubusercontent.com/raysvitla/404-embassy-atlas/main/images/venture_fund_404embassy_atlas.png" }; // --- Step 2: Create the main container and the filters --- const container = DOM.element("div"); const identities = [...new Set(atlasData.map(d => d.layer2_profile.identity.primary))].sort(); const filterForm = DOM.element("form"); filterForm.style.marginTop = "20px"; filterForm.style.fontFamily = "sans-serif"; // Generate filter HTML, now with icons next to labels filterForm.innerHTML = `

Filter by Identity${ identities.map(identity => { const iconSrc = iconMap[identity] || ""; // Get icon URL return `

${identity} `; }).join("") }

`; // --- Step 3: Define the function that draws the plot --- function renderPlot(data) { return Plot.plot({ title: "404 Embassy Atlas v1.0", subtitle: "Mapping the Landscape of Network States & Para-Political Entities", width: 960, height: 600, marginTop: 50, marginRight: 50, marginBottom: 50, marginLeft: 50, grid: true, x: { label: "← Emergent (-1.0) · Genesis Locus · Architected (+1.0) →", domain: [-1.1, 1.1], ticks: 5, labelAnchor: "center" }, y: { label: "Narrative (+1.0) ↔ Modus Operandi ↔ Protocol (-1.0)", domain: [-1.1, 1.1], ticks: 5, labelAnchor: "center" }, marks: [ Plot.image([{ x: 0.95, y: -0.95 }], { x: "x", y: "y", src: "https://pbs.twimg.com/profile_images/1929488407941541888/Fh8Sh3Kw_400x400.jpg", width: 80, opacity: 0.75 }), Plot.image(data, { x: d => d.layer1_coordinates.genesis_locus_score, y: d => d.layer1_coordinates.modus_operandi_score, src: d => iconMap[d.layer2_profile.identity.primary], width: d => { const scaleMap = { "Seed": 25, "Growth": 40, "State": 55, "N/A": 20 }; return scaleMap[d.layer2_profile.scale.capital] || 25; }, tip: true, channels: { "Entity": "entity_name", "Identity": d => d.layer2_profile.identity.primary, "Sovereignty Level": d => { const sovMap = ["0: Virtual", "1: Para-Sovereign", "2: Legal Wrapper", "3: Territorial Enclave", "4: Sovereign Ambition"]; return sovMap[d.layer1_coordinates.sovereignty_level]; }, "Note": "notes" } }) ] }); } // --- Step 4: Add the event listener for real-time filtering --- filterForm.addEventListener("input", () => { const selectedIdentities = Array.from(filterForm.querySelectorAll("input:checked")).map(i => i.value); const newData = atlasData.filter(d => selectedIdentities.includes(d.layer2_profile.identity.primary)); container.querySelector(".plot-container")?.remove(); const plotContainer = DOM.element("div", { class: "plot-container" }); plotContainer.append(renderPlot(newData)); // Prepend the new plot to keep filters at the bottom container.prepend(plotContainer); }); // --- Step 5: Initial render (Plot first, then Filters) --- const initialPlotContainer = DOM.element("div", { class: "plot-container" }); initialPlotContainer.append(renderPlot(atlasData)); container.append(initialPlotContainer); // Add plot to the main container container.append(filterForm); // Add filters below the plot // --- Step 6: Return the main container to be displayed --- return container; }