2b:null 2c:["$","title",null,{"children":"Airbnb listings in three cities | David | Observable"}] 31:T45f,viewof t = { function enrich(g, city, curr) { return g.features.map(d => ({ City: city, ...d.properties })); } const datasets = [ data_br_rio, data_uk_edinburgh, data_se_stockholm, ]; const earthArea = 510072000; const srSphere = 4 * Math.PI; const area = datasets.map(d => (d3.geoArea(d) / srSphere) * earthArea); const city_curr = [ 'Rio de Janeiro, BR', 'Edinburgh, UK', 'Stockholm, SE', ]; const m = d3.merge( datasets.map((d, i) => enrich(d, city_curr[i])) ); const ru = d3.flatRollup(m, city => ({ nl: d3.sum(city, (d) => d.n), nh: city.length, ap: d3.sum(city.map(d => d.n * d.avg_price)) / d3.sum(city, (d) => d.n), minp: d3.min(city.map(d => +d.min_price)), maxp: d3.max(city.map(d => +d.max_price)), }), c => c.City) .map((d, i) => ({ City: d[0], "Area (km²)": Math.round(area[i]) , "No. of Zones": d[1].nh, "No. of Listings": d[1].nl, "Avg. Price": Math.round(d[1].ap), "Min. Price": d[1].minp, "Max. Price": d[1].maxp, })); return Inputs.table(ru); }32:T769,--- ### Methodology **Source**: [Inside Airbnb](https://insideairbnb.com/get-the-data/), more specifically the summarised listings file and the GeoJSON for the neighbourhood shapes. Data downloaded on 2 November 2025 for Rio de Janeiro and Stockholm, 4 November 2025 for Edinburgh. **Processing**: Data transformed with `ogr2ogr` in two steps: First, tallied the number of listings by neighbourhood. Listings without a price were discarded. Second, merged the aggregated data with the GeoJSON file. Visualisation and table created with D3.js. **Coordinate Reference System**: - Rio de Janeiro, Brazil: WGS 84 (EPSG:4979). Lambert Conformal Conic Projection used, rotated by +43.45° and centred at 22.92°S. Extent: 22.75°S to 23.08°S, 43.10°W to 43.80°W. - Edinburgh, United Kingdom: WGS 84 (EPSG:4326). Lambert Conformal Conic Projection used, rotated by +3.29° and centred at 55.92°N. Extent: 55.81°N to 56.01°N, 3.08°W to 3.45°W. - Stockholm, Sweden: WGS 84 (EPSG:4326). Lambert Conformal Conic Projection used, rotated by -18.00° and centred at 59.32°N. Extent: 59.23°N to 59.44°N, 17.76°E to 18.20°E. **[Note 1]**: Average prices are based on the price for one night, in local currency. There are some extreme values—e.g., a property in Flamengo, Rio de Janeiro, where one single night is a whopping R$225,000. These values are set up by the property owners and might be input mistakes. **[Note 2]**: Bands are based on the data for each city, a quantile function, and a parameter that defines the number of tiles in the colour scale. **[Note 3]**: Area reported in the table was derived from the GeoJSON files. **[Note 4]**: The effects of Airbnb in local housing markets warrant a separate discussion. **[Note 5]**: Possible improvements include creating a dot plot similar to the one available at the Inside Airbnb or adding topographic data to the visual. 33:T1c09,function map(geojson, numBins, currency) { // Map setup const vw = width; /* This is already defined by Observable */ const vh = 800; const mapScaler = 0.10; const mapDims = [vw, vh]; const mapExtent = [ mapDims.map((d) => mapScaler * d) , mapDims.map((d) => (1.0 - mapScaler) * d) ]; const palette = d3.interpolateBlues; function convertDistanceToPixels(gjson, proj, dist) { const earthRadius = 6371 const bounds = d3.geoBounds(gjson); const arcLength = earthRadius * d3.geoDistance(...bounds); const boundsProj = bounds.map(d => proj(d)); const wProj2 = Math.pow(boundsProj[1][0] - boundsProj[0][0], 2); const hProj2 = Math.pow(boundsProj[0][1] - boundsProj[1][1], 2); const hyp = Math.sqrt(wProj2 + hProj2); return (hyp / arcLength) * dist; }; function drawDistanceScale(gjson, proj, dist, ctx) { const xe = convertDistanceToPixels(gjson, proj, dist); const xs = xe * (mapScaler); const ys = vh * (1 - 0.025); const g = ctx.append("g").attr("id", "dist-scale"); g.append("rect") .attr("x", xs) .attr("y", ys) .attr("width", xe) .attr("height", 2) .attr("fill", "#000"); g.append("text") .attr("x", xs) .attr("y", ys - 5) .attr("font-size", "12px") .attr("font-family", "sans-serif") .attr("text-anchor", "start") .text(`${dist} km`); }; function drawColorKey(ctx, colourScale, values, numBins) { const xe = 400; const h = 8; const xs = vw * (1 - 0.05) - xe; const ys = vh * (1 - 0.05); const [min, max] = d3.extent(values); const bounds = [min, ...colourScale.quantiles(), max]; const tile = xe / numBins; const g = ctx.append("g").attr("id", "color-key"); // Scale tiles d3.range(numBins).forEach(i => { g.append("rect") .attr("x", xs + (i * tile)) .attr("y", ys) .attr("width", tile) .attr("height", h) .attr("fill", colourScale(bounds[i])) .attr("stroke", "#000") .attr("stroke-width", 0.25) .attr('fill-opacity', '0.7'); }); // Scale ticks bounds.forEach((value, i) => { const x = xs + (i * tile); g.append("line") // Tick .attr("x1", x) .attr("x2", x) .attr("y1", ys) .attr("y2", ys + 2 * h) .attr("stroke", "#000") .attr("stroke-width", 0.75); g.append("text") // Value .attr("x", x) .attr("y", ys + h + 20) .attr("font-size", "10px") .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .attr("fill", "#000") .text(d3.format(",.0f")(value)); }); g.append("text") .text(`Number of Listings (${numBins} bands)`) .attr("x", xs + xe) .attr("y", ys - 8) .attr("font-size", "12px") .attr("font-family", "sans-serif") .attr("text-anchor", "end") .attr("fill", "#000"); } // Tooltip functions function showTooltip(data, element) { d3.select(element) .attr("stroke", "#000") .attr("stroke-width", 1.5) .attr('fill-opacity', '1'); tooltip .style("visibility", "visible") .html(`

