41:null 42:["$","title",null,{"children":"Christopher Alexander Conjectures | jmfbo | Observable"}] 48:Tf06,(() => { if(!document.getElementById('serif-fonts')){ const l=document.createElement('link'); l.id='serif-fonts'; l.rel='stylesheet'; l.href='https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap'; document.head.append(l); } const SERIF="'Fraunces', serif", SANS="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"; const INK='#1a1714', PAPER='#faf8f3', MUTED='#8a8378'; const container = document.createElement('div'); container.style.cssText = 'font:13px/1.5 ' + SANS + '; max-width:720px;'; const W = 340, H = 300; const svg = d3.create('svg').attr('viewBox', [0, 0, W*2+16, H]).style('width', '100%').style('max-width', '720px').style('height', 'auto').style('font-family', SANS); svg.append('rect').attr('width', W*2+16).attr('height', H).attr('fill', PAPER); const dot = (g, x, y, r, f) => g.append('circle').attr('cx', x).attr('cy', y).attr('r', r).attr('fill', f); const tg = svg.append('g'); tg.append('text').attr('x', W/2).attr('y', 26).attr('text-anchor', 'middle').attr('font-family', SERIF).attr('font-size', 17).attr('fill', INK).text('The tree'); tg.append('text').attr('x', W/2).attr('y', 44).attr('text-anchor', 'middle').attr('font-size', 11).attr('fill', MUTED).attr('font-style', 'italic').text('no two sets overlap'); dot(tg, W/2, 64, 4, INK); const boxes = [{ y: 92, label: 'X', n: 3, c: '#FB6247' }, { y: 162, label: 'Y', n: 2, c: '#52BEAC' }, { y: 232, label: 'Z', n: 1, c: '#ac9356' }]; boxes.forEach(b => { tg.append('rect').attr('x', 62).attr('y', b.y).attr('width', W-124).attr('height', 52).attr('rx', 6).attr('fill', 'none').attr('stroke', b.c).attr('stroke-width', 1.5); tg.append('text').attr('x', 70).attr('y', b.y + 18).attr('font-size', 12).attr('fill', MUTED).text(b.label); for(let i=0;i dot(sg, p[0], p[1], 4, '#FB6247')); [[210,157],[255,102]].forEach(p => dot(sg, p[0], p[1], 4, '#52BEAC')); dot(sg, 300, 236, 4, '#ac9356'); dot(sg, 165, 102, 5, INK); sg.append('text').attr('x', 165).attr('y', 88).attr('text-anchor', 'middle').attr('font-size', 10).attr('fill', MUTED).attr('font-style', 'italic').text('shared'); sg.append('line').attr('x1', W/2).attr('y1', 68).attr('x2', 120).attr('y2', 132).attr('stroke', MUTED).attr('stroke-width', 1); sg.append('line').attr('x1', W/2).attr('y1', 68).attr('x2', 205).attr('y2', 132).attr('stroke', MUTED).attr('stroke-width', 1); sg.append('line').attr('x1', W/2).attr('y1', 68).attr('x2', 300).attr('y2', 236).attr('stroke', MUTED).attr('stroke-width', 1); container.append(svg.node()); return container; })()49:T13ec,(() => { if(!document.getElementById('serif-fonts')){ const l=document.createElement('link'); l.id='serif-fonts'; l.rel='stylesheet'; l.href='https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap'; document.head.append(l); } const SANS="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"; const INK='#1a1714', PAPER='#faf8f3', MUTED='#8a8378'; const acc = ['#ac9356','#FB6247','#E52127','#52BEAC','#09b57c','#FAAD69','#a64141','#6ad4ff','#E52127','#FAAD69','#a64141','#52BEAC','#1a1714','#FAAD69','#09b57c']; const names = ['Levels of scale','Strong centers','Thick boundaries','Alternating repetition','Positive space','Good shape','Local symmetries','Deep interlock','Contrast','Gradients','Roughness','Echoes','The void','Simplicity & inner calm','Not-separateness']; function rgba(h, a){ const n = parseInt(h.slice(1),16); return `rgba(${(n>>16)&255},${(n>>8)&255},${n&255},${a})`; } const container = document.createElement('div'); container.style.cssText = 'font:12px/1.4 ' + SANS + '; max-width:760px;'; const CW = 140, CH = 150; const svg = d3.create('svg').attr('viewBox', [0, 0, CW*5, CH*3]).style('width', '100%').style('max-width', '760px').style('height', 'auto').style('font-family', SANS); svg.append('rect').attr('width', CW*5).attr('height', CH*3).attr('fill', PAPER); function draw(i){ const a = acc[i]; const g = svg.append('g').attr('transform', `translate(${(i%5)*CW + CW/2},${Math.floor(i/5)*CH})`); const sh = g.append('g').attr('transform', 'translate(0,54)'); const r = 42; switch(i){ case 0: [52,36,24,15,8].forEach((s,j)=> sh.append('circle').attr('r',s).attr('fill', j%2? a : INK)); break; case 1: sh.append('circle').attr('r',r).attr('fill', a); [[0,0],[-26,-19],[26,-17],[0,29],[-28,25],[28,27]].forEach(p=> sh.append('circle').attr('cx',p[0]).attr('cy',p[1]).attr('r',9).attr('fill', INK)); break; case 2: sh.append('rect').attr('x',-r).attr('y',-r).attr('width',2*r).attr('height',2*r).attr('fill', INK); sh.append('rect').attr('x',-r+15).attr('y',-r+15).attr('width',2*r-30).attr('height',2*r-30).attr('fill', a); break; case 3: for(let k=0;k<9;k++) sh.append('rect').attr('x',-r+k*(2*r/9)).attr('y',-r).attr('width',2*r/9).attr('height',2*r).attr('fill', k%2? a : INK); break; case 4: sh.append('path').attr('d', `M -${r} 0 A ${r} ${r} 0 0 1 ${r} 0 A ${r} ${r} 0 0 1 -${r} 0 Z`).attr('fill', INK); sh.append('circle').attr('cx',-r/2).attr('cy',0).attr('r',r*0.32).attr('fill', PAPER); sh.append('circle').attr('cx',r/2).attr('cy',0).attr('r',r*0.32).attr('fill', a); break; case 5: sh.append('rect').attr('x',-r).attr('y',-r).attr('width',2*r).attr('height',2*r).attr('fill', a); sh.append('circle').attr('r',r*0.55).attr('fill', PAPER).attr('stroke', INK).attr('stroke-width',3); break; case 6: for(let k=-2;k<=2;k++){ const c = k%2? a : INK; sh.append('circle').attr('cx',k*33).attr('cy',0).attr('r',13).attr('fill',c); sh.append('circle').attr('cx',k*33).attr('cy',0).attr('r',5).attr('fill',PAPER); } break; case 7: sh.append('ellipse').attr('cx',-13).attr('cy',0).attr('rx',38).attr('ry',r).attr('fill', rgba(a,0.55)); sh.append('ellipse').attr('cx',13).attr('cy',0).attr('rx',38).attr('ry',r).attr('fill', rgba(INK,0.6)); break; case 8: sh.append('path').attr('d',`M -${r} -${r} L 0 -${r} L 0 ${r} L -${r} ${r} Z`).attr('fill', INK); sh.append('path').attr('d',`M 0 -${r} L ${r} -${r} L ${r} ${r} L 0 ${r} Z`).attr('fill', a); break; case 9: { const id='grad'+i; svg.append('defs').append('linearGradient').attr('id',id).call(g2=>{ g2.append('stop').attr('offset','0%').attr('stop-color', INK); g2.append('stop').attr('offset','100%').attr('stop-color', a); }); sh.append('rect').attr('x',-r).attr('y',-r).attr('width',2*r).attr('height',2*r).attr('fill', `url(#${id})`); break; } case 10: for(let k=0;k<13;k++){ const jx=-r+k*(2*r/13)+(Math.sin(k*12.9898)*43758.5453%1-0.5)*9; sh.append('line').attr('x1',jx).attr('y1',-r).attr('x2',jx).attr('y2',r).attr('stroke', k%2? a : INK).attr('stroke-width',3); } break; case 11: [1,0.6,0.32].forEach(s=> sh.append('circle').attr('cx',0).attr('cy',-r*(1-s)*0.5).attr('r',r*s).attr('fill', s>0.7? INK : s>0.5? a : PAPER).attr('stroke', s<0.7? INK : 'none').attr('stroke-width',1)); break; case 12: sh.append('circle').attr('r',r).attr('fill', INK); sh.append('circle').attr('r',r*0.42).attr('fill', PAPER); break; case 13: sh.append('circle').attr('r',r*0.32).attr('fill', a); break; case 14: sh.append('circle').attr('r',r).attr('fill', rgba(a,0.22)); sh.append('circle').attr('cx',10).attr('cy',10).attr('r',r*0.6).attr('fill', a).attr('opacity',0.7); break; } g.append('text').attr('y',122).attr('text-anchor','middle').attr('font-size',11).attr('fill', MUTED).text((i+1)); g.append('text').attr('y',140).attr('text-anchor','middle').attr('font-size',11).attr('fill', INK).text(names[i]); } for(let i=0;i<15;i++) draw(i); container.append(svg.node()); return container; })()4a:Tdfc,(() => { if(!document.getElementById('serif-fonts')){ const l=document.createElement('link'); l.id='serif-fonts'; l.rel='stylesheet'; l.href='https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap'; document.head.append(l); } const SERIF="'Fraunces', serif", SANS="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"; const container = document.createElement('div'); container.style.cssText = 'font:13px/1.5 ' + SANS + '; max-width:640px;'; const patterns = { 'Towns': [ [8, 'Mosaic of subcultures', 'No single culture should dominate: lay the city out as a mosaic of overlapping subcultures, each with its own center.'], [21, 'Four-story limit', 'Above four stories, people lose touch with the ground. Buildings over four stories only in exceptional, clearly-defined parts.'], [61, 'Small public squares', 'A town needs public squares, but if too large they feel deserted. Make them small — 45 to 60 feet across.'], [88, 'Street café', 'The life of a street comes from people lingering. Give every neighborhood a café with tables spilling into the street.'], ], 'Buildings': [ [130, 'Entrance room', 'Arriving should be a moment of transition, not a doorway into the street. Give every building a real entrance room.'], [141, 'A room of one\u2019s own', 'No one can be at home without a place they belong to alone. Give every household member their own room.'], [159, 'Light on two sides', 'Rooms lit from one side feel dark and dead. Arrange rooms so each gets light from two directions.'], [179, 'Alcoves', 'People gather at the edges, not the middle. Make small alcoves around the edge of rooms.'], ], 'Construction': [ [205, 'Structure follows social spaces', 'The structure should be felt, not hidden. Place columns and beams at the corners of social spaces, in their natural pattern.'], [224, 'Low doorways', 'A low passage slows you and marks a change of place. Make thresholds low — under 6\u2032.'], [248, 'Soft tile and brick', 'Hard, ungiving surfaces make rooms harsh. Use materials that give and age well.'], ], }; const title = document.createElement('h4'); title.textContent = 'A Pattern Language — 253 patterns, by scale'; title.style.cssText = 'margin:4px 0;font-family:' + SERIF + ';font-weight:500;'; container.append(title); for(const [scale, list] of Object.entries(patterns)){ const sec = document.createElement('div'); sec.style.marginBottom = '14px'; const head = document.createElement('div'); head.style.cssText = 'font-size:11px;color:#8a8378;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px;'; head.textContent = scale; sec.append(head); list.forEach(([num, name, text]) => { const row = document.createElement('div'); row.style.cssText = 'cursor:pointer;padding:4px 0;border-top:1px solid #e5e7eb;'; const top = document.createElement('div'); top.innerHTML = '' + num + ' ' + name + ''; const body = document.createElement('div'); body.style.cssText = 'color:#6b7280;display:none;font-size:13px;font-style:italic;margin-top:2px;'; body.textContent = text; row.append(top, body); row.addEventListener('click', () => { body.style.display = body.style.display === 'none' ? 'block' : 'none'; }); sec.append(row); }); container.append(sec); } return container; })()4b:Tebd,(() => { if(!document.getElementById('serif-fonts')){ const l=document.createElement('link'); l.id='serif-fonts'; l.rel='stylesheet'; l.href='https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap'; document.head.append(l); } const SANS="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"; const container = document.createElement('div'); container.style.cssText = 'font:13px/1.5 ' + SANS + '; max-width:560px;'; const ctrl = document.createElement('div'); ctrl.style.cssText = 'display:flex;gap:6px;align-items:center;margin:6px 0;'; const prev = document.createElement('button'); prev.textContent = '‹'; const next = document.createElement('button'); next.textContent = '›'; const auto = document.createElement('button'); auto.textContent = 'play'; const label = document.createElement('span'); label.style.cssText = 'margin-left:8px;color:#8a8378;font-style:italic;'; [prev, next, auto].forEach(b => b.style.cssText = 'padding:5px 12px;cursor:pointer;background:none;border:1px solid #c9bfa8;color:#1a1714;font-family:' + SANS + ';'); ctrl.append(prev, next, auto, label); container.append(ctrl); const svg = d3.create('svg').attr('viewBox', [0, 0, 560, 420]).style('width', '100%').style('max-width', '560px').style('height', 'auto'); svg.append('rect').attr('width', 560).attr('height', 420).attr('fill', '#faf8f3'); container.append(svg.node()); const steps = ['the ground','a boundary','a courtyard opens','the entrance','a main room','rooms around the court','a column stands','light on two sides']; let step = 0, playing = false; function render(){ const INK = '#1a1714'; svg.selectAll('g.draw').remove(); const g = svg.append('g').attr('class', 'draw'); if(step >= 0) g.append('rect').attr('x',30).attr('y',20).attr('width',500).attr('height',380).attr('fill','#faf8f3').attr('stroke',INK).attr('stroke-width',1.5); if(step >= 1) g.append('rect').attr('x',60).attr('y',50).attr('width',440).attr('height',320).attr('fill','none').attr('stroke',INK).attr('stroke-width',1.5); if(step >= 2) g.append('rect').attr('x',180).attr('y',130).attr('width',200).attr('height',160).attr('fill','#f4e3d0').attr('stroke',INK).attr('stroke-width',1.5); if(step >= 3) g.append('rect').attr('x',250).attr('y',50).attr('width',60).attr('height',80).attr('fill','#e7c8a0').attr('stroke',INK).attr('stroke-width',1.5); if(step >= 4) g.append('rect').attr('x',90).attr('y',80).attr('width',120).attr('height',90).attr('fill','#e7c8a0').attr('stroke',INK).attr('stroke-width',1.5); if(step >= 5){ g.append('rect').attr('x',360).attr('y',80).attr('width',110).attr('height',90).attr('fill','#e7c8a0').attr('stroke',INK).attr('stroke-width',1.5); g.append('rect').attr('x',90).attr('y',250).attr('width',130).attr('height',90).attr('fill','#e7c8a0').attr('stroke',INK).attr('stroke-width',1.5); } if(step >= 6) g.append('circle').attr('cx',280).attr('cy',210).attr('r',9).attr('fill','#FB6247'); if(step >= 7) g.append('rect').attr('x',210).attr('y',180).attr('width',40).attr('height',40).attr('fill','#faf8f3').attr('stroke',INK).attr('stroke-width',1.5); label.textContent = 'step ' + (step + 1) + ' of ' + steps.length + ' — ' + steps[step]; } next.addEventListener('click', () => { step = Math.min(steps.length - 1, step + 1); render(); }); prev.addEventListener('click', () => { step = Math.max(0, step - 1); render(); }); auto.addEventListener('click', () => { playing = !playing; auto.textContent = playing ? 'stop' : 'play'; if(playing){ (function tick(){ if(!playing) return; step = (step + 1) % steps.length; render(); setTimeout(tick, 600); })(); } }); render(); return container; })()4c:[] 46:{"id":"fa0b5c98fb3d2e8f","slug":"christopher-alexander-conjectures","title":"Christopher Alexander Conjectures","thumbnail":"eddf389cb63757e3cd6b1da94ff5522aaa43909e0a7e6c0eb26efcc2d8cd3b82","access_level":"public","create_time":"$D2026-10-19T20:38:12.309Z","update_time":"$D2026-10-19T21:59:09.265Z","view_time":null,"first_public_time":"$D2026-10-19T21:31:29.994Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"13e9f68b1ec1653b","login":"ssp2","name":"jmfbo","avatar_url":"https://avatars-next.observableusercontent.com/86da5640a4a538e054fc577d613a9d57f0da60f5d4a14a3da6b4e0fb3e5a5800","tier":"free_2026","bio":"founder and principal engineer at sindio.net","following":false},"version":112,"publish_version":112,"role":null,"authored":false,"authors":[{"type":"individual","id":"f18d27787b7a1d20","login":"ssp2","name":"jmfbo","avatar_url":"https://avatars-next.observableusercontent.com/86da5640a4a538e054fc577d613a9d57f0da60f5d4a14a3da6b4e0fb3e5a5800","tier":null,"bio":"founder and principal engineer at sindio.net","following":false}],"members":[{"type":"team","id":"13e9f68b1ec1653b","login":"ssp2","name":"jmfbo","avatar_url":"https://avatars-next.observableusercontent.com/86da5640a4a538e054fc577d613a9d57f0da60f5d4a14a3da6b4e0fb3e5a5800","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":"Christopher Alexander Conjectures","cells":[{"id":1,"value":"# Christopher Alexander Conjectures","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"Four interactive diagrams of Christopher Alexander's theory: the tree versus the semi-lattice, the fifteen properties of living structure, the 253 patterns of scale, and the step by step unfolding of a building.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"1. Tree Vs Semi-Lattice","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"2. The fifteen Fundamental Properties","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"3. Patterns by Scale (Scale Ladder)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"4. The Unfolding","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"2"}} 47:"$46:body"