44:["$","title",null,{"children":"Untitled | Anna Elizabeth Morgan | Observable"}] 4c:T1cc6,permitMap = { const START_YEAR = 2017; const SCROLL_HEIGHT = "250vh"; const STICKY_TOP = 0; const bounds = { west: -118.682780103, east: -117.941894959, south: 33.893219684, north: 34.349518476 }; const startDate = new Date(Date.UTC(START_YEAR, 0, 1)); const parseDate = d3.utcParse("%Y-%m-%d"); const number = value => { const text = String(value ?? "") .replaceAll(",", "") .trim(); return text === "" ? NaN : Number(text); }; const types = [ "ADU", "SFD", "SFA", "2 to 4", "5+", "MH", "Other" ]; const typeNames = { ADU: "Accessory dwelling unit", SFD: "Single-family detached", SFA: "Single-family attached", "2 to 4": "2–4 units", "5+": "5+ units", MH: "Manufactured / mobile home", Other: "Other" }; const color = d3.scaleOrdinal() .domain(types) .range(d3.schemeTableau10); const records = permitRows .filter(d => String(d.JURIS_NAME).trim().toUpperCase() === "LOS ANGELES" ) .map(d => { const type = String(d.UNIT_CAT ?? "").trim(); return { date: d.BP_ISSUE_DT1 instanceof Date ? d.BP_ISSUE_DT1 : parseDate(String(d.BP_ISSUE_DT1 ?? "").trim()), longitude: number(d.LONGITUDE), latitude: number(d.LATITUDE), units: number(d.NO_BUILDING_PERMITS), type: types.includes(type) ? type : "Other" }; }) .filter(d => d.date && Number.isFinite(+d.date) && d.date >= startDate && Number.isFinite(d.units) && d.units > 0 && Number.isFinite(d.longitude) && Number.isFinite(d.latitude) && d.longitude >= bounds.west && d.longitude <= bounds.east && d.latitude >= bounds.south && d.latitude <= bounds.north ) .sort((a, b) => a.date - b.date); if (!records.length) { throw new Error("No matching Los Angeles permit records."); } const image = await d3.image("https://static.observableusercontent.com/files/809ef23725ca1c0a9ab3458a7c1d67b9ee2ca9fcb0bb45654dadc5b4f900a69747c80cbbad37a8c52bddabe924ac3ae898c0974540e7c26c29f5211a92c723b7"); const mapWidth = 2000; const mapHeight = mapWidth * image.naturalHeight / image.naturalWidth; const x = d3.scaleLinear() .domain([bounds.west, bounds.east]) .range([0, mapWidth]); const y = d3.scaleLinear() .domain([bounds.south, bounds.north]) .range([mapHeight, 0]); const radius = d3.scaleSqrt() .domain([1, 100]) .range([1.5, 6]) .clamp(true); const points = records.map(d => ({ ...d, px: x(d.longitude), py: y(d.latitude), radius: radius(d.units) })); const timestamps = points.map(d => +d.date); const unitTotals = [0]; for (const point of points) { unitTotals.push( unitTotals[unitTotals.length - 1] + point.units ); } const firstMonth = startDate; const lastMonth = d3.utcMonth.floor( points[points.length - 1].date ); const monthCount = d3.utcMonth.count(firstMonth, lastMonth); const PANEL_HEIGHT = "55vh"; const SCROLL_TRAVEL = "15vh"; const section = d3.create("div") .style("position", "relative") .style("height", "250vh") .style("width", "100%") .style("font-family", "Arial, sans-serif"); const sticky = section.append("div") .style("position", "sticky") .style("top", "0") .style("height", "100vh") .style("display", "flex") .style("flex-direction", "column") .style("background", "white"); const map = sticky.append("div") .style("position", "relative") .style("width", "100%") .style("height", "100vh") .style("flex", "0 0 auto") .style("overflow", "hidden"); Object.assign(image.style, { display: "block", position: "absolute", inset: "0", width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top" }); map.node().appendChild(image); const pixelRatio = Math.min(window.devicePixelRatio || 1, 2); const canvas = map.append("canvas") .attr("width", Math.round(mapWidth * pixelRatio)) .attr("height", Math.round(mapHeight * pixelRatio)) .style("position", "absolute") .style("inset", "0") .style("width", "100%") .style("height", "100%") .style("object-fit", "cover") .style("object-position", "center top") .style("pointer-events", "none"); const context = canvas.node().getContext("2d"); context.setTransform( canvas.node().width / mapWidth, 0, 0, canvas.node().height / mapHeight, 0, 0 ); const footer = sticky.append("div") .style("flex", "0 0 auto") .style("padding", "8px 16px") .style("background", "white"); const legend = footer.append("div") .style("display", "flex") .style("flex-wrap", "wrap") .style("gap", "7px 16px") .style("font-size", "12px"); const presentTypes = new Set(points.map(d => d.type)); const items = legend.selectAll("div") .data(types.filter(type => presentTypes.has(type))) .join("div") .style("display", "flex") .style("align-items", "center") .style("gap", "5px"); items.append("span") .style("width", "10px") .style("height", "10px") .style("border-radius", "50%") .style("background", type => color(type)); items.append("span") .text(type => typeNames[type]); footer.append("div") .style("font-size", "11px") .style("color", "#777") .style("margin-top", "6px") .text( "Cumulative records within the image bounds. " + "Dot size reflects reported permitted units. " + "Basemap: © OpenStreetMap contributors, © CARTO." ); let drawnCount = 0; let selectedIndex = -1; let frameId = null; let disposed = false; function render(index) { if (index === selectedIndex) return; selectedIndex = index; const month = d3.utcMonth.offset(firstMonth, index); const cutoff = d3.utcMonth.offset(month, 1); const count = d3.bisectLeft(timestamps, +cutoff); if (count < drawnCount) { context.clearRect(0, 0, mapWidth, mapHeight); drawnCount = 0; } context.globalAlpha = 0.65; for (let i = drawnCount; i < count; i++) { const point = points[i]; context.beginPath(); context.arc( point.px, point.py, point.radius, 0, Math.PI * 2 ); context.fillStyle = color(point.type); context.fill(); } drawnCount = count; } function updateFromScroll() { frameId = null; if (disposed || !section.node().isConnected) return; const rect = section.node().getBoundingClientRect(); const distance = section.node().offsetHeight - sticky.node().offsetHeight; const progress = distance > 0 ? Math.max(0, Math.min(1, -rect.top / distance)) : 0; render(Math.round(progress * monthCount)); } function scheduleUpdate() { if (!disposed && frameId === null) { frameId = requestAnimationFrame(updateFromScroll); } } window.addEventListener("scroll", scheduleUpdate, { passive: true }); window.addEventListener("resize", scheduleUpdate); render(0); scheduleUpdate(); invalidation.then(() => { disposed = true; window.removeEventListener("scroll", scheduleUpdate); window.removeEventListener("resize", scheduleUpdate); if (frameId !== null) { cancelAnimationFrame(frameId); } }); return section.node(); } 4d:[{"id":"809ef23725ca1c0a9ab3458a7c1d67b9ee2ca9fcb0bb45654dadc5b4f900a69747c80cbbad37a8c52bddabe924ac3ae898c0974540e7c26c29f5211a92c723b7","href":"https://static.observableusercontent.com/files/809ef23725ca1c0a9ab3458a7c1d67b9ee2ca9fcb0bb45654dadc5b4f900a69747c80cbbad37a8c52bddabe924ac3ae898c0974540e7c26c29f5211a92c723b7","name":"los_angeles.png","type":"image/png","lastModified":1794541808513,"size":1012709},{"id":"cd1c620989ce6855a542314ac760c09bb8c96be4c7cb0dc33e1b9b57b7df570f19298207716c89707bf4ee3853558062d6cd7accfa5621731ce4e0c9e47489b5","href":"https://static.observableusercontent.com/files/cd1c620989ce6855a542314ac760c09bb8c96be4c7cb0dc33e1b9b57b7df570f19298207716c89707bf4ee3853558062d6cd7accfa5621731ce4e0c9e47489b5","name":"tablea2_four_cities.csv","type":"text/csv","lastModified":1794497320398,"size":44847063}] 48:{"id":"faf88c3aacde9fbe","slug":"untitled","title":"","thumbnail":"ba40ba19b15b5cc5c8d5f74e2816c917c5a02357575bd765b7bac92070dc3be3","access_level":"public","create_time":"$D2026-11-14T22:06:32.357Z","update_time":"$D2026-11-14T23:55:17.422Z","view_time":null,"first_public_time":"$D2026-11-14T23:15:01.675Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d8ea6b0c2cceec70","login":"anna-elizabeth-morgan","name":"Anna Elizabeth Morgan","avatar_url":"https://avatars-next.observableusercontent.com/49a62e7514d81aee1558819416bf6935649f29d6e0ecab4533ffdeab48b1af0b","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":53,"publish_version":53,"role":null,"authored":false,"authors":[{"type":"individual","id":"a964adcc11dfd433","login":"anna-elizabeth-morgan","name":"Anna Elizabeth Morgan","avatar_url":"https://avatars-next.observableusercontent.com/49a62e7514d81aee1558819416bf6935649f29d6e0ecab4533ffdeab48b1af0b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"d8ea6b0c2cceec70","login":"anna-elizabeth-morgan","name":"Anna Elizabeth Morgan","avatar_url":"https://avatars-next.observableusercontent.com/49a62e7514d81aee1558819416bf6935649f29d6e0ecab4533ffdeab48b1af0b","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"$undefined","cells":[{"id":3,"value":"permitRows = FileAttachment(\"tablea2_four_cities.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"\nlaPermits = {\n const parseDate = d3.utcParse(\"%Y-%m-%d\");\n\n const number = value => {\n const text = String(value ?? \"\").replaceAll(\",\", \"\").trim();\n return text === \"\" ? NaN : Number(text);\n };\n\n return permitRows\n .filter(d => d.JURIS_NAME.trim().toUpperCase() === \"LOS ANGELES\")\n .map(d => ({\n date: parseDate(String(d.BP_ISSUE_DT1).trim()),\n longitude: number(d.LONGITUDE),\n latitude: number(d.LATITUDE),\n units: number(d.NO_BUILDING_PERMITS),\n type: String(d.UNIT_CAT).trim() || \"Other\"\n }))\n .filter(d =>\n d.date &&\n Number.isFinite(+d.date) &&\n Number.isFinite(d.longitude) &&\n Number.isFinite(d.latitude) &&\n Number.isFinite(d.units) &&\n d.units > 0 &&\n d.longitude >= -118.818617907 &&\n d.longitude <= -117.891920891 &&\n d.latitude >= 33.902095971 &&\n d.latitude <= 34.472833193\n )\n .sort((a, b) => a.date - b.date);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"FileAttachment(\"tablea2_four_cities.csv\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"FileAttachment(\"los_angeles.png\").url()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$4c","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"\n\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"2"}} 24:null