Show code
viewof numDevices = Inputs.range([100, 10000000], {value: 10000, step: 100, label: "Number of IoT devices"})
viewof addressScheme = Inputs.select(["IPv4 with NAT", "IPv4 without NAT", "IPv6 with SLAAC"], {value: "IPv6 with SLAAC", label: "Addressing scheme"})
ipv4Total = 4294967296
ipv6Total = 3.4028236692093846e38
subnetPrefix = 64
ipv4Available = addressScheme === "IPv4 without NAT" ? ipv4Total : addressScheme === "IPv4 with NAT" ? 65536 : ipv6Total
natRequired = addressScheme === "IPv4 with NAT"
addressesNeeded = numDevices
canFit = ipv4Available >= addressesNeeded
utilizationPct = addressScheme === "IPv6 with SLAAC" ? "~0%" : ((addressesNeeded / ipv4Available) * 100).toFixed(4) + "%"
natGateways = natRequired ? Math.ceil(numDevices / 250) : 0
natCostPerGateway = 15
totalNatCost = natGateways * numDevices * 0 + natGateways * 450
slaacBenefit = addressScheme === "IPv6 with SLAAC" ? "Zero-config (SLAAC)" : natRequired ? `${natGateways} NAT gateways needed` : "DHCP server required"
html`<div style="background: linear-gradient(135deg, #f8f9fa, #e9ecef); padding: 1.2rem; border-radius: 8px; border-left: 4px solid #3498DB; font-family: Arial, sans-serif;">
<h4 style="color: #2C3E50; margin-top: 0;">Address Space Analysis for ${numDevices.toLocaleString()} Devices</h4>
<table style="width: 100%; border-collapse: collapse; font-size: 0.95em;">
<tr style="border-bottom: 1px solid #dee2e6;">
<td style="padding: 6px; font-weight: bold; color: #7F8C8D;">Scheme</td>
<td style="padding: 6px; font-weight: bold; color: #2C3E50;">${addressScheme}</td>
</tr>
<tr style="border-bottom: 1px solid #f0f0f0;">
<td style="padding: 6px;">Addresses available</td>
<td style="padding: 6px;">${addressScheme === "IPv6 with SLAAC" ? "3.4 x 10^38 (per /64 subnet: 1.8 x 10^19)" : ipv4Available.toLocaleString()}</td>
</tr>
<tr style="border-bottom: 1px solid #f0f0f0;">
<td style="padding: 6px;">Can accommodate ${numDevices.toLocaleString()} devices?</td>
<td style="padding: 6px; font-weight: bold; color: ${canFit ? '#16A085' : '#E74C3C'};">${canFit ? "Yes" : "No - address exhaustion!"}</td>
</tr>
<tr style="border-bottom: 1px solid #f0f0f0;">
<td style="padding: 6px;">Address utilization</td>
<td style="padding: 6px;">${utilizationPct}</td>
</tr>
<tr style="border-bottom: 1px solid #f0f0f0;">
<td style="padding: 6px;">Configuration method</td>
<td style="padding: 6px;">${slaacBenefit}</td>
</tr>
<tr style="border-bottom: 1px solid #f0f0f0;">
<td style="padding: 6px;">End-to-end connectivity</td>
<td style="padding: 6px; color: ${natRequired ? '#E74C3C' : '#16A085'};">${natRequired ? "No - NAT breaks inbound connections" : "Yes - direct device addressing"}</td>
</tr>
${natRequired ? `<tr style="border-bottom: 2px solid #2C3E50;">
<td style="padding: 6px; font-weight: bold;">NAT infrastructure cost</td>
<td style="padding: 6px; color: #E74C3C; font-weight: bold;">${natGateways} gateways ~ $${totalNatCost.toLocaleString()}</td>
</tr>` : `<tr style="border-bottom: 2px solid #2C3E50;">
<td style="padding: 6px; font-weight: bold;">NAT infrastructure cost</td>
<td style="padding: 6px; color: #16A085; font-weight: bold;">$0 - no NAT needed</td>
</tr>`}
</table>
</div>`