Average rent by London borough, 2012 and 2013

100%

Average rent by London borough, 2012 and 2013

✓ Published0🌍 Public

Last edited Jan 11, 2017

Created on Jan 11, 2017

This interactive choropleth maps average monthly private rents across London boroughs for 2012 and 2013, with a dropdown menu to switch between the two years and instantly recolor the map. It uses D3 v3 with a Mercator projection, `d3.geo.path` for rendering SVG paths from GeoJSON boundary data, and `d3.scale.quantize` with ColorBrewer greys to encode rental values. Hovering highlights a borough and shows a tooltip with its name and price. The rent data comes from the London Datastore, matching borough names to the map features.

AI-generated description

Pick a year, and the rental data as well as the map colours are updated.

##Sources:

Rental data London Datastore (london.gov.uk): <a href="http://data.london.gov.uk/datastore/package/average-private-rents-borough">Average Private Rents, Borough</a>. Select gross monthly data - 12 months to Q3 2012 and 2013 - is used.

Map data londonBoroughs.json is based on <a href="https://github.com/john-sandall/geocouncil">John Sandall's</a> maps of UK Council boundaries.

Colors Greys were generated by <a href="colorbrewer2.org/">Cynthia Brewer's Color Brewer</a> project.

Inspired by this post by <a href="http://www.sjwhitworth.com/visualising-london-data-with-d3-js-and-python/">Stephen Whitworth</a> and borrowing his application of a center to the map projection.

forked from <a href='http://bl.ocks.org/radiocontrolled/'>radiocontrolled</a>'s block: <a href='http://bl.ocks.org/radiocontrolled/8198144'>Average private rents, London 2012 and 2013</a>

mit Licensed

Similar vizzes

Loading thumbnail…

London Borough Profiles

This visualization displays employment trends across London boroughs from the London Borough Profiles dataset, with each borough shown as a separate small-multiple area chart. The code uses d3.csv to load data, d3.nest to group by borough, and d3.time.scale and d3.scale.linear for axes. Each SVG chart renders an area and line path using d3.svg.area and d3.svg.line, with text labels identifying each borough.

SSassOnTheRoad

70% match

Loading thumbnail…

Population Density of London Boroughs

The scatterplot shows the population density of London boroughs by plotting each borough's population (x-axis) against its area in hectares (y-axis) as animated circles that drop into place. The visualization uses D3 v3 to read the CSV data, applies linear scales for both axes, and employs the `d3.csv` parser and `d3.svg.axis` for the chart. Each circle is rendered as an SVG element, with a hover effect that turns it CornflowerBlue. Data is sourced from data.london.gov.uk, and the animation uses sequential delays to drop the circles over two seconds.

SSassOnTheRoad

67% match

Loading thumbnail…

London Borough Profiles Small

This bar chart visualizes population estimates for London’s boroughs using a simple horizontal layout, with each bar’s width proportional to its population value. The population data is loaded from a local CSV file via `d3.csv`, then sorted and scaled using `d3.scale.linear` to map values to pixel widths. Bars are rendered as styled `div` elements inside a `.chart` container, with counts displayed as text labels. The example uses D3 v3 and relies directly on the CSV’s `pop` field, sourced from the London Borough Profiles dataset under the UK Open Government Licence.

SSassOnTheRoad

67% 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

67% match

Loading thumbnail…

Child poverty by London authority

A horizontal bar chart shows child poverty rates after housing costs across London’s 33 local authorities, sorted from lowest (Richmond upon Thames at 13.9%) to highest (Tower Hamlets at 43.5%). The visualization uses D3 v4 with SVG rendering, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis categories. Each bar is a `rect` element whose width maps to the percentage value, with hover effects that turn bars orangered and display a tooltip showing the borough and exact percentage. The data comes from the November 2016 End Child Poverty report.

663anp3ca

67% 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

67% 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

66% match

Loading thumbnail…

UK House Price Map

A choropleth map of the UK displays average house prices by local authority district in 2017, colored to show price variation. Built with D3.js, it uses TopoJSON geographic data and an SVG projection for rendering. Users can click a district to zoom in and display its name and average price, with animated transitions and pan/zoom controls.

LLaurafharding

66% match