2e:null 2f:["$","title",null,{"children":"random city landscape | Sundar Singh | Observable"}] 34:Td52,createCityRow = config => { config = { data: null, bind: DOM, squareCol: '#66ab56', strokeCol: '#06004f', strokeWidth: 8, ...config, } const { data, squareCol, strokeCol, strokeWidth } = config const dataLength = data.length // const svg = DOM.svg(width, height) const sel = d3.select(`${config.bind}`) const sumOfWidths = d3.sum(data.map(d => d.width)) console.info('sumOfWidths', sumOfWidths) const squareScale = d3.scaleLinear() .domain([0, sumOfWidths]) .range([0, width]) // remap the data with x locations let xLoc = 0 const _data = data.map(d => { xLoc = xLoc + d.width console.info('xLoc', xLoc) console.info('squareScale(xLoc)', squareScale(xLoc - d.width)) return { xLoc: squareScale(xLoc - d.width), width: squareScale(d.width), height: d.height, hex: d.hex, data: d, } }) console.info('_data', _data) // do a destroy sel.selectAll('g').remove(); const join = sel.selectAll('g') .data(_data) .enter().append('g') join.append('rect') .attr('x', d => d.xLoc) .attr('y', d => height - d.height) .attr('width', d => d.width) .attr('height', d => d.height) .attr('stroke-width', strokeWidth) // .attr('stroke', (d, i) => _data[random.randomInt(0, data.length - 1)()].hex) .attr('stroke', d => (d.hex !== 'none') ? strokeCol : 'none') .attr('fill', d => d.hex) // windows _data.forEach((obj, n) => { const windowSize = 10 if (obj.height > 50) { // console.info('obj', obj) // how many windows could we fit const windowNumberX = Math.floor(obj.width) / windowSize console.info('windowNumberX', windowNumberX) const windowNumberY = Math.floor(obj.height) / windowSize console.info('windowNumberY', windowNumberX) d3.range(windowNumberY).forEach(c => { sel.append('g') .attr('class', 'windows') .selectAll('rect.window-' + n) .data(d3.range(random.randomInt(1, windowNumberX -1)())) // random windows .enter().append('rect') .attr('class', 'window-' + n) .attr('x', (d, i) => obj.xLoc + ((windowSize + 1) * i) + 5) .attr('y', height - obj.height + (c * (windowSize + 1)) + 10) .attr('width', windowSize) .attr('height', windowSize) .attr('fill', d => (d % random.randomInt(1, 3)() == 0) ? 'none' : '#06004f') }) } else if (obj.hex !== 'none') { // console.info('obj', obj) // how many windows could we fit const windowNumber = Math.floor(obj.width) / windowSize console.info('windowNumber', windowNumber) sel.append('g') .attr('class', 'windows') .selectAll('rect.window-' + n) .data(d3.range(random.randomInt(1, windowNumber -1)())) // random windows .enter().append('rect') .attr('class', 'window-' + n) .attr('x', (d, i) => obj.xLoc + ((windowSize + 1) * i) + 5) .attr('y', height - obj.height + 5) .attr('width', windowSize) .attr('height', windowSize) .attr('fill', d => (d % random.randomInt(1, 3)() == 0) ? 'none' : '#06004f') } else { console.info('no building so no window') } }) return svg }35:[] 32:{"id":"5e1059918e80d7c0","slug":"random-city-landscape","title":"random city landscape","thumbnail":"975394b3f80cf625b562c5af9c2137a194a2fb91c021becfde6a5fdc8e1e3b23","access_level":"public","create_time":"$D2022-01-09T14:58:05.463Z","update_time":"$D2022-12-15T16:05:13.297Z","view_time":null,"first_public_time":"$D2022-01-09T21:05:10.306Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"956970941b62fd35","login":"eesur","name":"Sundar Singh","avatar_url":"https://avatars-next.observableusercontent.com/4c0ac1264472f5654ef5be9ac3d11d1d313563e2999527c3b515373567f637fb","tier":"starter_2024"},"version":414,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"07656ab2121ed222","login":"eesur","name":"Sundar Singh","avatar_url":"https://avatars-next.observableusercontent.com/4c0ac1264472f5654ef5be9ac3d11d1d313563e2999527c3b515373567f637fb","tier":null}],"members":[{"type":"individual","id":"07656ab2121ed222","login":"eesur","name":"Sundar Singh","avatar_url":"https://avatars-next.observableusercontent.com/4c0ac1264472f5654ef5be9ac3d11d1d313563e2999527c3b515373567f637fb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"ddc1c2b33d198017","slug":"d3","title":"playground","owner":{"id":"956970941b62fd35","login":"eesur","name":"Sundar Singh"}},"type":"notebook","body":{"title":"random city landscape","cells":[{"id":0,"value":"# random city landscape \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"viewof update = Inputs.button(\"re-render the landscape\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"-------\n\n```\n __ __ _______ ___ _______ _______ ______ _______ ___ \n| | | || || | | || || _ | | || | \n| |_| || ___|| | | _ || ___|| | || | _____||___| \n| || |___ | | | |_| || |___ | |_|| | |_____ ___ \n| || ___|| |___ | ___|| ___|| __ ||_____ || | \n| _ || |___ | || | | |___ | | || _____| ||___| \n|__| |__||_______||_______||___| |_______||___| |||_______| \n\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"function render () {\n update;\n \n createCityRow({\n data: dataRow1(),\n bind: '#one', \n })\n \n createCityRow({\n data: dataRow2(),\n bind: '#two', \n })\n \n createCityRow({\n data: dataRow3(),\n bind: '#three', \n })\n\n createCityRow({\n data: dataRow4(),\n bind: '#four', \n })\n\n // createSun()\n return 'scene rendered'\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"dataRow1()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"function dataRow1 () {\n const data = _.sampleSize(colours.filter(d => d.swatch === 0), 22).map(d => {\n return {\n hex: d.hex,\n width: random.randomInt(10, 140)(), \n height: random.randomInt(15, 150)()\n }\n });\n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"function dataRow2 () {\n const data = _.sampleSize(colours.filter(d => d.swatch === 2), 55).map((d, i) => {\n return {\n hex: (i % 4 === 0) ? 'none': d.hex,\n width: random.randomInt(10, 140)(), \n height: random.randomInt(150, 300)()\n }\n });\n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"function dataRow3 () {\n const data = _.sampleSize(colours.filter(d => d.swatch === 2), 6).map((d, i) => {\n return {\n hex: (i % 4 === 0) ? 'none': d.hex,\n width: random.randomInt(60, 300)(), \n height: random.randomInt(200, height - 50)()\n }\n });\n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"function dataRow4 () {\n const data = d3.range(10).map((d, i) => {\n return {\n hex: (i % 3 === 0) ? 'none': '#34454c',\n width: random.randomInt(60, 200)(), \n height: random.randomInt(300, height - 50)()\n }\n });\n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"createSun = () => {\n\n const sel = d3.select('g#sun')\n\n sel.selectAll('circle')\n .data(d3.range(40))\n .join('circle')\n .attr('r', d => d * 28)\n .attr('cx', width / 2)\n .attr('cy', height / 400 - 100)\n .attr('fill', 'none')\n .attr('stroke', '#f2ad78')\n .attr('stroke-width', d => d * 0.75)\n\n \n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"height = 700","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"random = require(\"d3-random\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"colours","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"import {colours} from \"@eesur/sanzo-wada-colour-grid\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"