2f:T35aa,{ const d3 = await require("d3@7"); const topojson = await require("topojson-client@3"); // Overrides const LABEL_MOVES = { "840": {}, "356": { "Claude": { x: 142, y: -24, anchor: "end" }, "Perplexity": { x: 170, y: -8, anchor: "middle" } }, "076": {}, "392": { "Google Gemini": { mode: "inside", x: 161, y: 160 }, "Microsoft Copilot": { x: 148, y: -8, anchor: "end" }, "Claude": { x: 172, y: -24, anchor: "middle" }, "Perplexity": { x: 194, y: -6, anchor: "start" } }, "276": {}, "036": {} }; // Palette const NB_BLUE = "#043463"; const NB_RED = "#fe0100"; const NB_PINK = "#ff8088"; const NB_ORANGE = "#FF6B00"; const NB_YELLOW = "rgba(255,200,120,0.9)"; const NB_TEAL = "#00ffff"; const NB_GREY = "#c9c9c9"; const WHITE = "#ffffff"; const BLACK = "#000000"; const SANS = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"; // Data // https://gs.statcounter.com/ai-chatbot-market-share const services = [ { name: "ChatGPT", color: NB_BLUE, ink: WHITE }, { name: "Google Gemini", color: NB_YELLOW, ink: BLACK }, { name: "Microsoft Copilot", color: NB_PINK, ink: BLACK }, { name: "Claude", color: NB_ORANGE, ink: BLACK }, { name: "Perplexity", color: NB_TEAL, ink: BLACK }, { name: "DeepSeek", color: NB_RED, ink: BLACK } ]; const countries = [ { id: "840", label: "United States", shares: [65.02, 12.72, 8.99, 7.20, 5.97, 0.08] }, { id: "356", label: "India", shares: [77.41, 10.96, 2.56, 4.01, 5.07, 0.00] }, { id: "076", label: "Brazil", shares: [90.27, 2.93, 4.56, 0.37, 1.67, 0.20] }, { id: "392", label: "Japan", shares: [66.45, 18.68, 9.27, 3.04, 2.46, 0.10] }, { id: "276", label: "Germany", shares: [73.07, 11.38, 4.34, 4.73, 6.44, 0.00] }, { id: "036", label: "Australia", shares: [70.03, 9.37, 9.34, 5.36, 5.89, 0.00] } ]; // Layout const W = 1000; const BW = 480; const GAP = 40; const CH = 300; const PAD_X = 52; const PAD_Y = 40; const SHAPE_W = BW - PAD_X * 2; const SHAPE_H = CH - PAD_Y * 2; const LEGEND_H = 36; const ROW_GAP = 16; const FOOT_H = 34; const SVG_H = LEGEND_H + CH * 3 + ROW_GAP * 2 + FOOT_H; const SS = 2; const NBINS = 3600; const TAU = Math.PI * 2; // Basemap const world = await d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json"); const features = topojson.feature(world, world.objects.countries).features; const byId = new Map(features.map((f) => [String(f.id), f])); // Slices const measure = (pathString, w, h, shares) => { const cw = w * SS; const ch = h * SS; const canvas = document.createElement("canvas"); canvas.width = cw; canvas.height = ch; const ctx = canvas.getContext("2d"); ctx.scale(SS, SS); ctx.fillStyle = "#000"; ctx.fill(new Path2D(pathString)); const px = ctx.getImageData(0, 0, cw, ch).data; const owner = new Int8Array(cw * ch).fill(-1); let sx = 0; let sy = 0; let n = 0; for (let i = 0; i < cw * ch; i++) { if (px[i * 4 + 3] > 128) { owner[i] = -2; sx += i % cw; sy += Math.floor(i / cw); n++; } } const cx = sx / n; const cy = sy / n; const bins = new Float64Array(NBINS); const ang = new Float32Array(cw * ch); for (let i = 0; i < cw * ch; i++) { if (owner[i] !== -2) continue; let t = Math.atan2((i % cw) - cx, cy - Math.floor(i / cw)); if (t < 0) t += TAU; ang[i] = t; bins[Math.min(NBINS - 1, Math.floor((t / TAU) * NBINS))] += 1; } const sum = d3.sum(shares); const stops = [0]; let cum = 0; let b = 0; let acc = 0; for (let i = 0; i < shares.length; i++) { acc += shares[i] / sum; const target = acc * n; while (b < NBINS && cum < target) { cum += bins[b]; b++; } stops.push(i === shares.length - 1 ? TAU : (b / NBINS) * TAU); } for (let i = 0; i < cw * ch; i++) { if (owner[i] !== -2) continue; const t = ang[i]; let k = shares.length - 1; for (let j = 0; j < shares.length; j++) { if (t < stops[j + 1]) { k = j; break; } } owner[i] = k; } // Anchors const d = new Float32Array(cw * ch); const spots = []; for (let k = 0; k < shares.length; k++) { for (let i = 0; i < d.length; i++) d[i] = owner[i] === k ? 1e9 : 0; for (let y = 0; y < ch; y++) { for (let x = 0; x < cw; x++) { const i = y * cw + x; if (d[i] === 0) continue; let v = d[i]; if (x > 0) v = Math.min(v, d[i - 1] + 1); if (y > 0) v = Math.min(v, d[i - cw] + 1); if (x > 0 && y > 0) v = Math.min(v, d[i - cw - 1] + 1.4142); if (x < cw - 1 && y > 0) v = Math.min(v, d[i - cw + 1] + 1.4142); d[i] = v; } } let best = -1; let bx = 0; let by = 0; for (let y = ch - 1; y >= 0; y--) { for (let x = cw - 1; x >= 0; x--) { const i = y * cw + x; if (d[i] === 0) continue; let v = d[i]; if (x < cw - 1) v = Math.min(v, d[i + 1] + 1); if (y < ch - 1) v = Math.min(v, d[i + cw] + 1); if (x < cw - 1 && y < ch - 1) v = Math.min(v, d[i + cw + 1] + 1.4142); if (x > 0 && y < ch - 1) v = Math.min(v, d[i + cw - 1] + 1.4142); d[i] = v; if (v > best) { best = v; bx = x; by = y; } } } spots.push(best < 0 ? null : { x: bx / SS, y: by / SS, clear: best / SS }); } // Rays const maxR = Math.hypot(cw, ch); const rays = []; for (let k = 0; k < shares.length; k++) { const mid = (stops[k] + stops[k + 1]) / 2; const ux = Math.sin(mid); const uy = -Math.cos(mid); const hits = []; for (let r = 1; r < maxR; r += 1) { const xi = Math.round(cx + ux * r); const yi = Math.round(cy + uy * r); if (xi < 0 || yi < 0 || xi >= cw || yi >= ch) break; if (owner[yi * cw + xi] === k) hits.push(r); } rays.push(hits.length ? { ux: ux, uy: uy, rMid: hits[Math.floor(hits.length * 0.5)] / SS, rOut: hits[hits.length - 1] / SS } : null); } return { center: [cx / SS, cy / SS], stops: stops, spots: spots, rays: rays }; }; // Container const root = document.createElement("div"); root.style.cssText = "box-sizing:border-box;width:1040px;background:" + WHITE + ";padding:20px;font-family:" + SANS + ";"; const title = document.createElement("div"); title.style.cssText = "font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:31px;line-height:1.15;color:" + NB_BLUE + ";margin:0 0 8px 0;"; title.textContent = "Estimated LLM Market Share By Country, July 2026"; root.appendChild(title); const subtitle = document.createElement("div"); subtitle.style.cssText = "font-size:14px;line-height:1.35;color:" + NB_RED + ";margin:0 0 14px 0;"; subtitle.textContent = "Market share is measured as referrals sent from AI chatbots to websites, Statcounter measurement network, July 2026. Each wedge covers a share of the country's mapped area equal to its referral share. Referral share is a usage proxy, not a query count."; root.appendChild(subtitle); const svg = d3.create("svg") .attr("width", W) .attr("height", SVG_H) .attr("viewBox", "0 0 " + W + " " + SVG_H) .style("display", "block"); const defs = svg.append("defs"); // Legend const legend = svg.append("g"); let lx = 0; services.forEach((s) => { const g = legend.append("g").attr("transform", "translate(" + lx + ",0)"); g.append("rect") .attr("x", 0).attr("y", 3) .attr("width", 12).attr("height", 12) .attr("fill", s.color) .attr("stroke", NB_GREY) .attr("stroke-width", 0.5); g.append("text") .attr("x", 18).attr("y", 13) .attr("font-size", 12.5) .attr("fill", NB_BLUE) .text(s.name); lx += 30 + s.name.length * 7.1; }); const arc = d3.arc().innerRadius(0); // Cards countries.forEach((c, i) => { const col = i % 2; const row = Math.floor(i / 2); const g = svg.append("g") .attr("transform", "translate(" + col * (BW + GAP) + "," + (LEGEND_H + row * (CH + ROW_GAP)) + ")"); g.append("text") .attr("x", PAD_X).attr("y", 16) .attr("font-size", 15) .attr("font-weight", 700) .attr("fill", NB_BLUE) .text(c.label); const f = byId.get(c.id); const proj = c.id === "840" ? d3.geoAlbersUsa() : d3.geoEqualEarth(); proj.fitSize([SHAPE_W, SHAPE_H], f); const geoPath = d3.geoPath(proj); const pathString = geoPath(f); const bounds = geoPath.bounds(f); const m = measure(pathString, SHAPE_W, SHAPE_H, c.shares); const center = m.center; const corners = [ [bounds[0][0], bounds[0][1]], [bounds[1][0], bounds[0][1]], [bounds[0][0], bounds[1][1]], [bounds[1][0], bounds[1][1]] ]; arc.outerRadius(d3.max(corners, (p) => Math.hypot(p[0] - center[0], p[1] - center[1])) + 8); const clipId = "nb-slice-" + c.id; defs.append("clipPath") .attr("id", clipId) .append("path") .attr("d", pathString); const shape = g.append("g").attr("transform", "translate(" + PAD_X + "," + PAD_Y + ")"); const clipped = shape.append("g").attr("clip-path", "url(#" + clipId + ")"); const wedges = clipped.append("g") .attr("transform", "translate(" + center[0] + "," + center[1] + ")"); services.forEach((s, j) => { if (c.shares[j] <= 0 || m.stops[j + 1] <= m.stops[j]) return; wedges.append("path") .attr("d", arc({ startAngle: m.stops[j], endAngle: m.stops[j + 1] })) .attr("fill", s.color) .attr("stroke", WHITE) .attr("stroke-width", 1.5); }); // Labels const moves = LABEL_MOVES[c.id] || {}; const marks = shape.append("g").style("pointer-events", "none"); const tips = [[0, -PAD_Y + 16], [46, -PAD_Y + 16], [92, -PAD_Y + 16]]; services.forEach((s, j) => { const pct = Math.round(c.shares[j]); if (pct <= 0) return; const text = pct + "%"; const mv = moves[s.name] || {}; const spot = m.spots[j]; const fits = spot && spot.clear >= text.length * 5.0 + 8; if (spot && (mv.mode === "inside" || (mv.mode !== "callout" && fits))) { marks.append("text") .attr("x", mv.x != null ? mv.x : spot.x + (mv.dx || 0)) .attr("y", (mv.y != null ? mv.y : spot.y + (mv.dy || 0)) + 6) .attr("text-anchor", mv.anchor || "middle") .attr("font-size", 16) .attr("fill", s.ink) .text(text); return; } const ray = m.rays[j]; if (!ray) return; const moved = mv.x != null || mv.y != null || mv.dx || mv.dy; let L = 16; let tx = center[0] + ray.ux * (ray.rOut + L); let ty = center[1] + ray.uy * (ray.rOut + L); if (!moved) { while (L < 84 && tips.some((p) => Math.hypot(p[0] - tx, p[1] - ty) < 26)) { L += 13; tx = center[0] + ray.ux * (ray.rOut + L); ty = center[1] + ray.uy * (ray.rOut + L); } } const sx = center[0] + ray.ux * ray.rMid; const sy = center[1] + ray.uy * ray.rMid; let px = tx + ray.ux * 5; let py = ty + (ray.uy > 0.15 ? 14 : ray.uy < -0.15 ? -4 : 6); let ex = tx; let ey = ty; if (moved) { px = (mv.x != null ? mv.x : px) + (mv.dx || 0); py = (mv.y != null ? mv.y : py) + (mv.dy || 0); const vx = px - sx; const vy = py - 5 - sy; const vlen = Math.max(1, Math.hypot(vx, vy)); ex = px - (vx / vlen) * 9; ey = py - 5 - (vy / vlen) * 9; } tips.push(moved ? [px, py] : [tx, ty]); marks.append("line") .attr("x1", sx).attr("y1", sy) .attr("x2", ex).attr("y2", ey) .attr("stroke", s.color) .attr("stroke-width", 1.6); marks.append("text") .attr("x", px).attr("y", py) .attr("text-anchor", mv.anchor || (moved ? (px - sx > 8 ? "start" : px - sx < -8 ? "end" : "middle") : (ray.ux > 0.15 ? "start" : ray.ux < -0.15 ? "end" : "middle"))) .attr("font-size", 15) .attr("fill", BLACK) .text(text); }); }); // Footer const foot = svg.append("g").attr("transform", "translate(0," + (SVG_H - 18) + ")"); foot.append("text") .attr("x", 0).attr("y", 0) .attr("font-size", 11) .attr("fill", NB_GREY) .text("Statcounter's AI chatbot category tracks these six assistants only. Grok and Meta AI are not measured. Labels are rounded to whole percent and may not sum to 100; slices under 0.5% are drawn but unlabelled."); foot.append("text") .attr("x", 0).attr("y", 14) .attr("font-size", 11) .attr("fill", NB_RED) .text("China rests on a thin sample: Statcounter reported DeepSeek at 89.3% share in China for May 2025, against 8% here."); root.appendChild(svg.node()); // Citation const source = document.createElement("div"); source.style.cssText = "font-size:11.5px;color:" + NB_RED + ";margin:14px 0 2px 0;"; source.textContent = "Source: Statcounter Global Stats, AI Chatbot Market Share, July 2026"; root.appendChild(source); const stamp = document.createElement("div"); stamp.style.cssText = "font-size:11.5px;font-weight:700;color:" + NB_RED + ";"; stamp.textContent = "North Branch Media"; root.appendChild(stamp); return root; }30:[] 2d:{"title":"Estimated LLM Market Share By Country, July 2026","cells":[{"id":0,"value":"# Estimated LLM Market Share By Country, July 2026","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}