London Airbnb Person Cap vs Price w/ Color & Interaction

100%

London Airbnb Person Cap vs Price w/ Color & Interaction

✓ Published1🌍 Public

Last edited Oct 29, 2025

Created on Oct 29, 2025

Forked from London Airbnb Person Cap vs Price w/ Color

This interactive scatterplot visualization explores London Airbnb pricing by person capacity, with user-selectable X and Y axes from multiple numeric property columns. The chart renders a density heatmap background using d3.scaleLinear, d3.scaleBand, and d3.scaleLog, computing per-pixel point density across the plot area and coloring regions from blue to yellow based on concentration. A yellow-to-blue gradient legend displays density levels with a red line marking the average. Users can filter data by minimum value via a range slider tied to any selected numeric property, with all controls updating the React-rendered visualization in real time.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

London Airbnb Person Cap vs Price w/ Color

This visualization uses a square-binned density plot to show the relationship between Airbnb listing person capacity and price in London, with color intensity (blue to yellow) representing the density of listings at each price level for each capacity. Red horizontal lines indicate the average price for each capacity group. The chart is rendered using D3.js v7 within a React 19 application, employing `scaleLog` for the price axis, `scaleBand` for capacity, and a custom pixel-by-pixel density calculation with `interpolateRgb` for the color scale.

MMatt Hagger

94% match

Loading thumbnail…

Fork of London Airbnb Person Cap vs Price w/ Color & Interaction Week 11

This interactive scatterplot explores London Airbnb prices across various attributes, showing density distributions through a blue-to-yellow gradient with red average markers. Users can select which numeric property appears on the x- and y-axes, filter listings by minimum values for a chosen metric, and toggle between weekdays and weekends across multiple European cities. Built with React and D3 v7, it uses `scaleLog` for the y-axis, density calculations in pixel space, and dynamically loads CSV data from GitHub repositories.

MMatt Hagger

89% match

Loading thumbnail…

London Airbnb Person Cap vs Price

This visualization shows the relationship between Airbnb listing person capacity and nightly price in London, using a candlestick-style chart where each capacity level displays the minimum, average, and maximum price. The code groups listings by person_capacity, calculates price statistics, and renders whiskers for the range, steelblue boxes for min-max, and red average lines using a log-scaled y-axis. Built with React and D3 v7, it uses `scaleBand` for the x-axis, `scaleLog` for the y-axis, and `select` joins to update SVG elements. The data comes from a CSV file containing London Airbnb listings with 19 variables.

MMatt Hagger

89% match

Loading thumbnail…

Fork of London Airbnb Person Cap vs Price

A fork of the London Airbnb dataset visualizes the relationship between person capacity and nightly price. Each listing appears as a jittered dot, grouped by capacity, with a red line marking the mean price for each group. The y-axis uses a logarithmic scale to accommodate a wide price range. Built with React and D3 v7, it employs `scaleBand`, `scaleLog`, and `randomNormal` to position points and compute averages, demonstrating a common approach for comparing distributions across categorical bins.

MMatt Hagger

83% match

Loading thumbnail…

Airbnb Viz Final

This interactive scatterplot analyzes Airbnb listings, showing the relationship between any two selectable property attributes, such as price against person capacity. A slider filters data by a chosen attribute's minimum value, and an overlaid density distribution reveals the concentration of data points along the y-axis. The visualization is built with React and D3 v7, dynamically loading CSV data for selected cities and weekdays directly from a GitHub repository. Users can compare multiple European cities, switch between weekdays and weekends, and adjust the density calculation between global and per-column modes.

MMatt Hagger

81% match

Loading thumbnail…

London

This scatter plot maps Airbnb listings across London by latitude and longitude, coloring each point red or green to distinguish between non-superhosts and superhosts. The visualization uses D3’s `scaleLinear` for axis scaling and `selectAll` to render circles, with React managing the data loading and state. Axis labels and ticks are added via custom functions (`renderAxis`, `renderAxisLabels`), while the underlying dataset includes property attributes like price and room type for contextual analysis.

MMatt Hagger

80% match

Loading thumbnail…

London

A scatterplot maps Airbnb listings across London by latitude and longitude, with each point colored from red to green based on a normalized attraction index. The React app loads CSV data and passes it to a D3 visualization that renders axes, labels, and circles. D3's `scaleLinear` and `extent` set the geographic scales, while a custom color interpolation blends hex values between minimum and maximum index values.

MMatt Hagger

80% match

Loading thumbnail…

Airbnb Viz Week 12

This interactive scatterplot visualization compares Airbnb listing attributes across selectable European cities and weekdays/weekends. Users can choose which numeric attributes to map to the X and Y axes—with the Y axis always displayed on a logarithmic scale—and apply a minimum-value filter via a slider. The visualization renders density-based color gradients within vertical bands for each X-axis category, using D3.js (d3.scaleLinear, d3.scaleBand, d3.scaleLog) for scaling and axis rendering, and React for the interface controls. City-specific CSV data is loaded from GitHub, and the density calculation uses a 5% window of the Y-axis range to aggregate point distributions.

MMatt Hagger

77% match