31:T482,options = { const out = []; out.push({ lbl: "Area", code: "area", k: 0.02, unit: "km²" }); for (let year = 2022; year >= 2022; year -= 2) out.push({ lbl: "Population", code: "pop" + year, k: 0.00025, unit: "inhabitants" }); out.push({ lbl: "Cars", code: "cars", k: 0.0005, unit: "cars" }); out.push({ lbl: "Killed in road accidents", code: "carekil", k: 5, unit: "killed" }); out.push({ lbl: "Injured in road accidents", code: "careinj", k: 0.1, unit: "injured" }); out.push({ lbl: "Cows", code: "cows", k: 2.5, unit: "cows", ku: 1000 }); out.push({ lbl: "Pigs", code: "pigs", k: 1, unit: "pigs", ku: 1000 }); out.push({ lbl: "Sheeps", code: "sheeps", k: 2, unit: "sheeps", ku: 1000 }); out.push({ lbl: "Goats", code: "goats", k: 5, unit: "goats", ku: 1000 }); out.push({ lbl: "Hospital beds", code: "hbeds", k: 0.05, unit: "beds" }); out.push({ lbl: "Foreign tourists nigths", code: "tour", k: 0.0002, unit: "nights" }); out.push({ lbl: "GDP", code: "gdp", k: 0.04, unit: "billion €", ku: 0.001 }); return out; }32:T91e,updateCanvas = () => { const ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, w, h); const bckC = "white"; //"hsl(0deg 0% 97%)"; ctx.fillStyle = bckC; ctx.fillRect(0, 0, w, h); /*const lw = 1; ctx.lineWidth = lw; ctx.strokeStyle = "black"; ctx.strokeRect(0, 0, w, h);*/ //make region polylines //TODO: rely on sides instead ? const css = {}; for (let r of map.regions) { const cs = []; for (let side of r.sides) { if (side.line.or == "x") cs.push([side.line.pos, side.line2.pos]); else cs.push([side.line2.pos, side.line.pos]); } css[r.id] = cs; } //fill regions //ctx.fillStyle = "#e0e0e0"; for (let r of map.regions) { if (!stats[variable.code][r.id]) continue; const cs = css[r.id]; ctx.beginPath(); ctx.moveTo(cs[0][0], cs[0][1]); for (let i = 1; i < cs.length; i++) ctx.lineTo(cs[i][0], cs[i][1]); ctx.fillStyle = stats[variable.code][r.id] ? d3.interpolateRdYlBu(0.5) : "#eee"; /*ctx.fillStyle = d3.interpolateRdYlBu( 0.5 - getRegionPressure(r, getTargetArea(r.id)) / 0.5 / 5 );*/ ctx.fill(); } //draw region boundaries ctx.lineWidth = 1; //1.8; ctx.strokeStyle = "#aaa"; for (let r of map.regions) { if (!stats[variable.code][r.id]) continue; const cs = css[r.id]; ctx.beginPath(); ctx.moveTo(cs[0][0], cs[0][1]); for (let i = 1; i < cs.length; i++) ctx.lineTo(cs[i][0], cs[i][1]); ctx.closePath(); ctx.stroke(); } //draw labels ctx.fillStyle = "#555"; ctx.font = "15px Arial"; //ctx.strokeStyle = "white"; //ctx.lineWidth = 0; //1.5; for (let r of map.regions) { if (!stats[variable.code][r.id]) continue; if (getArea(r) < 600) continue; const cs = css[r.id]; let xc = 0, yc = 0; for (let c of cs) { xc += c[0]; yc += c[1]; } xc /= cs.length; yc /= cs.length; { //ctx.fillStyle = "#000"; ctx.fillText(r.id, xc - 10, yc + 7); } /*{ const pressure = getRegionPressure(r); const txtP = d3.format(".4f")(pressure); ctx.fillStyle = d3.interpolateRdYlBu(0.5 - pressure / 0.5 / 2); ctx.fillText(txtP, xc - 20, yc + 6); }*/ } //map title //ctx.font = "32px Helvetica"; //ctx.fillStyle = "black"; //ctx.fillText(variable.lbl, 20, 20 + 22); }33:Tbcd,input = [ //{ id: "UK", x: [33, 39, 54], y: [108, 71, 112] }, { id: "IE", x: [20, 32], y: [86, 103] }, { id: "IS", x: [20, 39], y: [20.3, 35] }, //{ id: "IS", x: [11, 19, 34], y: [17, 21, 35] }, { id: "PT", x: [7, 15], y: [158, 187] }, { id: "ES", x: [7, 37, 55, 15], y: [150, 159, 187, 158] }, { id: "FR", x: [37, 72, 75, 74], y: [120, 125, 134, 159] }, { id: "LU", x: [72, 75], y: [120, 125] }, { id: "BE", x: [59, 75], y: [114, 120] }, { id: "NL", x: [64, 75], y: [102, 114] }, //{ id: "MT", x: [104, 105], y: [195, 196] }, { id: "MT", x: [94, 95], y: [195, 196] }, { id: "CH", x: [74, 86], y: [134, 142] }, { id: "IT", x: [74, 86, 99, 95, 84], y: [142, 138, 143, 192, 155] //x: [74, 86, 99, 95, 98, 111, 120, 102, 88], //y: [142, 138, 143, 155, 160, 169, 187, 169, 155] }, //{ id: "DK", x: [81, 87, 93], y: [81, 86, 97] }, { id: "DK", x: [81, 93.15], y: [85.111, 97] }, { id: "DE", x: [75, 81, 100, 94, 96], y: [102, 97, 117, 126, 134] }, { id: "PL", x: [100, 130, 115], y: [97, 121, 117] }, { id: "CZ", x: [94, 115], y: [117, 126] }, { id: "SK", x: [110, 115, 130, 121], y: [126, 121, 127, 131] }, { id: "AT", x: [86, 96, 110], y: [134, 126, 138] }, { id: "HU", x: [110, 121, 130], y: [131, 127, 140] }, { id: "SI", x: [99, 110], y: [138, 143] }, //{ id: "SE", x: [93, 101, 115, 108], y: [40, 20, 35, 90] }, { id: "SE", x: [93.15, 114.3, 106], y: [20.3, 35, 90] }, //{ id: "FI", x: [115, 126, 135], y: [11, 33, 62] }, { id: "FI", x: [114.3, 133], y: [20.3, 62.3] }, { id: "NO", x: [76.3, 93.15], y: [20.3, 73.3] //x: [73, 88, 96, 108, 126, 115, 101, 93], //y: [46, 23, 14, 5, 11, 20, 40, 73] }, { id: "EE", x: [119, 135], y: [66, 74] }, { id: "LV", x: [119, 135], y: [74, 84] }, //{ id: "LT", x: [119, 135, 126], y: [84, 97, 91] }, { id: "LT", x: [119, 135], y: [84, 97] }, { id: "RO", x: [130, 152, 157], y: [127, 137, 148] }, //{ id: "MD", x: [147, 157, 152], y: [122, 137, 127] }, //{ id: "MD", x: [152, 157], y: [127, 137] }, //{ id: "UA", x: [130, 153, 188, 157, 147], y: [105, 98, 137, 122, 127] }, //{ id: "UA", x: [130, 188, 152], y: [105, 137, 127] }, { id: "BG", x: [136, 157], y: [148, 161] }, { id: "HR", x: [99, 110, 120, 112, 104], y: [143, 140, 146, 157, 149] }, { id: "BA", x: [112, 123, 119], y: [146, 155.5, 157] }, { id: "RS", x: [120, 130, 136, 132, 123], y: [140, 148, 161, 155.5, 146] }, { id: "ME", x: [119, 126.55], y: [155.5, 161] }, { id: "XK", x: [126.55, 132], y: [155.5, 161] }, { id: "MK", x: [128, 138], y: [161, 167] }, //{ id: "AL", x: [123, 128, 130], y: [161, 167, 174] }, { id: "AL", x: [122, 128], y: [161, 174] }, //{ id: "EL", x: [128, 130, 138, 154, 144], y: [174, 167, 162, 168, 193] }, { id: "EL", x: [128, 138, 157, 144], y: [167, 161, 168, 185] }, //{ id: "TR", x: [154, 180, 223, 200, 158], y: [157, 144, 165, 180, 175] }, { id: "TR", x: [157, 218], y: [157, 185] }, { id: "CY", x: [186, 192], y: [188, 192] } ]34:Te34,stats = { const out = {}; //area out.area = indexStat( await d3.json( "https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/DEMO_R_D3AREA?format=json&lang=en&time=2015&geoLevel=country" ) ); //missing figures: add UN figures out.area.BA = 51209; out.area.RS = 77474; out.area.XK = 10887; for (let year = 2022; year >= 2014; year -= 2) { out["pop" + year] = indexStat( await d3.json( "https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/demo_r_pjangrp3?format=json&lang=en&age=TOTAL&sex=T&unit=NR&time=" + year + "&geoLevel=country" ) ); } //missing figures: add UN figures out.pop2022.BA = 3271000; out.pop2022.XK = 1920079; //hospital beds //https://ec.europa.eu/eurostat/databrowser/product/view/hlth_rs_bdsrg2?lang=en out.hbeds = indexStat( await d3.json( "https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/hlth_rs_bdsrg2?format=json&lang=en&time=2019&unit=NR&geoLevel=country" ) ); //Victims in road accidents //killed out.carekil = indexStat( await d3.json( "https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/TRAN_R_ACCI?format=json&lang=en&time=2021&victim=kil&geoLevel=country" ) ); //injured out.careinj = indexStat( await d3.json( "https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/TRAN_R_ACCI?format=json&lang=en&time=2021&victim=inj&geoLevel=country" ) ); //number of passenger cars //https://ec.europa.eu/eurostat/databrowser/product/view/TRAN_R_VEHST out.cars = indexStat( await d3.json( "https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/TRAN_R_VEHST?format=json&lang=en&time=2020&vehicle=car&unit=nr&freq=a&geoLevel=country" ) ); //Nights spent at tourist accommodation establishments //https://ec.europa.eu/eurostat/databrowser/view/TOUR_OCC_NINAT/default/table?lang=en out.tour = indexStat( await d3.json( "https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/TOUR_OCC_NINAT?format=json&lang=en&geoLevel=country&time=2020&c_resid=for&unit=nr&nace_r2=I551-I553" ) ); /* //map.statComp( { eurostatDatasetCode: "agr_r_animal", filters: { unit: "THS_HD", time: "2018" }, unitText: "1000 heads" }, //"animals", //["A2000", "A2300", "A2400", "A3100", "A4100", "A4200"], //["bovines", "cows", "buffalos", "pigs", "sheeps", "goats"], //cows out.cows = indexStat( await d3.json( "https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/agr_r_animal?format=json&lang=en&geoLevel=country&time=2018&unit=THS_HD&animals=A2300" ) ); //pigs out.pigs = indexStat( await d3.json( "https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/agr_r_animal?format=json&lang=en&geoLevel=country&time=2018&unit=THS_HD&animals=A3100" ) ); //sheeps out.sheeps = indexStat( await d3.json( "https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/agr_r_animal?format=json&lang=en&geoLevel=country&time=2018&unit=THS_HD&animals=A4100" ) ); //goats out.goats = indexStat( await d3.json( "https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/agr_r_animal?format=json&lang=en&geoLevel=country&time=2018&unit=THS_HD&animals=A4200" ) ); //gdp out.gdp = indexStat( await d3.json( "https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/namq_10_gdp?format=json&lang=en&geoLevel=country&time=2022-q4&unit=CP_MEUR&S_ADJ=NSA&na_item=B1GQ" ) );*/ return out; }35:Tdfd,{ //initialise line constraint lists for (let lines of [map.xLines, map.yLines]) for (let line of lines) { line.constraints = []; line.hardConstraints = []; } //constrain region area to grow/shrink depending on the statistical value for (let r of map.regions) regionAreaC(r, getTargetArea(r.id), 1); //constrain elongation of rectangular regions. So that those regions keep a 'nice' shape and do not get too thin. const imp = 0.04; elongationC("IE", 1.5, imp); elongationC("IS", 0.65, imp); elongationC("LU", 1.8, imp); elongationC("NL", 1.2, imp); elongationC("BE", 0.5, imp); elongationC("PT", 3, imp); elongationC("MT", 1, imp); elongationC("ME", 1, imp); elongationC("XK", 1, imp); elongationC("MK", 0.8, imp); elongationC("CH", 0.5, imp); elongationC("CZ", 0.4, imp); elongationC("SI", 0.8, imp); elongationC("EE", 0.6, imp); elongationC("LV", 0.6, imp); elongationC("LT", 0.9, imp); elongationC("AL", 2.5, imp); elongationC("TR", 1 / 2.5, imp); elongationC("CY", 1 / 3, imp); elongationC("DK", 2, imp); elongationC("FI", 2.5, imp); elongationC("NO", 3, imp); //constrain shape preservation sidesC("SE", 0, 1, 3, 0.2); sidesC("SE", 5, 1, 2 / 3, 0.2); sidesC("SE", 3, 1, 1 / 3, 0.2); sidesC("SE", 2, 0, 1 / 4, 0.2); sidesC("SE", 4, 0, 3 / 4, 0.2); sidesC("AT", 0, 2, 0.5, 0.2); sidesC("AT", 1, 3, 1, 0.2); sidesC("EL", 5, 7, 1, 0.2); sidesC("ES", 0, 7, 1, 0.2); sidesC("ES", 1, 4, 1, 0.2); sidesC("FR", 0, 1, 1, 0.2); sidesC("FR", 5, 3, 1, 0.2); sides2C("FR", 7, "ES", 3, 2, 0.2); sidesC("IT", 0, 1, 1, 0.2); sidesC("IT", 1, 3, 1, 0.2); sidesC("IT", 0, 9, 1, 0.2); sidesC("IT", 7, 9, 1, 0.2); sidesC("DE", 1, 2, 1, 0.2); sidesC("DE", 3, 4, 1, 0.2); sidesC("DE", 4, 9, 1, 0.2); sidesC("RO", 0, 5, 1, 0.2); sidesC("RO", 0, 1, 1, 0.2); sidesC("RO", 2, 4, 2, 0.2); //constrain lines to remain within map boundaries for (let lines of [map.xLines, map.yLines]) for (let line of lines) line.hardConstraints.push(mapHC(line, 5)); //constraint top position //linePositionHC("IS", 1, 5); //constrain regions to remain valid //with special values for small countries: MT, LU for (let r of map.regions) regionValidityHC(r, r.id == "MT" ? 3 : r.id == "LU" ? 5 : 10); //constrain MT to remain below IT linesHC("IT", 7, "MT", 1, 5); //force DK/SE connection: South of sweden must be below north of DK linesHC("SE", 5, "DK", 1, 5); linesHC("SE", 4, "EE", 0, 5); linesHC("SE", 5, "DE", 3, 5); linesHC("FR", 1, "ES", 1, 5); linesHC("FR", 0, "BE", 0, 5); linesHC("NO", 3, "DK", 1, 5); //force south of FI to be north of EE linesHC("FI", 3, "EE", 1, 5); linesHC("FI", 2, "EE", 2, 0); //force south of TR to be north of CY linesHC("TR", 3, "CY", 1, 5); linesHC("TR", 2, "CY", 2, 30); //ME-AL linesHC("ME", 0, "AL", 0, 0); //HR linesHC("HR", 2, "HR", 6, 10); //EL linesHC("EL", 2, "EL", 6, 10); //PL-LT linesHC("PL", 2, "LT", 0, 5); linesHC("PL", 2, "LT", 2, 5); //ES-FR linesHC("PT", 2, "FR", 0, 5); linesHC("ES", 4, "FR", 6, 5); //IE linesHC("IE", 2, "NL", 0, 5); linesHC("IE", 2, "BE", 0, 5); linesHC("IE", 3, "FR", 1, 5); //DE linesHC("DE", 0, "DE", 6, 5); linesHC("DE", 1, "CZ", 1, 5); //SK linesHC("SK", 2, "SK", 6, 5); linesHC("SK", 1, "SK", 5, 5); //IT linesHC("IT", 2, "IT", 6, 3); linesHC("IT", 1, "IT", 5, 3); linesHC("IT", 6, "AL", 0, 5); //RS linesHC("RS", 2, "RS", 8, 3); linesHC("RS", 3, "RS", 7, 3); linesHC("RS", 3, "RS", 6, 3); }36:T78c,map = { const map = { regions: input }; //get line coordinates, ranked let xs = [], ys = []; for (let r of map.regions) { for (let x of r.x) xs.push(+x); for (let y of r.y) ys.push(+y); } xs = [...new Set(xs)]; ys = [...new Set(ys)]; xs.sort((a, b) => a - b); ys.sort((a, b) => a - b); //make the lines map.xLines = []; for (let i = 0; i < xs.length; i++) map.xLines.push({ id: "x" + i, pos: +xs[i], //idPos: "x" + +xs[i], i: i, or: "x", sides: [], constraints: [], hardConstraints: [] }); map.yLines = []; for (let i = 0; i < ys.length; i++) map.yLines.push({ id: "y" + i, pos: +ys[i], //idPos: "y" + +ys[i], i: i, or: "y", sides: [], constraints: [], hardConstraints: [] }); //index lines by or+pos const linesI = {}; for (let line of map.xLines) linesI["x" + line.pos] = line; for (let line of map.yLines) linesI["y" + line.pos] = line; //make sides //make side of a region r, which belongs to line, bounded by line1 and line2 const makeSide = (r, line, line1, line2) => { const side = { region: r, //id: r.id + "_" + line.pos, //debug line: line, line1: line1, line2: line2 }; r.sides.push(side); line.sides.push(side); }; for (let r of map.regions) { r.sides = []; for (let i = 0; i < r.x.length; i++) { //vertical side makeSide( r, linesI["x" + r.x[i]], linesI["y" + r.y[i == 0 ? r.y.length - 1 : i - 1]], linesI["y" + r.y[i]] ); //horizontal side makeSide( r, linesI["y" + r.y[i]], linesI["x" + r.x[i]], linesI["x" + r.x[i + 1 == r.x.length ? 0 : i + 1]] ); } } //scale for (let lines of [map.xLines, map.yLines]) for (let line of lines) line.pos *= scaleFactor; return map; }37:T532,engine = { const out = {}; let running = false; let interrupt_ = false; out.interrupt = () => { if (!running) return; interrupt_ = true; return out; }; out.run = async (nb, alpha, waitingTimeMS) => { interrupt_ = false; running = true; //do iterations let i = 0; while (i < nb) { //line by line, in sequential order for (let line of getShuffledLines()) { //store line current position const previousPos = line.pos; //compute candidate new position from constraint forces and move line for (let c of line.constraints) line.pos += alpha * c.importance * c.forceFun(); //if necessary, correct position according to the hard constraints const posH = getHardConstraintsPosition(line, previousPos); if (posH) //move to the middle //line.pos = (previousPos + posH) * 0.5; line.pos = posH; if (interrupt_) return; } //redraw map updateCanvas(); if (interrupt_) return; //pause before next iteration if (waitingTimeMS) await new Promise((res) => setTimeout(res, waitingTimeMS)); if (interrupt_) return; i++; } console.log("Done - nb= " + nb); running = false; return out; }; return out; }38:T50d,lines2C = (importance, line11, line12, line21, line22, ratio) => { if (ratio <= 0) { console.error("Unvalid ratio: " + ratio); return; } //ensures line11.pos < line12.pos const l11 = line11.pos < line12.pos ? line11 : line12; const l12 = line11.pos < line12.pos ? line12 : line11; //ensures line21.pos < line22.pos const l21 = line21.pos < line22.pos ? line21 : line22; const l22 = line21.pos < line22.pos ? line22 : line21; // 4 constraints must be added, one for each of the four lines. line11.constraints.push({ importance: importance, forceFun: getlinesRelativeDistanceConstraintForceFun( l11, l12, l21, l22, 1, ratio ) }); line12.constraints.push({ importance: importance, forceFun: getlinesRelativeDistanceConstraintForceFun( l11, l12, l21, l22, -1, ratio ) }); line21.constraints.push({ importance: importance, forceFun: getlinesRelativeDistanceConstraintForceFun( l21, l22, l11, l12, 1, 1 / ratio ) }); line22.constraints.push({ importance: importance, forceFun: getlinesRelativeDistanceConstraintForceFun( l21, l22, l11, l12, -1, 1 / ratio ) }); }39:[] 2f:{"title":"Welcome to pipe cartogram !","cells":[{"id":0,"value":"# Welcome to pipe cartogram !\n\nThis is an attempt to introduced a (new?) type of cartogram, called **pipe cartogram**. Such cartogram relies on a schematic map of regions drawn only with vertical and horizontal lines (like a pipe network). The regions are deformed by moving the lines horizontally and vertically so that the region areas becomes proportional to a statistical variable.","pinned":false,"hidden":false,"mode":"md"},{"id":3525,"value":"viewof variable = Inputs.select(options, {\n label: \"Size by\",\n format: (x) => x.lbl,\n value: options.find((t) => t.lbl === \"Area\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3874,"value":"\n","pinned":false,"hidden":false,"mode":"html"},{"id":1013,"value":"canvas = {\n const context = DOM.context2d(w, h);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3533,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3078,"value":"engine.run(2000, 10, 0.0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1058,"value":"updateCanvas()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1019,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"## Specify inputs\n\n### Define the initial map","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"The regions composing the map.\n\nA region geometry is represented as two arrays of map lines: *x* is the array of vertical lines and *y* is the array of horizontal lines. There must be as many horizontal lines as vertical lines. The outline is described clockwise. A region cannot have holes. There are at least 4 lines per region, 2 for *x* and 2 for *y* (the rectangle case).","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2416,"value":"### Get statistics","pinned":false,"hidden":false,"mode":"md"},{"id":1207,"value":"Some statistics from [Eurostat](https://ec.europa.eu/eurostat) API, by region:","pinned":false,"hidden":false,"mode":"md"},{"id":3344,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1414,"value":"The function defining for each region the target area. The deformation engine will try to optimise the position of the region lines so that the region area get there target value.","pinned":false,"hidden":false,"mode":"md"},{"id":1301,"value":"getTargetArea = (id) => {\n return stats[variable.code][id] * variable.k;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3283,"value":"### Set map constraints\n\nThe target map is specified by putting constraints on some map elements. These constraints are then used to guide the map deformation engine (see below).","pinned":false,"hidden":false,"mode":"md"},{"id":1934,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"## Structured data","pinned":false,"hidden":false,"mode":"md"},{"id":363,"value":"Build data structure, from the input.\n\nThe data structure includes the regions, the lines and the sides of the regions. A region side is defined by the two lines it is bounded by. A line is the support for one or several sides. The entire map geometry is supported by the *pos* property of the lines. The line property *or* represents line orientation.","pinned":false,"hidden":false,"mode":"md"},{"id":307,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":3211,"value":"scaleFactor = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":1955,"value":"getRegionById = (id) => {\n for (let r of map.regions) if (r.id === id) return r;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3279,"value":"## Engine\n\nThe engine move the line positions to satisfy as much their constraints, or balance them.","pinned":false,"hidden":false,"mode":"md"},{"id":228,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":3001,"value":"Make shuffled list of lines:","pinned":false,"hidden":false,"mode":"md"},{"id":3003,"value":"getShuffledLines = () => {\n const out = [];\n for (let line of map.xLines) out.push(line);\n for (let line of map.yLines) out.push(line);\n shuffleArray(out);\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2156,"value":"Compute corrected position from hard constraints","pinned":false,"hidden":false,"mode":"md"},{"id":1932,"value":"getHardConstraintsPosition = (line, previousPos) => {\n let sum = 0,\n nb = 0;\n for (let hct of line.hardConstraints) {\n const pos = hct();\n if (pos === undefined) continue;\n sum += +pos;\n nb++;\n }\n if (nb == 0) return;\n return sum / nb;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1755,"value":"## Constraints","pinned":false,"hidden":false,"mode":"md"},{"id":2111,"value":"Constraints are defined on map elements to specify the state of the final map. The constraints are beared by the lines. They result in a force which applies to the lines and tend to move it in a direction orthogonal to the line direction.","pinned":false,"hidden":false,"mode":"md"},{"id":1808,"value":"### Region area constraint\n\nThis constraint is defined on a region. It forces its area to be proportional to its statistical value. Its effect is to move the region sides to alter the region area.","pinned":false,"hidden":false,"mode":"md"},{"id":3066,"value":"regionAreaC = (r, targetArea, importance) => {\n //add side pressure constraints\n for (let s of r.sides) {\n s.line.constraints.push({\n importance: importance,\n forceFun: getSidePressureForceFun(s, targetArea)\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"Compute the area and perimeter of a region.","pinned":false,"hidden":false,"mode":"md"},{"id":442,"value":"getArea = (r) => {\n let area = 0;\n for (let s of r.sides) {\n if (s.line.or == \"x\") continue;\n area += s.line.pos * (s.line1.pos - s.line2.pos);\n }\n return area;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"getPerimeter = (r) => {\n let per = 0;\n for (let s of r.sides) per += getSideLength(s);\n return per;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"getSideLength = (s) => getLinesDistance(s.line1, s.line2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2309,"value":"getLinesDistance = (line1, line2) => Math.abs(line2.pos - line1.pos)","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"Compute the pressure of a region. This pressure is negative when the region need to be deflated, and positive when it needs to be inflated. The pressure is computed as the quantity of \"air\" that is missing (that is the difference between the expected and current area) over the current area of the region.","pinned":false,"hidden":false,"mode":"md"},{"id":231,"value":"getRegionPressure = (r, targetArea) => {\n if (!targetArea || isNaN(targetArea)) return 0;\n const a = getArea(r);\n return (targetArea - a) / a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"The side pressure force depends on the region pressure and the share of the side length in the region perimeter.","pinned":false,"hidden":false,"mode":"md"},{"id":566,"value":"getSidePressureForceFun = (s, targetArea) => {\n return () => {\n //Note: since the region sides are defined clockwise, the region is always on the right of its sides.\n const dir =\n Math.sign(s.line2.pos - s.line1.pos) * (s.line.or == \"y\" ? -1 : 1);\n return (\n (dir * getRegionPressure(s.region, targetArea) * getSideLength(s)) /\n getPerimeter(s.region)\n );\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2149,"value":"### Lines minimum distance constraint\n\nThis constraint is defined on a pair of lines. It forces the distance between the line to be above some minimum threshold value. Both lines are supposed to have the same orientation (either vertical or horizontal).","pinned":false,"hidden":false,"mode":"md"},{"id":2260,"value":"*line1* is expected to be the one with lower position than *line2*.","pinned":false,"hidden":false,"mode":"md"},{"id":2251,"value":"minimumDistanceC = (importance, or, line1, line2, minDistancePix) => {\n if (line1.pos >= line2.pos) {\n console.warn(\n \"Unexpected line position order in constrainLinesMinimumDistance. Contraint ignored.\"\n );\n return;\n }\n const lines = or === \"x\" ? map.xLines : map.yLines;\n line1.constraints.push({\n importance: importance,\n forceFun: getLinesMinimumDistanceFun(line1, line2, -1, minDistancePix)\n });\n line2.constraints.push({\n importance: importance,\n forceFun: getLinesMinimumDistanceFun(line1, line2, +1, minDistancePix)\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2852,"value":"getLinesMinimumDistanceFun = (line1, line2, dir, minDistancePix) => {\n return () => {\n //current distance between lines\n const d = line2.pos - line1.pos;\n\n //distance large enough: return null force\n if (d >= minDistancePix) return 0;\n\n return (dir * (minDistancePix - d)) / d;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2882,"value":"### Lines distance constraint\n\nTODO - similar to the previous constraint. Do one for maximum distance as well?","pinned":false,"hidden":false,"mode":"md"},{"id":2294,"value":"### Lines relative distance constraint\n\nThis constraint is defined on two pairs of lines. The two lines composing each pair must have the same orientation (vertical or horizontal). The constraint forces the ratio between the distances between the two lines of each pair to be keep a fixed value. This constraint can be used for example to ensure a side length remains *X* times the length of another side. It may be used to preserve the elongation of a rectangular region. It may also be used to ensure the relative position between regions is preserved.","pinned":false,"hidden":false,"mode":"md"},{"id":2316,"value":"The line pairs *(line11, line12)* and *(line21, line 22)* are constrained so that: *dist(line11, line12) = ratio . dist(line21, line22)*.","pinned":false,"hidden":false,"mode":"md"},{"id":2863,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2303,"value":"getlinesRelativeDistanceConstraintForceFun = (\n line1,\n line2,\n lineTarget1,\n lineTarget2,\n dir,\n ratio\n) => {\n return () => {\n //compute distance\n const d = line2.pos - line1.pos;\n if (d < 0)\n console.warn(\n \"Unexpected d<0 in getlinesRelativeDistanceConstraintForceFun\"\n );\n //compute target distance\n const dT = ratio * (lineTarget2.pos - lineTarget1.pos);\n if (dT < 0)\n console.warn(\n \"Unexpected dT<0 in getlinesRelativeDistanceConstraintForceFun\"\n );\n //force\n return (dir * (d - dT)) / d;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1731,"value":"### Sides relative length constraint\n\nThis constraint ensures regions keep a desired shape by constraining sides to keep relative lengths. The lines bounding sides *s1* and *s2* are constrained so that *s1 = ratio . s2*. This constraint is based on the previous one: It applies to the line pairs of 2 region sides.","pinned":false,"hidden":false,"mode":"md"},{"id":4091,"value":"sides2C = (rId1, sI1, rId2, sI2, ratio, importance) => {\n //get the regions\n const r1 = getRegionById(rId1);\n if (!r1) {\n console.log(\"Cannot find region with id \" + rId1);\n return;\n }\n const r2 = getRegionById(rId2);\n if (!r2) {\n console.log(\"Cannot find region with id \" + rId2);\n return;\n }\n\n //get the sides\n const s1 = r1.sides[sI1];\n const s2 = r2.sides[sI2];\n\n lines2C(\n importance,\n s1.line1.pos < s1.line2.pos ? s1.line1 : s1.line2,\n s1.line1.pos < s1.line2.pos ? s1.line2 : s1.line1,\n s2.line1.pos < s2.line2.pos ? s2.line1 : s2.line2,\n s2.line1.pos < s2.line2.pos ? s2.line2 : s2.line1,\n ratio\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4097,"value":"Case when both sides belong to the same region:","pinned":false,"hidden":false,"mode":"md"},{"id":1889,"value":"sidesC = (rId, sI1, sI2, ratio, importance) => {\n sides2C(rId, sI1, rId, sI2, ratio, importance);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2331,"value":"### Rectangular region elongation","pinned":false,"hidden":false,"mode":"md"},{"id":2065,"value":"This constraint ensures a rectangular region elongation (the ratio between consecutive side lengths) is preserved. This constraint is based on the previous one, for 2 consecutive sides of a rectangular region.","pinned":false,"hidden":false,"mode":"md"},{"id":2030,"value":"elongationC = (rId, elongation, importance) => {\n sidesC(rId, 0, 1, elongation, importance);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1679,"value":"## Hard constraints","pinned":false,"hidden":false,"mode":"md"},{"id":2118,"value":"Hard constraints define map states that are forbidden and must be prevented. Every time a line moves to such forbidden state, it goes back to a previous position. For example, the map elements should remain within the map frame and the regions must remain valid.\n\nA hard constraint is specified as a function which returns:\n- if the constraint is not satisfied, the line position which satisfies it.\n- if the constraint is satisfied, nothing.\n","pinned":false,"hidden":false,"mode":"md"},{"id":1716,"value":"### Map boundaries constraint","pinned":false,"hidden":false,"mode":"md"},{"id":1682,"value":"This constraint ensures a line does not move outside of the map boundaries.","pinned":false,"hidden":false,"mode":"md"},{"id":1675,"value":"mapHC = (line, paddingPix) => {\n return () => {\n //line position too low: return the minimum position\n if (line.pos < paddingPix) return paddingPix;\n\n //line position too high: return maximum value\n let lim = line.or === \"x\" ? w : h;\n lim -= paddingPix;\n if (line.pos > lim) return lim;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2897,"value":"TODO: more generic: line remain within interval ?","pinned":false,"hidden":false,"mode":"md"},{"id":2906,"value":"### Lines relative position\n\nThis constraint ensures two lines remain in the same order. None of them jumps across the other.","pinned":false,"hidden":false,"mode":"md"},{"id":2913,"value":"linesHC_ = (line1, line2, minDistPix) => {\n //ensures line1.pos < line2.pos\n const l1 = line1.pos < line2.pos ? line1 : line2;\n const l2 = line1.pos < line2.pos ? line2 : line1;\n\n //constraint on line1\n l1.hardConstraints.push(\n getLinesPairHConstraintFun(l1, l1, l2, +1, minDistPix)\n );\n //constraint on line2, same in opposite direction\n l2.hardConstraints.push(\n getLinesPairHConstraintFun(l2, l1, l2, -1, minDistPix)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2910,"value":"getLinesPairHConstraintFun = (line, line1, line2, dir, minDistPix) => {\n return () => {\n //compute length, always >0\n const len = line2.pos - line1.pos;\n //constraint ok\n if (len > minDistPix) return;\n //constraint not ok\n return line.pos + dir * (len - minDistPix);\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3438,"value":"linesHC = (rId1, sI1, rId2, sI2, minDistPix) => {\n //get the regions\n const r1 = getRegionById(rId1);\n if (!r1) {\n console.log(\"Cannot find region with id \" + rId1);\n return;\n }\n const r2 = getRegionById(rId2);\n if (!r2) {\n console.log(\"Cannot find region with id \" + rId2);\n return;\n }\n\n //get the side lines\n const line1 = r1.sides[sI1].line;\n const line2 = r2.sides[sI2].line;\n\n linesHC_(line1, line2, minDistPix);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3428,"value":"### Region validity\n\nSet constraint on region lines so that the region geometry remain valid. This prevent for example the region sides to shrink or to have lines jumping each other.","pinned":false,"hidden":false,"mode":"md"},{"id":3430,"value":"regionValidityHC = (r, minDistPix) => {\n for (let s of r.sides) linesHC_(s.line1, s.line2, minDistPix);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3952,"value":"### Line position\n\nThis constraint ensures a line position is forced to keep a predefined position. This can be used to force the map content to stick to the top right of its frame.","pinned":false,"hidden":false,"mode":"md"},{"id":3960,"value":"linePositionHC = (rId, sI, targetPostition) => {\n //get the region\n const r = getRegionById(rId);\n if (!r) {\n console.log(\"Cannot find region with id \" + rId);\n return;\n }\n\n //get the side lines\n const line = r.sides[sI].line;\n\n //constraint on line\n line.hardConstraints.push(\n getLinePositionConstraintFun(line, targetPostition)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3955,"value":"getLinePositionConstraintFun = (line, targetPosition) => {\n return () => {\n if (line.pos != targetPosition) return targetPosition;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":47,"value":"w = 230 * 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"h = 200 * 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":3012,"value":"shuffleArray = (array) => {\n for (let i = array.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n const temp = array[i];\n array[i] = array[j];\n array[j] = temp;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3341,"value":"indexStat = function (data) {\n const arr = Object.entries(data.dimension.geo.category.index).map(\n ([key, val]) => ({ id: key, val: +data.value[val] || null })\n );\n const ind = {};\n for (var i = 0; i < arr.length; i++) ind[arr[i].id] = arr[i].val;\n return ind;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}