Public
Edited
Dec 18, 2023
Insert cell
Insert cell
view = require("geoverview@1.2").then((f) => f.view)
Insert cell
shp = require("https://unpkg.com/shpjs@latest/dist/shp.js")
Insert cell
archive = FileAttachment("LSOA_CambsPet_Dec_2011_Generalised_ClippedEW_0.zip").arrayBuffer()
Insert cell
cambs = shp(archive)
Insert cell
view(cambs, { width: 700, height: 350 })
Insert cell
justcambs = ({type: "FeatureCollection", features : cambs.features.filter((o) => o.properties.lsoa01nm.startsWith("Cambridge "))})
Insert cell
view(justcambs, { width: 700, height: 350 })
Insert cell
justcambspoints = justcambs.features.map((o) => [(o.geometry.bbox[0] + o.geometry.bbox[2])/2, (o.geometry.bbox[1] + o.geometry.bbox[2])/2]);
Insert cell
data = [[0.1491406826313006,-52.210194425272334],[0.16451851163514516,-52.21642251005242],[0.15807828527921003,-52.21211951975248],[0.16264913196993291,-52.205990014982206],[0.17087044995168735,-52.20388973825174],[0.16832193148148683,-52.21078217540738],[0.11175388195132382,-52.21284170444201],[0.11647341297842154,-52.205916092465515],[0.10933681608960227,-52.2228473818451],[0.11637569556310298,-52.22618078812367],[0.11471809605470829,-52.21799007615119],[0.12141237996193441,-52.221886891754394],[0.10307569100759406,-52.21876731473414],[0.0957393386503388,-52.21475899931432],[0.10296781175842659,-52.21208016766879],[0.10775487365513528,-52.20715045912816],[0.17292529889829772,-52.18433060151393],[0.16765490375531494,-52.179159767026064],[0.16273380232320778,-52.184899705891944],[0.17299365087272991,-52.19739455400996],[0.17586423448502006,-52.19084534023108],[0.16718055333527693,-52.19146531804057],[0.14900092574148321,-52.19199511046581],[0.13303468037863123,-52.18615917796486],[0.1584046567905063,-52.19209809406936],[0.14321395087224936,-52.18607525428178],[0.15364080691268825,-52.185475954876786],[0.15549149631731624,-52.22652588499163],[0.1588797150885321,-52.220766395837856],[0.1418502971901183,-52.21733481883134],[0.14887720295815787,-52.222001004886806],[0.1327573017767475,-52.229564510481204],[0.1480498516841887,-52.22821535230421],[0.1397663705501101,-52.2238405338264],[0.1286847659264965,-52.22452885463795],[0.124293762703785,-52.22917958591846],[0.1404284574173451,-52.22941371718376],[0.12520102509824527,-52.20347823686488],[0.09604812932318117,-52.20713221245818],[0.11535141538804511,-52.19240670479426],[0.10448687414291347,-52.20245581396394],[0.13038359790298382,-52.19279327179811],[0.12296839696191847,-52.1968181044437],[0.1365467500494177,-52.20462415169145],[0.14579416101637405,-52.20420158024153],[0.1331496570300953,-52.19890934662383],[0.14754783003858846,-52.18016176757191],[0.13159842169534358,-52.173825729140106],[0.15638758794118646,-52.177781514555186],[0.1432478205225426,-52.17493278410852],[0.13655874606709578,-52.180009745123094],[0.1548829041285174,-52.20474019685318],[0.143158855398977,-52.19822356012689],[0.1630780423617269,-52.19880973978998],[0.1531558442730087,-52.198338868285305],[0.13931829422976544,-52.19231257163479],[0.11609241893757172,-52.178037043968395],[0.12127958675931391,-52.172304182750445],[0.1236627355993343,-52.18838017066149],[0.132900508319598,-52.22032562038085],[0.1247799534639324,-52.216527166582935],[0.13325610700383023,-52.214622154596796],[0.12112621902679897,-52.21115969207147],[0.12997544843964423,-52.20914402414995],[0.1404244708575386,-52.210748768551824],[0.11570492642498546,-52.18503091183752],[0.12560488940346595,-52.1804973625034],[0.11381571772703121,-52.199631343167155],[0.1510444442792919,-52.216208001970415]]
Insert cell
{
const voronoi = d3.Delaunay.from(data).voronoi([
0,
0,
data.w,
data.h
]);
const clipRegion = bounds(5, 18);
const r = new Renderer(500, 500, "svg");

[...voronoi.cellPolygons()].forEach((poly, i) => {
const clipped = clip(clipRegion, [poly])[0];
clipped ? r.fill(data.clr(data.sPoints[i][2])).polygon(clipped) : r;
});
r.fill("black").stroke().points(data);
return r.render();
}
Insert cell
import {Renderer} from "@jwolondon/renderer"
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