Skip to main content
SimilarExport ZIP
100%

London

✓ Published1🌍 Public
MMatt Hagger
Last edited Sep 17, 2025
Created on Sep 17, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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
93% 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
83% match
Loading thumbnail…

London Airbnb Person Cap vs Price w/ Color & Interaction

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.

MMatt Hagger
80% 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
79% match
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
78% 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
Loading thumbnail…

Fork of ICE-6 (airbnb)

This interactive scatter plot displays Airbnb listings based on distance to the city center and metro distance, with point color encoding species (Adelie, Gentoo, or other). Built with D3 v5, it loads CSV data and maps values to an SVG canvas using `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` for axes. Each point uses `circle` elements with a fixed radius, while custom labels, tick styling, and explicit axis titles highlight the plot. The visualization emphasizes geographic proximity patterns against guest satisfaction metrics from the Airbnb dataset.

Pprathyusha-reddy-arch
75% match
Loading thumbnail…

Fork of Graph to london

This example visualizes London Underground stations as an interactive scatterplot, with each station positioned by its longitude and latitude coordinates from a JSON dataset. The visualization includes zoom and pan abilities, longitude and latitude axes, and station labels. The code uses D3 v4 with d3.scaleLinear for coordinate mapping, d3.axisBottom and d3.axisLeft for grid lines, and d3.zoom for user interaction. Stations are rendered as orange SVG circles on a white background, with a toggle button to switch to a map view.

Bbrett@cloudaccelerator.co
74% match