Published
Edited
Feb 24, 2021
Insert cell
Insert cell
Insert cell
// geometry plus district/borough props
postcodeDistricts = FileAttachment("london-postcode-districts.json").json()
Insert cell
Insert cell
// data endpoint
arcService = {
const res = await fetch (`https://maps.london.gov.uk/gla/rest/services/apps/RentsMap_service_01/MapServer/?f=json`)
return await res.json()
}
Insert cell
// query and filter the property types
propertyTypes = arcService.layers.filter(el => el.name !== 'Postcode_Districts')
Insert cell
Insert cell
// get data for each of the property type layers
propertiesGeojsonFiles = {
let propertiesJSON = []
for(let i=0; i<propertyTypes.length; i++) {
const res = await fetch(baseUrl(propertyTypes[i].id))
const lyr = await res.json()
propertiesJSON.push(lyr)
}
return propertiesJSON
}
Insert cell
Insert cell
Insert cell
objectFilter(postcodes.features[0].properties)
Insert cell
objectFilter = (obj) => Object.entries(obj)
.filter(([k, v]) => !isNumeric(v))
.reduce((acc, [k, v]) => ({...acc, [k]: v}), {})
Insert cell
// APPLY DATA FROM OTHER GEOJSON DATA TO ONE SET OF GEOMETRY MATCHING BY 'DISTRICT' PROPERTY
postcodes = {
const pcd = JSON.parse(JSON.stringify(postcodeDistricts)) // clone postcodeDistricts as it is mutable
const {features} = pcd
const properties = ['district', 'borough', 'pc_lower', 'pc_median', 'pc_upper', 'borough_lower', 'borough_median', 'borough_upper', 'london_lower', 'london_median', 'london_upper']
features.forEach(feature => propertiesGeojsonFiles.forEach(json => {
// populate wanted properties across from one geojson
const match = json.features.filter(
property =>
property.properties.district.replace('*', '') === feature.properties.district
)
if (match.length === 1) {
properties.forEach(prop => feature.properties[match[0].properties.category.replace('rooms','').replace('room','')+'-'+prop] = isNumeric(match[0].properties[prop]) ? parseInt(match[0].properties[prop]) : match[0].properties[prop] )
}
// delete unwanted properties
Object.keys(feature.properties).forEach(prop => {
if (prop.indexOf('-district') !== -1 ||
( prop.indexOf('-borough') !== -1) &&
( prop.indexOf('-borough_') === -1) ) {
delete feature.properties[prop]
}
})
}))
// clockwise polygon rule
// return rewind(pcd, true)
return pcd
}
Insert cell
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
diff = require('https://bundle.run/json-diff@0.5.4')
Insert cell
import {requireFromGithub} from "@bumbeishvili/fetcher"
Insert cell
rewind = requireFromGithub("https://raw.githubusercontent.com/mapbox/geojson-rewind/46b4f98396bf1ef29c522920a3ef0a91a990b939/geojson-rewind.js","rewind")
Insert cell
L = require('leaflet@1.3.2')
Insert cell
html`<link href='${resolve('leaflet@1.3.2/dist/leaflet.css')}' rel='stylesheet' />`
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more