2b:null 2c:["$","title",null,{"children":"Force layout grid groups | Sara Chodosh | Observable"}] 31:T1054,two_groups_chart = { // need to feed in data without an x and y! const GRID_SIZE = 15; // controls how much space there is between each square const GRID_COLS = 30; let data_structure = { bars : [...new Set(finalData.map(d => d.chunk))], bar_names: [...new Set(finalData.map(d => d.chunk))], bar_counts : [], bar_rows : [] } for (var i = 0; i < data_structure.bars.length; i++) { data_structure.bar_counts[i] = finalData.map(d => d.chunk).reduce(function(n, val) { return n + (val === data_structure.bars[i]); }, 0); data_structure.bar_rows[i] = Math.ceil(data_structure.bar_counts[i] / GRID_COLS); } const sorted = data_structure.bars.map((d,i) => { return { bar: d, bar_names: data_structure.bar_names[i], bar_counts: data_structure.bar_counts[i], bar_rows: data_structure.bar_rows[i] }}).sort(function(a,b) { return b.bar_counts - a.bar_counts; }) data_structure = { bars: sorted.map(d => d.bar), bar_names: sorted.map(d => d.bar_names), bar_counts: sorted.map(d => d.bar_counts), bar_rows: sorted.map(d => d.bar_rows) } console.log(data_structure) // var search = 0; // let count = data.nodes.map(node => node.group).reduce(function(n, val) { // return n + (val === search); // }, 0); // console.log(count) // const GRID_COLS = 6; const GRID_ROWS = Math.ceil(finalData.length / GRID_COLS); console.log(GRID_ROWS) let grid = { cells : [], init : function() { this.cells = {}; for (var bar = 0; bar < data_structure.bars.length; bar++) { let curr_g = this.cells[bar] = []; let bar_cells = []; let cells_count = data_structure.bar_counts[bar]; let start_x = bar * (GRID_COLS+1) * GRID_SIZE; for(var r = 0; r < GRID_ROWS; r++) { for(var c = 0; c < GRID_COLS; c++) { if (cells_count <= 0) continue; var cell; cell = { x : start_x + c * GRID_SIZE, y : height - r * GRID_SIZE, occupied : false }; this.cells[bar].push(cell); // bar_cells.push(cell); cells_count--; }; }; } }, sqdist : function(a, b) { return Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2); }, occupyNearest : function(p) { // if (p.group != 0) return null; let bar_i = data_structure.bars.indexOf(p.chunk); var minDist = 1000000; var d; var candidate = null; for(var i = 0; i < this.cells[bar_i].length; i++) { if(!this.cells[bar_i][i].occupied && ( d = this.sqdist(p, this.cells[bar_i][i])) < minDist) { minDist = d; candidate = this.cells[bar_i][i]; } } if(candidate) candidate.occupied = true; return candidate; } } // grid.init(); // const nodes = data.map(d => Object.create(d)); //this doesn't seem to be necessary! const simulation = d3.forceSimulation(finalData) .force("center", d3.forceCenter(width / 2, height / 2)) const svg = d3.select(DOM.svg(width, height)); // CIRCLE VERSION const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(finalData) .join("circle") .attr("r", 5) .attr("fill", '#000') // .call(drag(simulation)); node.append("title") .text(d => d.chunk); simulation.on("tick", () => { grid.init(); node .each(function(d) { let gridpoint = grid.occupyNearest(d); if (gridpoint) { // ensures smooth movement towards final positoin d.x += (gridpoint.x - d.x) * .05; d.y += (gridpoint.y - d.y) * .05; // jumps directly into final position // d.x = gridpoint.x; // d.y = gridpoint.y } }) .attr("cx", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }32:T14be,final_chart = { // need to feed in data without an x and y! const GRID_SIZE = 15; // controls how much space there is between each square const GRID_COLS = 4; let data_structure = { bars : [...new Set(finalData.map(d => d.brandCode))], bar_names: [...new Set(finalData.map(d => d.brand))], bar_counts : [], bar_rows : [] } for (var i = 0; i < data_structure.bars.length; i++) { data_structure.bar_counts[i] = finalData.map(d => d.brandCode).reduce(function(n, val) { return n + (val === data_structure.bars[i]); }, 0); data_structure.bar_rows[i] = Math.ceil(data_structure.bar_counts[i] / GRID_COLS); } const sorted = data_structure.bars.map((d,i) => { return { bar: d, bar_names: data_structure.bar_names[i], bar_counts: data_structure.bar_counts[i], bar_rows: data_structure.bar_rows[i] }}).sort(function(a,b) { return b.bar_counts - a.bar_counts; }) data_structure = { bars: sorted.map(d => d.bar), bar_names: sorted.map(d => d.bar_names), bar_counts: sorted.map(d => d.bar_counts), bar_rows: sorted.map(d => d.bar_rows) } // var search = 0; // let count = data.nodes.map(node => node.group).reduce(function(n, val) { // return n + (val === search); // }, 0); // console.log(count) let bar_start_points = [] let start_x // const GRID_COLS = 6; const GRID_ROWS = Math.ceil(finalData.length / GRID_COLS); let grid = { cells : [], init : function() { this.cells = {}; for (var bar = 0; bar < data_structure.bars.length; bar++) { let curr_g = this.cells[bar] = []; let bar_cells = []; let cells_count = data_structure.bar_counts[bar]; start_x = bar * (GRID_COLS+1) * GRID_SIZE; bar_start_points.push(start_x) for(var r = 0; r < GRID_ROWS; r++) { for(var c = 0; c < GRID_COLS; c++) { if (cells_count <= 0) continue; var cell; cell = { x : start_x + c * GRID_SIZE, y : height - r * GRID_SIZE, occupied : false }; this.cells[bar].push(cell); // bar_cells.push(cell); cells_count--; }; }; } }, sqdist : function(a, b) { return Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2); }, occupyNearest : function(p) { // if (p.group != 0) return null; let bar_i = data_structure.bars.indexOf(p.brandCode); var minDist = 1000000; var d; var candidate = null; for(var i = 0; i < this.cells[bar_i].length; i++) { if(!this.cells[bar_i][i].occupied && ( d = this.sqdist(p, this.cells[bar_i][i])) < minDist) { minDist = d; candidate = this.cells[bar_i][i]; } } if(candidate) candidate.occupied = true; return candidate; } } // grid.init(); // const nodes = data.map(d => Object.create(d)); //this doesn't seem to be necessary! const simulation = d3.forceSimulation(finalData) .force("center", d3.forceCenter(width / 2, height / 2)) const svg = d3.select(DOM.svg(width, height)); // CIRCLE VERSION const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(finalData) .join("circle") .attr("r", 5) .attr("fill", color) // .call(drag(simulation)); console.log(bar_start_points) const brand_names = ["Costa Brava", "Costa Barcelona", "Pirineus", "Terres de Lleida", "Costa Daurada", "Paisatges de Barcelona", "Terres de l'Ebre", "Val d'Aran", "Barcelona"] const bar_start = [0, 75, 150, 225, 300, 375, 450, 525, 600] const label_data = [ { 'name': 'Costa Brava', 'start': 0 }, { 'name': 'Costa Barcelona', 'start': 75 }, { 'name': 'Pirineus', 'start': 150 }, { 'name': 'Terres de Lleida', 'start': 225 }, { 'name': 'Costa Daurada', 'start': 300 }, { 'name': 'Paisatges de Barcelona', 'start': 375 }, { 'name': "Terres de l'Ebre", 'start': 450 }, { 'name': "Val d'Aran", 'start': 525 }, { 'name': "Barcelona", 'start': 600 } ] console.log(data_structure) const labels = svg.selectAll('labels') .data(label_data) .join('text') .attr('x', d => d.start) .attr('y', height/2) .text(d => d.name) simulation.on("tick", () => { grid.init(); node .each(function(d) { let gridpoint = grid.occupyNearest(d); if (gridpoint) { // ensures smooth movement towards final positoin d.x += (gridpoint.x - d.x) * .05; d.y += (gridpoint.y - d.y) * .05; // jumps directly into final position // d.x = gridpoint.x; // d.y = gridpoint.y } }) .attr("cx", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }33:T13f0,chart = { const GRID_SIZE = 15; // controls how much space there is between each square const GRID_COLS = 4; let data_structure = { bars : [...new Set(data.map(d => d.brandCode))], bar_names: [...new Set(data.map(d => d.brand))], bar_counts : [], bar_rows : [] } for (var i = 0; i < data_structure.bars.length; i++) { data_structure.bar_counts[i] = data.map(d => d.brandCode).reduce(function(n, val) { return n + (val === data_structure.bars[i]); }, 0); data_structure.bar_rows[i] = Math.ceil(data_structure.bar_counts[i] / GRID_COLS); } const sorted = data_structure.bars.map((d,i) => { return { bar: d, bar_names: data_structure.bar_names[i], bar_counts: data_structure.bar_counts[i], bar_rows: data_structure.bar_rows[i] }}).sort(function(a,b) { return b.bar_counts - a.bar_counts; }) data_structure = { bars: sorted.map(d => d.bar), bar_names: sorted.map(d => d.bar_names), bar_counts: sorted.map(d => d.bar_counts), bar_rows: sorted.map(d => d.bar_rows) } console.log(data_structure) // var search = 0; // let count = data.nodes.map(node => node.group).reduce(function(n, val) { // return n + (val === search); // }, 0); // console.log(count) // const GRID_COLS = 6; const GRID_ROWS = Math.ceil(data.length / GRID_COLS); console.log(GRID_ROWS) let grid = { cells : [], init : function() { this.cells = {}; for (var bar = 0; bar < data_structure.bars.length; bar++) { let curr_g = this.cells[bar] = []; let bar_cells = []; let cells_count = data_structure.bar_counts[bar]; let start_x = bar * (GRID_COLS+1) * GRID_SIZE; for(var r = 0; r < GRID_ROWS; r++) { for(var c = 0; c < GRID_COLS; c++) { if (cells_count <= 0) continue; var cell; cell = { x : start_x + c * GRID_SIZE, y : height - r * GRID_SIZE, occupied : false }; this.cells[bar].push(cell); // bar_cells.push(cell); cells_count--; }; }; } }, sqdist : function(a, b) { return Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2); }, occupyNearest : function(p) { // if (p.group != 0) return null; let bar_i = data_structure.bars.indexOf(p.brandCode); var minDist = 1000000; var d; var candidate = null; for(var i = 0; i < this.cells[bar_i].length; i++) { if(!this.cells[bar_i][i].occupied && ( d = this.sqdist(p, this.cells[bar_i][i])) < minDist) { minDist = d; candidate = this.cells[bar_i][i]; } } if(candidate) candidate.occupied = true; return candidate; } } // grid.init(); // const nodes = data.map(d => Object.create(d)); //this doesn't seem to be necessary! const simulation = d3.forceSimulation(data) .force("center", d3.forceCenter(width / 2, height / 2)) const svg = d3.select(DOM.svg(width, height)); // CIRCLE VERSION const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(data) .join("circle") .attr("r", 5) .attr("fill", color) // .call(drag(simulation)); node.append("title") .text(d => d.brand); simulation.on("tick", () => { grid.init(); node .each(function(d) { let gridpoint = grid.occupyNearest(d); if (gridpoint) { // ensures smooth movement towards final positoin d.x += (gridpoint.x - d.x) * .05; d.y += (gridpoint.y - d.y) * .05; // jumps directly into final position // d.x = gridpoint.x; // d.y = gridpoint.y } }) .attr("cx", d => d.x) .attr("cy", d => d.y); }); // // SQUARE VERSION // const node = svg.append('g') // .attr("stroke", "#fff") // .attr("stroke-width", 1.5) // .selectAll('path') // .data(data) // .join('path') // .attr('d', d => square(d)) // .attr('fill', d => fillScale(d.Perc_Tourist)) // .call(drag(simulation)) // simulation.on('tick', () => { // grid.init(); // node // .each(function(d) { // let gridpoint = grid.occupyNearest(d); // if (gridpoint) { // // ensures smooth movement towards final positoin // d.x += (gridpoint.x - d.x) * .05; // d.y += (gridpoint.y - d.y) * .05; // // jumps directly into final position // // d.x = gridpoint.x; // // d.y = gridpoint.y // } // }) // .attr("x", d => d.x) // .attr("y", d => d.y) // .attr('transform', d => `translate(${[d.x, d.y]})`); // }); invalidation.then(() => simulation.stop()); return svg.node(); }34:[{"id":"6510f347813dc33d6f43134fac954fc10d02e6c26104fac22899d353cbf97a8bc32fd64e80a09229c9448662d8dd9a0ec331915fc873e1999017ebb69fc6b3b0","href":"https://static.observableusercontent.com/files/6510f347813dc33d6f43134fac954fc10d02e6c26104fac22899d353cbf97a8bc32fd64e80a09229c9448662d8dd9a0ec331915fc873e1999017ebb69fc6b3b0","name":"Test_Tile_Data@2.csv","type":"text/csv","lastModified":1622978184501.922,"size":52868},{"id":"a5f1614394e50aeb2b052f15cd0ffcfb63eb76d239efe6ad7dbfa783de9ef7136ba5c89331ee718c1148f9f18d00371dad1d2edcea043753f87672ea9aff73ed","href":"https://static.observableusercontent.com/files/a5f1614394e50aeb2b052f15cd0ffcfb63eb76d239efe6ad7dbfa783de9ef7136ba5c89331ee718c1148f9f18d00371dad1d2edcea043753f87672ea9aff73ed","name":"RealData.csv","type":"text/csv","lastModified":1624368309736.021,"size":184910},{"id":"09fc58642f4c8b41a7831191329a2c0429ceca92519d8598a4385c0f6875b2ca7e2258f1e52259e0ed1ddf419026ca97734de66432eba70f74ac19eed86d34a5","href":"https://static.observableusercontent.com/files/09fc58642f4c8b41a7831191329a2c0429ceca92519d8598a4385c0f6875b2ca7e2258f1e52259e0ed1ddf419026ca97734de66432eba70f74ac19eed86d34a5","name":"Test_Tile_Data@1.csv","type":"text/csv","lastModified":1622971669303.331,"size":53168}] 2f:{"id":"9b5b73910a693966","slug":"force-layout-grid-groups","title":"Force layout grid groups","thumbnail":"72e17d051bf204b4b98d800ca15843b299f49269e2ed471dd799cf0aefec2de6","access_level":"public","create_time":"$D2021-06-06T08:58:10.413Z","update_time":"$D2021-08-10T15:18:38.796Z","view_time":null,"first_public_time":"$D2021-06-06T09:39:02.964Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"20c1fecfc71ce39f","login":"sechodosh","name":"Sara Chodosh","avatar_url":"https://avatars-next.observableusercontent.com/c5d9f088044507420ab14b79254e146245e4f5e442be7ccc94f6cce2711780fa","tier":"starter_2024"},"version":402,"publish_version":402,"role":null,"authored":false,"authors":[{"type":"individual","id":"6429394a83672eb9","login":"sechodosh","name":"Sara Chodosh","avatar_url":"https://avatars-next.observableusercontent.com/c5d9f088044507420ab14b79254e146245e4f5e442be7ccc94f6cce2711780fa","tier":null}],"members":[{"type":"individual","id":"6429394a83672eb9","login":"sechodosh","name":"Sara Chodosh","avatar_url":"https://avatars-next.observableusercontent.com/c5d9f088044507420ab14b79254e146245e4f5e442be7ccc94f6cce2711780fa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Force layout grid groups","cells":[{"id":0,"value":"md`# Force layout grid groups`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":300,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":288,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"{\n const GRID_SIZE = 15;\n const GRID_COLS = 4;\n \n let data_structure = {\n bars : [...new Set(data.map(d => d.brandCode))],\n bar_counts : [],\n bar_rows : []\n }\n \n for (var i = 0; i < data_structure.bars.length; i++) {\n data_structure.bar_counts[i] = data.map(d => d.brandCode).reduce(function(n, val) {\n return n + (val === data_structure.bars[i]);\n }, 0);\n data_structure.bar_rows[i] = Math.ceil(data_structure.bar_counts[i] / GRID_COLS);\n }\n \n const sorted = data_structure.bars.map((d,i) => { return {\n bar: d,\n bar_counts: data_structure.bar_counts[i],\n bar_rows: data_structure.bar_rows[i]\n }}).sort(function(a,b) {\n return b.bar_counts - a.bar_counts;\n })\n \n data_structure = {\n bars: sorted.map(d => d.bar),\n bar_counts: sorted.map(d => d.bar_counts),\n bar_rows: sorted.map(d => d.bar_rows)\n }\n \n return data_structure;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"data_raw = FileAttachment(\"Test_Tile_Data@2.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"data = data_raw.map(d => { return {\n muni : d.Municipality,\n codeINE: d.INECode, \n codeIdescat : d.IdescatCode,\n centroix : +d.V1,\n centroiy : +d.V2,\n brand : d.brand,\n brandCode : +d.brandCode,\n Perc_Tourist: +d.Perc_TuristicHousehols\n}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"finalData_raw = FileAttachment(\"RealData.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":275,"value":"finalData = finalData_raw.map(d => { return {\n Perc_Tourist: +d.Perc_TuristicHouseholds_INE,\n mapX: +d.x,\n mapY: +d.y,\n INECode: d.INECode,\n IdescatCode: d.IdescatCode,\n municipality: d.Municipality,\n brand: d.brand,\n province: d.province,\n population: +d.Population,\n perc_Airbnb: +d.perc_AirbnbOk,\n airbnb: +d.airbnb,\n brandCode: brandCodes[d.brand],\n chunk: d.airbnb > 0 ? 1 : 0\n}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":277,"value":"brandCodes = { return {\n 'Pirineus': 1,\n 'Costa Barcelona': 2,\n 'Terres de Lleida': 3,\n 'Paisatges de Barcelona': 4,\n 'Costa Brava': 5,\n 'Costa Daurada': 6,\n \"Terres de l'Ebre\": 7,\n \"Val d'Aran\": 8,\n 'Barcelona': 9\n}}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":189,"value":"fillScale = d3.scaleSequential(chroma.scale([\"#fb248b\", \"#20bac3\"]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":217,"value":"chroma.scale([\"#fb248b\", \"#20bac3\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":119,"value":"square = d3.symbol().type(d3.symbolSquare).size(150);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeSet2);\n return d => scale(d.brand);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":193,"value":"chromatic_scale = require('d3-scale-chromatic')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":243,"value":"chroma = require('chroma-js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"