${data.neighbourhood}

Listings (L): ${d3.format(",")(data.n)} [Band ${d3.format(",")(fq(data.n))} of ${numBins}]

Reviews (R): ${d3.format(",")(data.n_reviews)}

R/L: ${d3.format(",.0f")(data.n == 0 ? 0 : data.n_reviews / data.n)}

Avg. price: ${d3.format(",.0f")(data.avg_price)} ${currency}

Price range: [${d3.format(",.0f")(data.min_price)}, ${d3.format(",.0f")(data.max_price)}] ${currency}

`); } function updateTooltipPosition(event) { tooltip .style("top", (event.offsetY - 10) + "px") .style("left", (event.offsetX + 10) + "px"); } function hideTooltip(element) { d3.select(element) .attr("stroke", "#333") .attr("stroke-width", 0.5) .attr('fill-opacity', '0.7'); tooltip.style("visibility", "hidden"); } // Aux function to get the band (quantile) function fq(n) { const q = d3.scaleQuantile() .domain(data.map((d) => d.n)) .range(d3.range(1, numBins + 1)); return q(n); } // Unnesting GeoJSON to facilitate map creation const data = geojson.features.map(d => ({ geometry: d.geometry, neighbourhood: d.properties.neighbourhood, n: d.properties.n ? +d.properties.n : 0, // Number of listings n_reviews: d.properties.n_reviews ? +d.properties.n_reviews : 0, // Number of reviews avg_price: d.properties.avg_price ? +d.properties.avg_price : 0, // Average price min_price: d.properties.min_price ? +d.properties.min_price : 0, // Min. price max_price: d.properties.max_price ? +d.properties.max_price : 0 // Max. price })) .map(d => ({ ...d, value: d.n })); // Projection const [longCentre, latCentre] = d3.geoCentroid(geojson); const [projWest, projSouth, projEast, projNorth] = d3.geoBounds(geojson).flat(); const bounding_box = { type: "LineString", coordinates: [ [projWest, projSouth], [projEast, projNorth] ] }; const projection = d3.geoConicConformal() .parallels([projSouth, projNorth]) .rotate([-longCentre, 0]) .center([0, latCentre]) .fitExtent(mapExtent, bounding_box); const path = d3.geoPath(projection); // Colour scale setup const values = data.map(d => d.value); const colourScale = d3.scaleQuantile() .domain(values) .range(d3.quantize(palette, numBins)); // Create Visual let wrapper = d3.create("div") .style("height", `${vh}px`) .style("width", `${vw}px`); let svg = wrapper .append("svg") .attr("width", vw) .attr("height", vh); svg.append("rect") .attr("width", vw) .attr("height", vh) .attr("fill", "#fff"); // Tooltip const tooltip = wrapper .append("div") .style("position", "absolute") .style("visibility", "hidden") .style("z-index", "10") .style("padding", "8px 12px") .style("border-radius", "4px") .style("border", "1px solid #000") .style("background-color", "white") .style("font-family", "sans-serif") .style("font-size", "12px") .style("color", "black") .style("white-space", "nowrap"); // Annotations drawDistanceScale(geojson, projection, 5, svg); drawColorKey(svg, colourScale, values, numBins); // Map data.forEach((d) => { svg.append("path") .datum(d) .attr("d", path(d.geometry)) .attr("fill", colourScale(d.value)) .attr("stroke", "#333") .attr('fill-opacity', '0.7') .attr("stroke-width", 0.5) .style("cursor", "pointer") .on("mouseover", function(event, d) { showTooltip(d, this); }) .on("mousemove", function(event) { updateTooltipPosition(event); } ) .on("mouseout", function(event) { hideTooltip(this); }); }); return wrapper.node(); }34:[{"id":"53a20cfa2ca8c8a1b9726a3b4e92c287b68226e4b44e49cc58d249570bc1a306bea032a5bd6a1610ba92404d199682bbfd59ad57364a728cb4b01363498f406f","href":"https://static.observableusercontent.com/files/53a20cfa2ca8c8a1b9726a3b4e92c287b68226e4b44e49cc58d249570bc1a306bea032a5bd6a1610ba92404d199682bbfd59ad57364a728cb4b01363498f406f","name":"data_uk_edinburgh@6.geojson","type":"application/geo+json","lastModified":1762263026125.633,"size":402154},{"id":"7905a257e9bede1f767c6d9af722be0356af8932afb888c28a1d4d9df7591a30962625726a12136208408c4ead7dfae37573ff753cf31b6bee9e143168accc7d","href":"https://static.observableusercontent.com/files/7905a257e9bede1f767c6d9af722be0356af8932afb888c28a1d4d9df7591a30962625726a12136208408c4ead7dfae37573ff753cf31b6bee9e143168accc7d","name":"data_se_stockholm@6.geojson","type":"application/geo+json","lastModified":1762263018084.976,"size":66405},{"id":"1b6990be96cc6477bd045c8ffecac56ec0e533ac3dcebcaa09c5f9c27f84a3b82e8d5c532a3a31a25b1eee0a419751353bfa378206870b3a27f1ce985a01ad12","href":"https://static.observableusercontent.com/files/1b6990be96cc6477bd045c8ffecac56ec0e533ac3dcebcaa09c5f9c27f84a3b82e8d5c532a3a31a25b1eee0a419751353bfa378206870b3a27f1ce985a01ad12","name":"data_br_rio@6.geojson","type":"application/geo+json","lastModified":1762263012256.023,"size":3152789}] 2f:{"id":"824f027df428df2a","slug":null,"title":"Airbnb listings in three cities","thumbnail":"0ce2da6bd5972a58543c6c0ee6c925b40ad855a3badaaa292a57acf26355a21d","access_level":"public","create_time":"$D2025-11-02T12:28:44.056Z","update_time":"$D2025-11-05T13:01:20.669Z","view_time":null,"first_public_time":"$D2025-11-15T13:08:48.215Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"17aa4c6395b3809a","login":"souzapd","name":"David","avatar_url":"https://avatars-next.observableusercontent.com/fa90fca7fb710b82438e1ea27cbe405d0d2dbafff02f27b141d3837139e6115d","tier":"starter_2024"},"version":279,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"03f4ba1dc2b7bbd8","login":"spdv","name":"David","avatar_url":"https://avatars-next.observableusercontent.com/59cb90db7caa390b4827029f86f97e4d0370b170f7f1cfefa1f061ff2b4c5c97","tier":null}],"members":[{"type":"individual","id":"03f4ba1dc2b7bbd8","login":"spdv","name":"David","avatar_url":"https://avatars-next.observableusercontent.com/59cb90db7caa390b4827029f86f97e4d0370b170f7f1cfefa1f061ff2b4c5c97","tier":null,"role":"editor"},{"type":"team","id":"17aa4c6395b3809a","login":"souzapd","name":"David","avatar_url":"https://avatars-next.observableusercontent.com/fa90fca7fb710b82438e1ea27cbe405d0d2dbafff02f27b141d3837139e6115d","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"3594ffb3ac492160","slug":"spatial-data-vis","title":"Spatial Data Vis","owner":{"id":"17aa4c6395b3809a","login":"souzapd","name":"David"}},"type":"notebook","body":{"title":"Airbnb listings in three cities","cells":[{"id":0,"value":"# Airbnb listings in three cities\n\n*Interactive visuals for Rio de Janeiro, Edinburgh, and Stockholm. This notebook is best viewed on a computer.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"### Rio de Janeiro, Brazil","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"map(data_br_rio, 5, \"BRL\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"---\n### Edinburgh, United Kingdom","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"map(data_uk_edinburgh, 5, \"GBP\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"---\n### Stockholm, Sweden","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"map(data_se_stockholm, 5, \"SEK\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"----\n\n### Summary table\nDescriptive statistics for each city dataset. All financial values displayed in local currencies.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":194,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"data_br_rio = FileAttachment(\"data_br_rio@6.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"data_se_stockholm = FileAttachment(\"data_se_stockholm@6.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"data_uk_edinburgh = FileAttachment(\"data_uk_edinburgh@6.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"