verkaveling bg HHW 190219

2b:null 2c:["$","title",null,{"children":"SVGcentroids | janwinsemius | Observable"}] 31:T20bd,mysvg2 = html``32:T73e8,mysvg = html` `33:T8d0,transformPath = (path) => { let transform = path.getAttribute('transform').replace('translate(','').replace(')','').split(' ').map(d=> +d); let d = path.getAttribute('d'); let changes = [...d.matchAll('[A-Za-z](.*?)(?=[A-Za-z])')]; let i; for (i=0;i +d); let newM = [oldM[0] + transform[0], oldM[1] + transform[1]]; let Mstring = newM.join(','); changes[i][1] = 'M' + Mstring } else if (changes[i][0][0] == 'H') { let oldH = +changes[i][1]; let newH = oldH + transform[0]; let Hstring = String(newH); changes[i][1] = 'H' + Hstring; // console.log(oldH, newH, changes[i][1]) } else if (changes[i][0][0] == 'V') { // console.log(changes) let oldV = changes[i][1]; let newV = +oldV + transform[1]; let Vstring = String(newV); changes[i][1] = 'V' + Vstring; } else if (changes[i][0][0] == 'L') { let oldL = changes[i][1].split(',').map(d => +d); let newL = [oldL[0] + transform[0], oldL[1] + transform[1]]; let Lstring = newL.join(','); changes[i][1] = 'L' + Lstring; } else if (changes[i][0][0] == 'C') { // KLOPT NOG NIET let oldC = changes[i][1].split(',').map(d => +d) let newC = oldC.map(d => [d[0] + transform[0], d[1] + transform[1]]) let Cstring = newC.join(',') changes[i][1] = 'C' + Cstring } else if (changes[i][0][0] == 'A') { let oldA = changes[i][1].split(',').map(d => +d) let newA = oldA newA[oldA.length-2] = oldA[oldA.length-2] + transform[0] newA[oldA.length-1] = oldA[oldA.length-1] + transform[1] let Astring = newA.join(',') changes[i][1] = 'A' + Astring // let oldC = changes[i][1].split(',').map(d => +d) // let newC = oldC.map(d => [d[0] + transform[0], d[1] + transform[1]]) // console.log(newC) // let Cstring = newC.join(',') // changes[i][1] = 'C' + Cstring // console.log(oldH, newH, changes[i][1]) } else { // console.log('TEST', changes[i]) changes[i][1] = changes[i][0] } } d = ''; for (let a of changes) { d += a[1] } // console.log(d) return d + 'Z' }34:Taac,pathToPolygon = (d) => { let dcoords = []; // let d = path.getAttribute('d') let changes = [...d.matchAll('[A-Za-z](.*?)(?=[A-Za-z])')] let i; for (i=0;i 0? changes[i-1][changes[i-1].length-1] : [0,0] if (changes[i][0][0] === 'M') { let oldM = changes[i][1] .replace('M','') .replaceAll('-', ',-') .replaceAll('-.', '-0.') .replaceAll(',.', ',0.') .split(',') let newM = [+oldM[0], +oldM[1]] changes[i][1] = [newM] } else if (changes[i][0][0] === 'H') { let oldH = +changes[i][1] let newH = [+oldH, +lastpoint[0][1]] changes[i][1] = [newH] } else if (changes[i][0][0] === 'h') { let oldh = +changes[i][1] let newh = [+lastpoint[0][0] + oldh, lastpoint[0][1]] changes[i][1] = [newh] } else if (changes[i][0][0] === 'V') { let oldV = +changes[i][1] let newV = [+lastpoint[0][0], oldV] changes[i][1] = [newV] } else if (changes[i][0][0] === 'v') { let oldv = +changes[i][1] let newv = [lastpoint[0][0], lastpoint[0][1] + oldv] changes[i][1] = [newv] } else if (changes[i][0][0] === 'l') { let oldl = changes[i][1].replaceAll('-', ',-') oldl = oldl.replaceAll('-.', '-0.') oldl = oldl.replaceAll(',.', ',0.') oldl = oldl.split(',') for (let i = 0; i 2) { let firstsplit = oldl[i].split('.') let first = [firstsplit[0], firstsplit[1]].join('.') let second = [0, firstsplit[2]].join('.') let newl = [first, second]; oldl[i] = first oldl.splice(i+1,0, second) } } if (oldl.length % 2 !== 0) { oldl.shift() } let newl = [] for (let z=0; z +d) let newL = [oldL[0], oldL[1]] changes[i][1] = [newL] } else { let letter = changes[i][0][0] let olda = changes[i][1] let tempa = `M ${lastpoint[0][0]} ${lastpoint[0][1]}${letter}${olda} Z`; console.log('TAMPA', tempa) let pathcopy = d3.select('.emptypath').node() pathcopy.setAttribute('d', tempa) let tempnew = pathToSimplePolygon(pathcopy) changes[i][1] = tempnew } } for (let change of changes) { let tempd = change[1]; dcoords.push(...tempd) } return dcoords // return changes }35:T8b2,svgObj = { let mySVG = {}; mySVG.plattegrond = [] let i=0; for (let path of allpaths) { switch(path.tagName) { case 'path': { console.log(i, 'TAGNAME', path.tagName) let d = transformPath(path) let coordinates = pathToPolygon(d) let centroid = pathToCentroid(path) mySVG.plattegrond.push({ 'd': d, 'centroid': centroid, 'coordinates': coordinates, 'id': i, 'ruimtetype': '', 'class': 'floorplan__path' }) break; } case 'polygon': { let d = pathStrFromPolygon(path) let coordinates = d.replace('M', '') .replace('z', '') .split(' ') .map(d => d.split(',')) .map(e=> [+e[0], +e[1]]) let centroid = d3.polygonCentroid(polygonArrayFromPathPoints(path)) mySVG.plattegrond.push({ 'd': d, 'centroid': centroid, 'coordinates': coordinates, 'id': i, 'ruimtetype': '', 'class': 'floorplan__path'}) break; } case 'rect': { let d = pathStrFromRect(path) let coordinates = d.replace('M', '') .replace('z', '') .split(' ') .map(d => d.split(',')) .map(e=> [+e[0], +e[1]]) let centroid = rectToCentroid(path) mySVG.plattegrond.push({ 'd': d, 'centroid': centroid, 'coordinates': coordinates, 'id': i, 'ruimtetype': '', 'class': 'floorplan__path'}) break; } default: { let d = 'M0,0l100,100' let coordinates = [0,0] let centroid = [0,0] mySVG.plattegrond.push({ 'd': d, 'centroid': centroid, 'coordinates': coordinates, 'id': i, 'ruimtetype': '', 'class': 'floorplan__centroid'}) break; } } i++; } mySVG.minmax=minmax return mySVG }36:T64f,minmax = { let mySVG = []; for (let path of allpaths) { switch(path.tagName) { case 'path': { let d = transformPath(path) let centroid = pathToCentroid(path) mySVG.push({'d': d, 'centroid': centroid}) break; } case 'polygon': { let d = pathStrFromPolygon(path) let centroid = d3.polygonCentroid(polygonArrayFromPathPoints(path)) mySVG.push({'d': d, 'centroid': centroid}) break; } case 'rect': { let d = pathStrFromRect(path) let centroid = rectToCentroid(path) mySVG.push({'d': d, 'centroid': centroid}) break; } default: { let d = 'M0,0 100,100' let centroid = [0,0] mySVG.push({'d': d, 'centroid': centroid}) break; } }} let rowstrings = []; let rowarrays = []; let xcoor = []; let ycoor = []; let coor = [] let rowstring, rowarray, rowcoords for (let a of mySVG) { rowstring = a.d.substr(1); rowstrings.push(rowstring) rowarray = rowstring.split(' '); rowarrays.push(rowarray) for (let b of rowarray) { let arraycoor = b.split(",") coor.push(arraycoor) } let i = 0; for (let b of coor) { xcoor.push(+b[0]); ycoor.push(+b[1]); i++; } } let xmax = d3.max(xcoor); let xmin = d3.min(xcoor); let ymax = d3.max(ycoor); let ymin = d3.min(ycoor); let minmax = { 'xmin':xmin, 'xmax':xmax, 'ymin':ymin, 'ymax':ymax, } return minmax }37:[] 2f:{"id":"9bb930e26dd0d508","slug":null,"title":"SVGcentroids","thumbnail":"abed9501c8a5055ea10267103305a794f965e5c99f495539b76ead3f710ef118","access_level":"public","create_time":"$D2020-02-11T13:34:29.899Z","update_time":"$D2020-12-18T08:42:37.140Z","view_time":null,"first_public_time":"$D2023-10-18T13:52:30.268Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"fd1203a2e684dbf7","login":"janwinsemius","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e256aabece3320d664e50005a399ff232b5ee831167a3dba2ab9bf40723f4887","tier":"starter_2024"},"version":1844,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"63535cd3bf8a00ee","login":"janwinsemius","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e256aabece3320d664e50005a399ff232b5ee831167a3dba2ab9bf40723f4887","tier":null}],"members":[{"type":"individual","id":"63535cd3bf8a00ee","login":"janwinsemius","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e256aabece3320d664e50005a399ff232b5ee831167a3dba2ab9bf40723f4887","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SVGcentroids","cells":[{"id":0,"value":"md`# SVGcentroids`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"md`

Make your own conversion`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"md` To make your own conversion just copy svg in place of mysvg and download svg, or download csv. both have centroids in right position.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"md`

convert paths to polygons`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"md` D3 has a method for getting paths on polygons. You often see axamples of this method in maps visualisations with path.centroid(). These examples are a bit confusing in the sense that \"path\" in this example isn't a generic path, but actually a polygon, used to construct a path. The centoid method only works on arrays of [x,y] points. You can't directly use it on a path like d: \"M1200,300, ... something. \n\nIn order to do that you will need to construct the polygon. A full conversion isn't possible on paths that have arcs, because polygons don't use paths.\nFor this purpose a temporary polygon can be constructed bij the getPointAtLength method for svg elements. The constructed polygon can be used for the centroid whilst the original path can still be used for the drawing.\n\nto actually convert the path to a polygon that would be used in the drawing it would be appropriatie to use another method.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"md `# static svg with dynamically drawn centroids`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1135,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"DOM.download(() => serialize(mysvg), undefined, \"Save as SVG\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":855,"value":"DOM.download(() => rasterize(mysvg), undefined, \"Save as PNG\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"md`# Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"M = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"polygonArrayFromPathPoints = (pth) => { \n let myarr = [];\n let pointString = pth.getAttribute('points');\n let pointArray = pointString.split(' ');\n for (let i=0; i < pointArray.length; i+=2) {\n myarr.push([+pointArray[i], +pointArray[i+1]])\n }\n return myarr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"pathStrFromPolygon = (pth) => { \n let pointstr = ''\n let myarr = [];\n let pointarr = pth.getAttribute('points').split(' ')\n for (let i=0; i {\n let X = +rect.getAttribute('x');\n let Y = +rect.getAttribute('y');\n let W = +rect.getAttribute('width');\n let H = +rect.getAttribute('height');\n let X1 = X + W;\n let Y1 = Y + H ;\n let rectstring = 'M'+ X + ',' + Y +' '\n + X1 + ',' + Y +' '\n + X1 + ',' + Y1 +' '\n + X + ',' + Y1 +'z';\n return rectstring;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"pathToSimplePath = (path) => {\n let L = path.getTotalLength();\n let SimplePolygon = Array.from({length: M}, (_, i) => {\n const {x, y} = path.getPointAtLength(i / M * L);\n return [x, y];\n });\n let mystring = 'M' + SimplePolygon.join(' ') + 'z';\n return mystring;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1480,"value":"md `### transform van paden als sprake is van transform... Als geen transform moet dit er waarschijnlijk uit. Niet alle letters zijn afgemaakt, alleen wat er in de plattegrond van Alkmaar zat`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1192,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1479,"value":"c = [0,0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1589,"value":"pathToSimplePolygon(allpaths[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"pathToSimplePolygon = (path) => {\n let L = path.getTotalLength();\n let SimplePolygon = Array.from({length: M}, (_, i) => {\n const {x, y} = path.getPointAtLength(i / M * L);\n return [x, y];\n });\n return SimplePolygon;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1756,"value":"emptypath = svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1826,"value":"pathToPolygon(allpaths[176].getAttribute('d'))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1496,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"pathToCentroid = (path) => {\n let L = path.getTotalLength();\n let temparr = Array.from({length: M}, (_, i) => {\n const {x, y} = path.getPointAtLength(i / M * L);\n return [x, y];\n });\n let centroid = d3.polygonCentroid(temparr);\n let transform;\n path.getAttribute('transform')!== 'none'? \n transform = Array.from(path.getAttribute('transform').replace(/[^\\d.-.,.' '.-]/g, '').split()[0].split(' ')):\n transform = [0,0];\n \n centroid[0] = parseInt(centroid[0]) + parseInt(transform[0]);\n centroid[1] = parseInt(centroid[1]) + parseInt(transform[1]);\n return centroid;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"rectToCentroid = (path) => {\n let centroid = [\n (+path.getAttribute('x') + path.getAttribute('width')/2), \n (+path.getAttribute('y') + path.getAttribute('height')/2)\n ]\n return centroid\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"md`# Making the centroids for all elements`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1138,"value":"md `### NB allpaths selecteert op classname, dat is nog niet echt generiek...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1144,"value":"md `allpaths pakt paden uit geplakte svg op basis van classname`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"allpaths = mysvg.getElementsByClassName(\"cls-1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1183,"value":"md `poging om meer generiek te maken. dan selecteer je ook alle tekst mee. Misschien best om direct polygonen en dergelijke te selecteren in conversie`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"test = {\n let mysvg = d3.selectAll('.mysvg')\n let mychildren = mysvg.selectAll(function() { return this.childNodes})\n return mychildren\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"AllCentroids = {\n let myarr = [];\n for (let path of allpaths) {\n path.tagName==='path' ?\n myarr.push(pathToCentroid(path)):\n path.tagName==='polygon'? myarr.push(d3.polygonCentroid(polygonArrayFromPathPoints(path))): \n path.tagName==='rect'? myarr.push(\n [(+path.getAttribute('x') + path.getAttribute('width')/2), \n (+path.getAttribute('y') + path.getAttribute('height')/2)]):\n path.tagName==='circle'? myarr.push([+path.getAttribute('cx'), +path.getAttribute('cy')]):\n console.log('element not in pathfunctions')\n }\n d3.select(mysvg)\n .selectAll('circle')\n .data(myarr)\n .enter()\n .append('circle')\n .attr('cx', d => d[0])\n .attr('cy', d => d[1])\n .attr('r', 5)\n .style('fill', 'red')\n \n return myarr\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"md`# Make json with paths and centroids`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"md` This is the full array of svg paths and centroids.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1188,"value":"pathToSimplePath(allpaths[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1777,"value":"md `Object met alle info. Per path wordt pathtransform gedaan, zodat coordinaten niet getransformeerd zijn. NBis nodig omdat het mogelijk is dat er paden met enz onder trNsform zijn, ... denk ik. Ook per path, op basis van transformed path een centroid. En per path op basis van transformed, coordinaten.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1097,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"md `Download svg paths as csv file for use elsewhere.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"DOM.download(serializeCSV(svgObj), \"mysvg\", \"Download CSV\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1081,"value":"createJsonDownloadButton(svgObj, 'plattegrond.json', 'Download JSON')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1079,"value":"import { createJsonDownloadButton } from \"@trebor/download-json\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"md`Get array of points from the path. precision is set bij M. For the purpose of centering labels the porecision doen't need to be extremey high, though higher precision will be required with more complex shapes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"md` reason for this exercise is the svg below, that is from a svg-export from a floorplan drawn by an arcrhitect. As you can see most of the paths are polygons, there are some rects, but there is also a couple of complex paths. These are converted in te drawing above.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"d3 = require(\"d3@5\",\"d3-geo@1\", \"d3-tile@0.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"json2csv = require(\"json2csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"serialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n const fragment = window.location.href + \"#\";\n const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT, null, false);\n while (walker.nextNode()) {\n for (const attr of walker.currentNode.attributes) {\n if (attr.value.includes(fragment)) {\n attr.value = attr.value.replace(fragment, \"#\");\n }\n }\n }\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"function rasterize(svg) {\n let resolve, reject;\n const promise = new Promise((y, n) => (resolve = y, reject = n));\n const image = new Image;\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(rect.width, rect.height);\n context.drawImage(image, 0, 0, rect.width, rect.height);\n context.canvas.toBlob(resolve);\n };\n image.src = URL.createObjectURL(serialize(svg));\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"simplemap(svgObj.plattegrond)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1083,"value":"d3.select(mysvg).node().getBBox().height","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"simplemap = (svgObj) => { \n let width = 2500\n let height = 2500\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n \n let g = svg.append('g')\n .attr('class', 'gebieden')\n .selectAll('path')\n .data(svgObj)\n .enter().append('path')\n .attr('fill', 'grey')\n .attr('stroke', 'black')\n .attr('d', d => d.d)\n .on('click', function() {\n d3.select(this)\n .classed('active', true)\n .attr('fill', 'blue')\n })\n \n return svg.node()\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1032,"value":"new Image","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"function serializeCSV (data) {\n let parser = new json2csv.Parser();\n let csv = parser.parse(data);\n return new Blob([csv], {type: \"text/csv\"}) \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 30:"$2f:body"