2b:null 2c:["$","title",null,{"children":"Bubble Chart - Airbnb Average Occupancy Performance | Ekaette @MultiHyphs | Observable"}] 31:Tad2,html`

Airbnb Market Performance Dashboard

${chart}

Executive Summary

The analysis uses a global average occupancy rate of approximately 70% as a baseline to compare market performance. Rather than displaying raw occupancy alone, the visualization encodes each city’s performance as a deviation from this average, allowing for clearer relative comparison across regions. In this approach, a value of “0” represents the global average, while positive values indicate above-average performance and negative values indicate underperformance. This deviation is then mapped visually: color reflects direction (red = below average, green = above average) and circle size represents magnitude of difference from the average. By normalizing the data in this way, the visualization emphasizes opportunity and performance gaps more effectively than absolute values, making it easier to identify markets where Airbnb may be underpenetrated relative to demand.

This visualization highlights relative Airbnb occupancy performance across global markets, using color and size to surface both high-performing regions and areas of untapped opportunity. Markets like Paris and New York City emerge as strong performers, exceeding the global average and indicating established demand and effective platform utilization. In contrast, cities such as Achères and Port Harcourt fall below average, not necessarily signaling weak demand, but rather a gap in how effectively the Airbnb platform is being leveraged compared to local alternatives. For an Airbnb executive, these underperforming markets represent strategic opportunities: lower occupancy may reflect competition from regional platforms, differences in user behavior, or limited platform adoption rather than lack of travel demand. For example, Port Harcourt’s performance suggests an opportunity to increase engagement and preference for Airbnb over local booking channels through localized product features, trust-building, and market-specific partnerships. Similarly, Achères may benefit from improved visibility, pricing optimization, or host education to better align with platform best practices. This view enables leadership to maintain momentum in high-performing markets while prioritizing targeted strategies that increase platform share and usage in regions with strong underlying demand but lower Airbnb penetration.

`32:T16bd,chart = { const width = 1000; const height = 700; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("background", "#fbf1f4"); // ✅ lighter // --------------------------- // SHADOW (STRONGER) // --------------------------- const defs = svg.append("defs"); const shadow = defs.append("filter") .attr("id", "shadow") .attr("x", "-30%") .attr("y", "-30%") .attr("width", "160%") .attr("height", "160%"); shadow.append("feDropShadow") .attr("dx", 0) .attr("dy", 2.5) .attr("stdDeviation", 3.5) .attr("flood-color", "#000") .attr("flood-opacity", 0.25); // --------------------------- // GRADIENT LEGEND // --------------------------- const grad = defs.append("linearGradient") .attr("id", "legendGradient") .attr("x1", "0%") .attr("x2", "100%"); grad.append("stop").attr("offset", "0%").attr("stop-color", "#c81d25"); grad.append("stop").attr("offset", "50%").attr("stop-color", "#ffecec"); grad.append("stop").attr("offset", "100%").attr("stop-color", "#00897b"); const data = [ {city:"Paris", region:"France", occ:0.82}, {city:"Nice", region:"France", occ:0.76}, {city:"Normandy", region:"France", occ:0.68}, {city:"Achères", region:"France", occ:0.60}, {city:"Los Angeles", region:"California", occ:0.72}, {city:"San Diego", region:"California", occ:0.75}, {city:"Palm Springs", region:"California", occ:0.74}, {city:"San Francisco", region:"California", occ:0.78}, {city:"Coachella", region:"California", occ:0.77}, {city:"NYC", region:"New York", occ:0.80}, {city:"Long Island", region:"New York", occ:0.69}, {city:"New Jersey", region:"New York", occ:0.71}, {city:"Lagos", region:"Nigeria", occ:0.62}, {city:"Abuja", region:"Nigeria", occ:0.64}, {city:"Port Harcourt", region:"Nigeria", occ:0.61}, {city:"Nairobi", region:"East Africa", occ:0.65}, {city:"Zanzibar", region:"East Africa", occ:0.73}, {city:"Addis Ababa", region:"East Africa", occ:0.60}, {city:"Accra", region:"West Africa", occ:0.66}, {city:"Dakar", region:"West Africa", occ:0.68}, {city:"Abidjan", region:"West Africa", occ:0.65} ]; const avgOcc = d3.mean(data, d => d.occ); const color = d3.scaleLinear() .domain([-0.15, 0, 0.15]) .range(["#c81d25", "#ffecec", "#00897b"]); const regions = [...new Set(data.map(d => d.region))]; const clusterX = d3.scalePoint() .domain(regions) .range([100, width - 100]); const nodes = data.map(d => ({ ...d, delta: d.occ - avgOcc, r: Math.abs(d.occ - avgOcc) * 180 + 6, x: Math.random() * width, y: Math.random() * height })); // --------------------------- // CIRCLES // --------------------------- const circles = svg.selectAll("circle") .data(nodes) .join("circle") .attr("r", 0) .attr("fill", d => color(d.delta)) .attr("opacity", 0.9) .attr("filter", "url(#shadow)"); // --------------------------- // LABEL NODES (SEPARATE SYSTEM) // --------------------------- const labelNodes = nodes.map(d => ({ ...d, lx: d.x, ly: d.y + d.r + 14 })); const labels = svg.selectAll("text.label") .data(labelNodes) .join("text") .attr("class", "label") .text(d => d.city) .attr("fill", "#333") .attr("font-weight", "bold") .attr("font-size", 10) .attr("text-anchor", "middle") .style("opacity", 0); // --------------------------- // MAIN SIMULATION // --------------------------- const simulation = d3.forceSimulation(nodes) .force("collision", d3.forceCollide(d => d.r + 12)) .force("x", d3.forceX(width / 2).strength(0.03)) .force("y", d3.forceY(height / 2).strength(0.03)) .on("tick", ticked); // 🔥 LABEL COLLISION SIMULATION (KEY FIX) const labelSim = d3.forceSimulation(labelNodes) .force("collision", d3.forceCollide(18)) // controls label spacing .force("x", d3.forceX(d => d.x).strength(0.5)) .force("y", d3.forceY(d => d.y + d.r + 14).strength(0.5)) .stop(); function ticked() { circles .attr("cx", d => d.x) .attr("cy", d => d.y); // update label anchor labelNodes.forEach((d, i) => { d.x = nodes[i].x; d.y = nodes[i].y; }); labelSim.tick(3); // run mini layout labels .attr("x", d => d.x) .attr("y", d => d.y + d.r + 14); } circles.transition() .duration(1200) .attr("r", d => d.r); labels.transition() .delay(800) .duration(800) .style("opacity", 1); setTimeout(() => { simulation .force("x", d3.forceX(d => clusterX(d.region)).strength(0.35)) .force("y", d3.forceY(height / 2).strength(0.1)) .alpha(1) .restart(); }, 2500); // --------------------------- // TITLE + LEGEND TEXT // --------------------------- svg.append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .attr("font-size", 20) .attr("font-weight", "bold") .text("Airbnb Occupancy Performance"); svg.append("text") .attr("x", width / 2) .attr("y", 60) .attr("text-anchor", "middle") .attr("font-size", 12) .text("Red = underperforming (higher opportunity)"); svg.append("text") .attr("x", width / 2) .attr("y", 75) .attr("text-anchor", "middle") .attr("font-size", 12) .text("Green = high-performing markets"); svg.append("text") .attr("x", width / 2) .attr("y", 90) .attr("text-anchor", "middle") .attr("font-size", 12) .text("Circle size = distance from average"); svg.append("rect") .attr("x", width / 2 - 120) .attr("y", 105) .attr("width", 240) .attr("height", 12) .attr("rx", 6) .attr("fill", "url(#legendGradient)"); return svg.node(); }33:Tdd3,table = { const data = [ {city:"Paris", region:"France", listings:65000, occupied:53300, occ:0.82}, {city:"Nice", region:"France", listings:18000, occupied:13680, occ:0.76}, {city:"Normandy", region:"France", listings:12000, occupied:8160, occ:0.68}, {city:"Achères", region:"France", listings:900, occupied:540, occ:0.60}, {city:"Los Angeles", region:"California", listings:45000, occupied:32400, occ:0.72}, {city:"San Diego", region:"California", listings:28000, occupied:21000, occ:0.75}, {city:"Palm Springs", region:"California", listings:14000, occupied:10360, occ:0.74}, {city:"San Francisco", region:"California", listings:32000, occupied:24960, occ:0.78}, {city:"Coachella", region:"California", listings:6500, occupied:5005, occ:0.77}, {city:"NYC", region:"New York", listings:50000, occupied:40000, occ:0.80}, {city:"Long Island", region:"New York", listings:9000, occupied:6210, occ:0.69}, {city:"New Jersey", region:"New York", listings:11000, occupied:7810, occ:0.71}, {city:"Lagos", region:"Nigeria", listings:12000, occupied:7440, occ:0.62}, {city:"Abuja", region:"Nigeria", listings:7500, occupied:4800, occ:0.64}, {city:"Port Harcourt", region:"Nigeria", listings:5500, occupied:3355, occ:0.61}, {city:"Nairobi", region:"East Africa", listings:9500, occupied:6175, occ:0.65}, {city:"Zanzibar", region:"East Africa", listings:7200, occupied:5256, occ:0.73}, {city:"Addis Ababa", region:"East Africa", listings:5800, occupied:3480, occ:0.60}, {city:"Accra", region:"West Africa", listings:8500, occupied:5610, occ:0.66}, {city:"Dakar", region:"West Africa", listings:6000, occupied:4080, occ:0.68}, {city:"Abidjan", region:"West Africa", listings:7000, occupied:4550, occ:0.65} ]; const avg = d3.mean(data, d => d.occ); const color = d3.scaleLinear() .domain([-0.15, 0, 0.15]) .range(["#f97170", "#ffffff", "#7fffd4"]); const table = d3.create("table") .style("border-collapse", "collapse") .style("width", "100%") .style("font-family", "Arial, sans-serif") .style("background", "#fbf1f4") .style("border-radius", "12px") .style("overflow", "hidden"); const thead = table.append("thead"); thead.append("tr") .selectAll("th") .data(["City","Region","Listings","Occupied Units","Occupancy %"]) .join("th") .text(d => d) .style("padding", "10px") .style("text-align", "left") .style("font-size", "13px") .style("color", "#333") .style("border-bottom", "2px solid #eee"); const tbody = table.append("tbody"); const rows = tbody.selectAll("tr") .data(data) .join("tr") .style("transition", "background 0.2s"); rows.on("mouseover", function() { d3.select(this).style("background", "#f6e6ea"); }).on("mouseout", function() { d3.select(this).style("background", null); }); rows.selectAll("td") .data(d => [ d.city, d.region, d3.format(",")(d.listings), d3.format(",")(d.occupied), d ]) .join("td") .style("padding", "10px") .style("font-size", "12px") .style("color", "#333") .style("text-align", (d,i) => i >= 2 ? "right" : "left") .style("font-weight", (d,i) => i === 0 ? "bold" : "normal") .style("background", (d,i) => { if (i !== 4) return null; const delta = d.occ - avg; return color(delta); }) .text((d,i) => { if (i === 4) return (d.occ * 100).toFixed(0) + "%"; return d; }); return table.node(); }34:T4e0,// // STOP ANIMATION IF TOGGLE IS OFF // STEP 1: Below this code function draw(time) { you will add if(!playing) return so it becomes ____________________________________ function draw(time) { if (!playing) return; ____________________________________ // STEP 2: Close this draw function with this: be sure to include 2 final brackets ____________________________________ if (playing) { requestAnimationFrame(draw); } } ____________________________________ // FINAL VERSION: It will look like: ____________________________________ function draw(time) { if (!playing) return; // animation code here // CONTINUE LOOP if (playing) { requestAnimationFrame(draw); } } // START LOOP requestAnimationFrame(draw); ____________________________________ //Note: there will be a final requestAnimationFrame(draw); at the bottom leave that unchanged //MORE THAN 1 ANIMATION ON THE PAGE: Update the draw function in 3 places. //Step 1: change draw to drawxyz and fix it in the cunction and in the requestanimation frame sections. 3 total places. function draw3(time) { if (!playing) return; // animation 3 code if (playing) { requestAnimationFrame(draw3); } } requestAnimationFrame(draw3);35:[] 2f:{"id":"e58ef24ed9374fc1","slug":null,"title":"Bubble Chart - Airbnb Average Occupancy Performance","thumbnail":"dadb70751232ec083b5237422a27a50719b08fb5b45aba9d3b0e4f7e23414a92","access_level":"unlisted","create_time":"$D2026-05-26T16:47:39.724Z","update_time":"$D2026-05-27T15:10:11.456Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"723694178de5f42f","login":"ekaette-multihyphs","name":"Ekaette @MultiHyphs","avatar_url":"https://avatars-next.observableusercontent.com/382dfa7c6aeaf8a2119aff47cd626956b56e24b56f67f5fcac9f83b82d24c18b","tier":"starter_2024"},"version":76,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"801a54980e684d7c","login":"ekaettes","name":"Ekaette @MultiHyphs","avatar_url":"https://avatars-next.observableusercontent.com/382dfa7c6aeaf8a2119aff47cd626956b56e24b56f67f5fcac9f83b82d24c18b","tier":null}],"members":[{"type":"team","id":"723694178de5f42f","login":"ekaette-multihyphs","name":"Ekaette @MultiHyphs","avatar_url":"https://avatars-next.observableusercontent.com/382dfa7c6aeaf8a2119aff47cd626956b56e24b56f67f5fcac9f83b82d24c18b","tier":"starter_2024","role":"editor"},{"type":"individual","id":"801a54980e684d7c","login":"ekaettes","name":"Ekaette @MultiHyphs","avatar_url":"https://avatars-next.observableusercontent.com/382dfa7c6aeaf8a2119aff47cd626956b56e24b56f67f5fcac9f83b82d24c18b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Bubble Chart - Airbnb Average Occupancy Performance","cells":[{"id":0,"value":"# Bubble Chart - Airbnb Average Occupancy Performance","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"//\n// GLOBAL ANIMATION TOGGLE\n//\n// Turn OFF to pause all animations\n// and improve notebook performance.\n//\n\nviewof playing = Inputs.toggle({\n label: \"Animate\",\n value: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"//\n// DUPLICATE CONTROL BUTTON\n//\n// This controls the SAME animation state\n// as the main toggle above.\n//\n\nInputs.bind(\n Inputs.toggle({ label: \"Animate\" }),\n viewof playing\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$34","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"draw","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"