31:T150e,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; }32:Td2c,// --- Chart 2: Sovereignty Level Deep Dive --- // FINAL VERSION with fixed margins, enhanced tooltips, AND watermark. sovereigntyDeepDive = { // Define human-readable labels for the levels const sovMap = ["0: Virtual", "1: Para-Sovereign", "2: Legal Wrapper", "3: Territorial Enclave", "4: Sovereign Ambition"]; // Define the full Icon Map 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" }; return Plot.plot({ facet: { data: atlasData, y: (d) => sovMap[d.layer1_coordinates.sovereignty_level] }, width: 960, marginTop: 50, marginRight: 150, marginLeft: 150, x: { label: "← Emergent (-1.0) · Genesis Locus · Architected (+1.0) →", labelAnchor: "center" , domain: [-1.1, 1.1] }, y: { label: "Protocol (+1.0) ↔ Narrative (-1.0)", domain: [-1.1, 1.1] }, marks: [ Plot.frame(), // THE FIX: Added the watermark layer. It will appear in each facet. Plot.image( [{x: 0, y: 0}], // Dummy data point for the layer { src: "https://pbs.twimg.com/profile_images/1929488407941541888/Fh8Sh3Kw_400x400.jpg", width: 50, // Slightly smaller for the subplots opacity: 0.35, frameAnchor: "bottom-right", // Position relative to each chart's frame dx: -10, dy: -10 } ), Plot.image(atlasData, { 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, "Description": "notes" } }) ], title: "Sovereignty Level Deep Dive", subtitle: "Distribution of entities across each level of sovereignty" }); }33:T843,// --- Chart 3: Strategic Quadrant Analysis --- // FINAL VERSION with fixed margins for label readability. quadrantAnalysis = { // --- Step 1: Pre-process the data --- const sovMap = ["0: Virtual", "1: Para-Sovereign", "2: Legal Wrapper", "3: Territorial Enclave", "4: Sovereign Ambition"]; const processedData = atlasData.map(d => { const x = d.layer1_coordinates.genesis_locus_score; const y = d.layer1_coordinates.modus_operandi_score; let quadrant; if (x < 0 && y >= 0) quadrant = "1: Emergent Protocol"; else if (x >= 0 && y >= 0) quadrant = "2: Architected Protocol"; else if (x < 0 && y < 0) quadrant = "3: Emergent Narrative"; else quadrant = "4: Architected Narrative"; const sovereignty_label = sovMap[d.layer1_coordinates.sovereignty_level]; return { ...d, quadrant, sovereignty_label }; }); // --- Step 2: Create the stacked bar chart --- return Plot.plot({ title: "Strategic Quadrant Analysis", subtitle: "Which strategies are producing the most autonomous projects?", width: 960, // THE FIX: Increased the left margin to make space for the axis label. marginLeft: 140, x: { grid: true, label: "Number of Projects", labelAnchor: "center" }, y: { domain: ["1: Emergent Protocol", "2: Architected Protocol", "3: Emergent Narrative", "4: Architected Narrative"], label: "Strategic Quadrant" // This label now has enough space. }, color: { legend: true, scheme: "spectral" }, marks: [ Plot.image( [{x: 0, y: 0}], { src: "https://pbs.twimg.com/profile_images/1929488407941541888/Fh8Sh3Kw_400x400.jpg", width: 60, opacity: 0.75, frameAnchor: "bottom-right", dx: -10, dy: -10 } ), Plot.barX(processedData, Plot.groupY({ x: "count" }, { y: "quadrant", fill: "sovereignty_label", tip: true, channels: { "Number of Projects": "count", "Sovereignty Level": "sovereignty_label" }, sort: {y: "x", reverse: true} })), Plot.ruleX([0]) ] }); }34:T47c,##Initial Signals (v1.0) A few patterns have already emerged from the initial dataset: 1/ The Architect's Advantage: Top-down, "architected" projects currently dominate the path to tangible autonomy. The startup model is, for now, beating the pure movement model in the race for sovereignty. 2/ The Narrative-to-Protocol Pipeline: The ecosystem often acts as a pipeline. Ideas are born as Emergent Narratives (bottom-left) and mature into Architected Protocols (top-right) by attracting capital and talent. 3/ The Blind Spot: The map reveals a significant lack of entities focused on "Media" or "Education." This is the ecosystem's missing layer—a clear opportunity for builders. ##The Protocol & The Community This Atlas is a living project. You can help shape it. Read the full announcement post: Mapping the Glitch: Introducing the 404 Embassy Atlas v1.0 Explore the project on GitHub: https://github.com/raysvitla/404-embassy-atlas Deep dive into the methodology: https://github.com/raysvitla/404-embassy-atlas/wiki/The-Embassy-Protocol-for-Network-Cartography-(EPNC)-v1 Collaborate or get in touch: embassy@svit.la stay evolving 🐌35:[] 2f:{"title":"","cells":[{"id":6,"value":"atlasData = {\n const url = \"https://raw.githubusercontent.com/raysvitla/404-embassy-atlas/refs/heads/main/epnc_atlas_v1.0_final.json\";\n const response = await fetch(url);\n if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);\n return response.json();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"404 Embassy Atlas v1.0\nMapping the Landscape of Network States & Para-Political Entities\nThe world of governance is fragmenting. New forms of sovereignty are being prototyped in digital commons and physical enclaves. This Atlas is an open-source, dynamic map designed to bring signal to the noise.\nIt is powered by the EPNC v1.1 Protocol, a standardized methodology for classifying these new entities.","pinned":false,"hidden":false,"mode":"md"},{"id":137,"value":"The Live Atlas: An XY View\nThis is the primary map of the ecosystem. Each node represents an entity, positioned along two core axes:\nX-Axis: Genesis Locus (Emergent ↔ Architected)\nMeasures the origin of power. Is it a grassroots, bottom-up movement or a top-down, planned project?\nY-Axis: Modus Operandi (Narrative ↔ Protocol)\nMeasures the primary output. Is it creating culture and ideas, or building code and infrastructure?\nHow to use: Hover over a node for details. Use the \"Filter by Identity\" checkboxes below the chart to isolate specific entity types.\n","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"Sovereignty Level Deep Dive: The Z-Axis\nThis chart unpacks the third dimension: an entity's level of real-world integration. It shows how strategies and populations shift as projects move from purely virtual concepts to governing physical territory.\n","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"Strategic Quadrant Analysis\nThis chart quantifies the dominant strategies in the ecosystem. It answers a simple question: Which approaches are producing the most autonomous projects right now?","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"$34","pinned":false,"hidden":false,"mode":"md"}],"files":"$W35","stdlib":"1","titling":"auto"}