2a:null 2b:["$","title",null,{"children":"From her to eternity... | linard-y | Observable"}] 31:T1321,viewof options = Inputs.form({ // ##### Tracing #### // // Enable or disable CORS Image loading corsenabled : Inputs.toggle({label:html`corsenabled`, value: false}), // // Error threshold for straight lines. ltres : Inputs.range([0, 5], {label: html`ltres`, step: 0.01, value:0.1}), // // Error threshold for quadratic splines. qtres : Inputs.range([0, 50], {label: html`qtres`, step: 1, value:0.5}), // // Edge node paths shorter than this will be discarded for noise reduction. pathomit : Inputs.range([0, 500], {label: html`pathomit`, step: 1, value:6}), // // Enhance right angle corners. rightangleenhance : Inputs.toggle({label:html`rightangleenhance`, value: false}), // #### Color quantization #### // // 0: disabled, generating a palette; 1: random sampling; 2: deterministic sampling colorsampling : Inputs.range([0,2], {label:html`colorsampling`, step: 1, value:2}), // // Number of colors to use on palette if pal object is not defined. numberofcolors : Inputs.range([0,256], {label:html`numberofcolors`, step: 1, value:10}), // // Color quantization will randomize a color if fewer pixels than (total pixels*mincolorratio) has it. mincolorratio : Inputs.range([0,5], {label:html`mincolorratio`, step: 0.01, value:0}), // // Color quantization will be repeated this many times. colorquantcycles : Inputs.range([0,15], {label:html`colorquantcycles`, step: 1, value:3}), // #### Layering method #### // // 0: sequential ; 1: parallel layering : Inputs.select([0,1], {label:html`layering`, value:1}), // #### SVG rendering #### // // SVG stroke-width strokewidth : Inputs.range([0, 10], {label: html`strokewidth`, step: 0.1, value:0.6}), // // Enable or disable line filter for noise reduction. linefilter : Inputs.toggle({label:html`linefilter`, value: true}), // // Every coordinate will be multiplied with this, to scale the SVG. scale : Inputs.range([0.1,10], {label:html`SVG output scale`, step: 0.1, value:1}), // // Rounding coordinates to a given decimal place. 1 means rounded to 1 decimal place like 7.3 ; 3 means rounded to 3 places, like 7.356 roundcoords : Inputs.range([1, 8], {label: html`roundcoords`, step: 1, value:8}), // // Enable or disable SVG viewBox. viewbox : Inputs.toggle({label:html`viewbox`, value: false}), // // Enable or disable SVG descriptions. desc : Inputs.toggle({label:html`desc`, value: false}), // #### Blur preprocessing #### // // Set this to 1..5 for selective Gaussian blur preprocessing. blurradius : Inputs.range([0, 5], {label: html`blurradius`, step: 0.5, value:0}), // // RGBA delta threshold for selective Gaussian blur preprocessing. blurdelta : Inputs.range([0, 500], {label: html`blurdelta`, step: 1, value:20}), // #### Debug #### // // Straight line control point radius, if this is greater than zero, small circles will be drawn in the SVG. Do not use this for big/complex images. lcpr : Inputs.range([0, 5], {label: html`lcpr`, step: 0.5, value:0}), // // Quadratic spline control point radius, if this is greater than zero, small circles and lines will be drawn in the SVG. Do not use this for big/complex images. qcpr : Inputs.range([0, 5], {label: html`qcpr`, step: 0.5, value:0}), // #### Initial palette #### // // Custom palette, an array of color objects: [ {r:0,g:0,b:0,a:255}, ... ] pal : Inputs.text({label: html`pal`, placeholder: "palette", value: ""}) }, { template: (inputs) => htl.html`

${Object.values(inputs)}

`});32:T6f8,lands = { const proj = d3.geoMollweide() .fitExtent([[0, 0], [width, height]], ({ type: "Sphere" })) const path = d3.geoPath(proj); const svg = d3.select(DOM.svg(width, height)); const map = svg.append('g'); const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden"); // MAP BACKGROUND (SEA) map.append('path') .datum({type:"Sphere"}) .attr('stroke', 'none') .attr('fill', '#b7c9e2') .attr('d', path); map.append('path') .datum(d3.geoGraticule().step([20, 20])()) .attr('stroke', '#000000') .attr('stroke-width', 0.1) .attr('fill', 'none') .attr('d', path); map.append('path') .datum({type:"Sphere"}) .attr('stroke', '#000000') .attr('stroke-width', 2) .attr('fill', "none") .attr('d', path); map.selectAll("lands") .data(geojson.features) .join("path") .classed('lands', true) .attr("fill", "#947f67") .attr("stroke", "#000000") .attr("d", d => path(d.geometry)) .on('mouseover', function(event, d) { d3.select(this).style("fill", "#e6deb2"); d3.select(".tooltip") .text(`id: ${d.properties.ID} ${d.properties.Land!=""?d.properties.Land:''}`) .style("top", event.pageY + "px") .style("left", event.pageX + "px") .style("visibility", "visible"); }) .on("mousemove", function(event) { d3.select(".tooltip") .style("top", event.pageY - 10 + "px") .style("left", event.pageX + 10 + "px") }) .on('mouseout', function() { d3.select(this).style("fill", null); d3.select(".tooltip").style("visibility", "hidden"); }) return svg.node(); }33:T19e6,projections = [ {name: "Airy’s minimum error", value: d3.geoAiry()}, {name: "Aitoff", value: d3.geoAitoff()}, {name: "American polyconic", value: d3.geoPolyconic()}, {name: "armadillo", value: d3.geoArmadillo()}, {name: "August", value: d3.geoAugust()}, {name: "azimuthal equal-area", value: d3.geoAzimuthalEqualArea()}, {name: "azimuthal equidistant", value: d3.geoAzimuthalEquidistant()}, {name: "Baker dinomic", value: d3.geoBaker()}, {name: "Berghaus’ star", value: d3.geoBerghaus()}, {name: "Bertin’s 1953", value: d3.geoBertin1953()}, {name: "Boggs’ eumorphic", value: d3.geoBoggs()}, {name: "Boggs’ eumorphic (interrupted)", value: d3.geoInterruptedBoggs()}, {name: "Bonne", value: d3.geoBonne()}, {name: "Bottomley", value: d3.geoBottomley()}, {name: "Bromley", value: d3.geoBromley}, {name: "Butterfly (gnomonic)", value: d3.geoPolyhedralButterfly()}, {name: "Butterfly (Collignon)", value: d3.geoPolyhedralCollignon()}, {name: "Butterfly (Waterman)", value: d3.geoPolyhedralWaterman()}, {name: "Collignon", value: d3.geoCollignon()}, // {name: "conic conformal", value: d3.geoConicConformal}, // Not suitable for world maps. {name: "conic equal-area", value: d3.geoConicEqualArea()}, {name: "conic equidistant", value: d3.geoConicEquidistant()}, {name: "Craig retroazimuthal", value: d3.geoCraig()}, {name: "Craster parabolic", value: d3.geoCraster()}, {name: "cylindrical equal-area", value: d3.geoCylindricalEqualArea()}, {name: "cylindrical stereographic", value: d3.geoCylindricalStereographic()}, {name: "Eckert I", value: d3.geoEckert1()}, {name: "Eckert II", value: d3.geoEckert2()}, {name: "Eckert III", value: d3.geoEckert3()}, {name: "Eckert IV", value: d3.geoEckert4()}, {name: "Eckert V", value: d3.geoEckert5()}, {name: "Eckert VI", value: d3.geoEckert6()}, {name: "Eisenlohr conformal", value: d3.geoEisenlohr()}, {name: "Equal Earth", value: d3.geoEqualEarth()}, {name: "Equirectangular (plate carrée)", value: d3.geoEquirectangular()}, {name: "Fahey pseudocylindrical", value: d3.geoFahey()}, {name: "flat-polar parabolic", value: d3.geoMtFlatPolarParabolic()}, {name: "flat-polar quartic", value: d3.geoMtFlatPolarQuartic()}, {name: "flat-polar sinusoidal", value: d3.geoMtFlatPolarSinusoidal()}, {name: "Foucaut’s stereographic equivalent", value: d3.geoFoucaut()}, {name: "Foucaut’s sinusoidal", value: d3.geoFoucautSinusoidal()}, {name: "general perspective", value: d3.geoSatellite()}, {name: "geoAirocean", value: d3.geoAirocean()}, {name: "geoDodecahedral", value:d3.geoDodecahedral()}, {name: "geoDodecahedral - B", value:d3.geoDodecahedral().parents([-1,0,0,0,1,0,2,0,1,11,6,3]).rotate([-20,-18,-35])}, {name: "geoDodecahedral - C", value:d3.geoDodecahedral().parents([-1,0,0,0,9,0,9,0,3,8,9,9]).angle(72).rotate([3,0,-32])}, {name: "geoIcosahedral", value: d3.geoIcosahedral()}, {name: "geoIcosahedral", value: d3.geoIcosahedral() .faceProjection( face => { // center the face var c = (face.site).map(d => -d); // rotate it to put its apex "up" not "down" c[2] = Math.abs(c[1] - 52.62) < 1 || Math.abs(c[1] + 10.81) < 1 ? 60 : 0; return d3.geoProjection(d3.geoGrayFullerRaw()).rotate(c).translate([0,0]) } ) .parents([-1,0,1,11,3,0,7,1,7,8,9,10,11,12,13,6,8,10,19,15]) .angle(-60) .rotate([-76.5, 27, -84])}, {name: "Gilbert’s two-world", value: d3.geoGilbert()}, {name: "Gingery", value: d3.geoGingery()}, {name: "Ginzburg V", value: d3.geoGinzburg5()}, {name: "Ginzburg VI", value: d3.geoGinzburg6()}, {name: "Ginzburg VIII", value: d3.geoGinzburg8()}, {name: "Ginzburg IX", value: d3.geoGinzburg9()}, {name: "Goode’s homolosine", value: d3.geoHomolosine()}, {name: "Goode’s homolosine (interrupted)", value: d3.geoInterruptedHomolosine()}, {name: "gnomonic", value: d3.geoGnomonic()}, {name: "Gringorten square", value: d3.geoGringorten()}, {name: "Gringorten quincuncial", value: d3.geoGringortenQuincuncial()}, {name: "Guyou square", value: d3.geoGuyou()}, {name: "Hammer", value: d3.geoHammer()}, {name: "Hammer retroazimuthal", value: d3.geoHammerRetroazimuthal()}, {name: "HEALPix", value: d3.geoHealpix()}, {name: "Hill eucyclic", value: d3.geoHill()}, {name: "Hufnagel pseudocylindrical", value: d3.geoHufnagel()}, {name: "Kavrayskiy VII", value: d3.geoKavrayskiy7()}, {name: "Lagrange conformal", value: d3.geoLagrange()}, {name: "Larrivée", value: d3.geoLarrivee()}, {name: "Laskowski tri-optimal", value: d3.geoLaskowski()}, // {name: "Littrow retroazimuthal", value: d3.geoLittrow}, // Not suitable for world maps. {name: "Loximuthal", value: d3.geoLoximuthal()}, {name: "Mercator", value: d3.geoMercator()}, {name: "Miller cylindrical", value: d3.geoMiller()}, {name: "Mollweide", value: d3.geoMollweide()}, {name: "Mollweide (Goode’s interrupted)", value: d3.geoInterruptedMollweide()}, {name: "Mollweide (interrupted hemispheres)", value: d3.geoInterruptedMollweideHemispheres()}, {name: "Natural Earth", value: d3.geoNaturalEarth1()}, {name: "Natural Earth II", value: d3.geoNaturalEarth2()}, {name: "Nell–Hammer", value: d3.geoNellHammer()}, {name: "Nicolosi globular", value: d3.geoNicolosi()}, {name: "orthographic", value: d3.geoOrthographic()}, {name: "Patterson cylindrical", value: d3.geoPatterson()}, {name: "Peirce quincuncial", value: d3.geoPeirceQuincuncial()}, {name: "rectangular polyconic", value: d3.geoRectangularPolyconic()}, {name: "Robinson", value: d3.geoRobinson()}, {name: "sinusoidal", value: d3.geoSinusoidal()}, {name: "sinusoidal (interrupted)", value: d3.geoInterruptedSinusoidal()}, {name: "sinu-Mollweide", value: d3.geoSinuMollweide()}, {name: "sinu-Mollweide (interrupted)", value: d3.geoInterruptedSinuMollweide()}, {name: "stereographic", value: d3.geoStereographic()}, {name: "Times", value: d3.geoTimes()}, {name: "Tobler hyperelliptical", value: d3.geoHyperelliptical()}, {name: "transverse Mercator", value: d3.geoTransverseMercator()}, {name: "Van der Grinten", value: d3.geoVanDerGrinten()}, {name: "Van der Grinten II", value: d3.geoVanDerGrinten2()}, {name: "Van der Grinten III", value: d3.geoVanDerGrinten3()}, {name: "Van der Grinten IV", value: d3.geoVanDerGrinten4()}, {name: "Wagner IV", value: d3.geoWagner4()}, {name: "Wagner VI", value: d3.geoWagner6()}, {name: "Wagner VII", value: d3.geoWagner7()}, {name: "Werner", value: d3.geoBonne().parallel(90)}, {name: "Wiechel", value: d3.geoWiechel()}, {name: "Winkel tripel", value: d3.geoWinkel3()} ]34:[{"id":"3ef858cc88cab6753ddf28296c78073c5375cbced7e9ab70ed9511c7e914f527da742d917b294ed3b98cdc38a1b18aae6c4344f4e66f59184121b9ca4d49da51","href":"https://static.observableusercontent.com/files/3ef858cc88cab6753ddf28296c78073c5375cbced7e9ab70ed9511c7e914f527da742d917b294ed3b98cdc38a1b18aae6c4344f4e66f59184121b9ca4d49da51","name":"mystara1.png","type":"image/png","lastModified":1746607008066.865,"size":195625},{"id":"338a8b5501240e2d4f34e25fe43f5c9a8894416560373fed7223fc69564166b376a642cca044acc6a14629c362e188dcab706c31ffc6bdb6f8ddd5ad8178feb1","href":"https://static.observableusercontent.com/files/338a8b5501240e2d4f34e25fe43f5c9a8894416560373fed7223fc69564166b376a642cca044acc6a14629c362e188dcab706c31ffc6bdb6f8ddd5ad8178feb1","name":"color-thief.js","type":"application/javascript","lastModified":1750427943179.959,"size":6548},{"id":"8e00f81fc248ca2489a1ff7603a26e226cd950af8e9ac5216cc7319c8bef453a2a26e27b34f5ea59cc8b16135586ed1e2b6eeec5d975af0ab9a148b256053ca8","href":"https://static.observableusercontent.com/files/8e00f81fc248ca2489a1ff7603a26e226cd950af8e9ac5216cc7319c8bef453a2a26e27b34f5ea59cc8b16135586ed1e2b6eeec5d975af0ab9a148b256053ca8","name":"mystara_land_names@3.json","type":"application/json","lastModified":1746793573062.512,"size":8151},{"id":"078461e971eb6b2809f4190f258a52a7cc4f5427e8d5d965236ad5d551b1fdfdf56ca6b4ba483369d0a564793eb96c1e13f23a15e8b047e277315a602b121143","href":"https://static.observableusercontent.com/files/078461e971eb6b2809f4190f258a52a7cc4f5427e8d5d965236ad5d551b1fdfdf56ca6b4ba483369d0a564793eb96c1e13f23a15e8b047e277315a602b121143","name":"ice_cap1.png","type":"image/png","lastModified":1782206553438.696,"size":39677},{"id":"469dd06c4eb4d8b35e919b5c19682e199a3b56da909bb3b03d42d40bf8ab0c17e93ce564fac6ed58534f91d3125c7ebef830a2443b7c198d343381e2c627a63d","href":"https://static.observableusercontent.com/files/469dd06c4eb4d8b35e919b5c19682e199a3b56da909bb3b03d42d40bf8ab0c17e93ce564fac6ed58534f91d3125c7ebef830a2443b7c198d343381e2c627a63d","name":"ice_cap2@1.png","type":"image/png","lastModified":1782819967583.235,"size":27020}] 2e:{"id":"c72b6fde43a1b649","slug":"from-her-to-eternity","title":"From her to eternity...","thumbnail":"ad6bffbd61729628d6281aafb845d46aebe50fc3abbc717ec80fab262a788e4f","access_level":"public","create_time":"$D2025-05-04T21:00:53.101Z","update_time":"$D2026-09-07T09:55:57.170Z","view_time":null,"first_public_time":"$D2025-05-07T09:40:35.769Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024"},"version":3224,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null}],"members":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null,"role":"editor"},{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"06f314aa212f58b3","slug":"mystara","title":"Mystara","owner":{"id":"9784867a3e59436b","login":"linard-y","name":""}},"type":"notebook","body":{"title":"From her to eternity...","cells":[{"id":0,"value":"# From her to eternity...\n\n_(or from png to geojson)_","pinned":false,"hidden":false,"mode":"md"},{"id":85,"value":"viewof imageSrc = {\n const form = html`

`;\n form.i.onchange = () => {\n form.value = form.i.multiple ? form.i.files : form.i.files[0];\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.value = FileAttachment(\"mystara1.png\").blob();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1777,"value":"image = {\n const img = new Image(width, height);\n img.src = URL.createObjectURL(imageSrc);\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"We now remove the starry background by croping the image to the ellipse defining the planisphere in Mollweide projection.","pinned":false,"hidden":false,"mode":"md"},{"id":3054,"value":"croppedImage = {\n let img = await FileAttachment(\"mystara1.png\").image(); //FileAttachment(\"mystara1.png\").image();\n let ctx = DOM.canvas(width, height).getContext('2d');\n ctx.drawImage(img, 0, 0, width, height);\n ctx.globalCompositeOperation = \"destination-in\";\n ctx.beginPath();\n ctx.ellipse((1+width)/2, (1+height)/2, width/2, height/2, 180 * Math.PI/180, 0, 2 * Math.PI);\n ctx.fill();\n\n const image = await new Promise((resolve, reject) => {\n ctx.canvas.toBlob(blob => {\n const image = new Image;\n image.src = URL.createObjectURL(blob);\n image.onload = () => resolve(image);\n image.onerror = reject;\n }, \"image/pngg\", 1);\n });\n \n return image\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"To extract the dominant color palette used in the map, we'll use the WASM transcription of the ImageMagick software: [WASM-ImageMagick](https://github.com/KnicKnic/WASM-ImageMagick).\n\nHowever, image and color management is browser-dependent, and sometimes even screen-dependent. This notebook was developed for Firefox, where it works very well. I was able to test it under Chrome and Edge and after a little adjustment it seems to work equally well.\n\nNow, we're going to transcribing the cropped image information into an array of bytes.","pinned":false,"hidden":false,"mode":"md"},{"id":3190,"value":"navigatorSettings = {\n if ((navigator.userAgent.indexOf(\"Opera\") || navigator.userAgent.indexOf('OPR')) != -1) {\n return ({name:'Opera', colors:12});\n } else if (navigator.userAgent.indexOf(\"Edg\") != -1) {\n return ({name:'Edge', colors:12});\n } else if (navigator.userAgent.indexOf(\"Chrome\") != -1) {\n return ({name:'Chrome', colors:12});\n } else if (navigator.userAgent.indexOf(\"Safari\") != -1) {\n return ({name:'Safari', colors:12});\n } else if (navigator.userAgent.indexOf(\"Firefox\") != -1) {\n return ({name:'Firefox', colors:10});\n } else if ((navigator.userAgent.indexOf(\"MSIE\") != -1) || (!!document.documentMode == true)) //IF IE > 10\n {\n return ({name:'IE', colors:10});\n } else {\n return ({name:'unknown', colors:10});\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2222,"value":"sourceBytes = {\n \n async function fetchImage(src) {\n const img = new Image(width, height);\n img.src = URL.createObjectURL(\n await fetch(src)\n .then(r => r.blob())\n .then(blob => (img.blob = blob))\n );\n await img.decode();\n return img;\n }\n \n const img = await fetchImage(croppedImage.src);\n const arrayBuffer = await img.blob.arrayBuffer();\n \n return new Uint8Array(arrayBuffer);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3164,"value":"colorsParsed = {\n\n const { outputFiles, exitCode } = await Magick.execute({\n inputFiles: [{ name: 'input.png', content: sourceBytes }],\n commands: [\n `convert input.png +dither -colors ${navigatorSettings.colors} -unique-colors -colorspace HSL -depth 8 :txt out.txt`\n ]\n });\n\n const out = await Magick.readFileAsText(outputFiles[0]);\n\n return d3\n .dsvFormat(\" \")\n .parseRows(out)\n .slice(1)\n .map((e) => d3.hsl(e[5]).hex())\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2579,"value":"html`

${colorsParsed.map((d,i) => html`${d}`)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"Still using [WASM-ImageMagick](https://github.com/KnicKnic/WASM-ImageMagick), we transform the continental colors into red and make all other pixels in the image transparent.\n\nCheck the continental colors below (depending on your browser, the default choice is right for Firefox) and leave the others unchecked. Then adjust the fuzz parameter for each color, which corresponds to the tolerance threshold around the color in question. Please note that the order of colors is important due to the definition of tolerance thresholds and the fact that color transformation is performed one after the other in the color transformation process.","pinned":false,"hidden":false,"mode":"md"},{"id":2250,"value":"viewof settings = {\n const info = colorsParsed.map((d,i) => Inputs.form(\n {\n keep: Inputs.toggle({ label: html`${d} `, value:[3,4].includes(i)?true:false}),\n fuzz: Inputs.range([1, 25], {label: \"fuzz\", value: [0,1,2,5, 6, 7,8,9].includes(i)?25:15, step: 1})\n },\n { template: (inputs) => htl.html`\n

${Object.values(inputs)}

\n \n `}\n ));\n return Inputs.form(info,\n { template: (inputs) => htl.html`\n

${Object.values(inputs)}

\n \n `\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2498,"value":"With the default image, the colors “#8c743c”, “#a49d48”, “#95c35f”, “#95c864” must be checked and the fuzz parameters can take the following values: 25, 25, 25, 15, 15, 15, 15, 25, 25, 25 to obtain an almost monochrome image.","pinned":false,"hidden":false,"mode":"md"},{"id":809,"value":"newImage1 = {\n const cmds = colorsParsed.map((c,i) => {\n if (settings[i].keep) {\n return `convert ${i==0?'input.png':`ouput${i}.png`} -fuzz ${settings[i].fuzz}% -fill red -opaque ${c} output${i+1}.png`\n } else {\n return `convert ${i==0?'input.png':`ouput${i}.png`} -fuzz ${settings[i].fuzz}% -fill transparent -opaque ${c} output${i+1}.png`\n }\n}).join(' \\\\ ');\n\n const { outputFiles, exitCode } = await Magick.execute({\n inputFiles: [{ name: 'input.png', content: sourceBytes }],\n commands: cmds\n });\n\n const imgout = new Image(width, height);\n imgout.src = URL.createObjectURL(outputFiles[0].blob);\n imgout.blob = outputFiles[0].blob;\n return imgout;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2503,"value":"To move on from this red and white image to sharp contours, we'll use the [`imagetracerjs`](https://github.com/jankovicsandras/imagetracerjs) library to crop each set of red pixels.\n\nThe tools in imagetracerjs are complex to set up, so I recommend you consult the [documentation](https://github.com/jankovicsandras/imagetracerjs/blob/master/options.md) to fully understand the use of each parameter.\n\nBelow are the default parameter values for the default image.","pinned":false,"hidden":false,"mode":"md"},{"id":551,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"imgTraceData = new Promise(async (resolve, reject) => {\n ImageTracer.loadImage(\n newImage1.src,\n function(canvas){\n console.log(\"canvas\");\n resolve(\n ImageTracer.imagedataToTracedata( ImageTracer.getImgdata(canvas), options )\n );\n },\n options\n );\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2508,"value":"\n`imagetracerjs` breaks down the image into several color layers. Make sure that only the color red (or the one closest to it) is checked below.","pinned":false,"hidden":false,"mode":"md"},{"id":961,"value":"viewof layersEnabled = {\n const getColor = (d) => d3.color(`rgba(${d.r}, ${d.g}, ${d.b}, ${d.a})`).hex()\n const layers =imgTraceData.palette.map((d,i) => ({index:i, hexColor:getColor(d), ...d})).filter((value, index, array) => array.map(d=>d.hexColor).indexOf(value.hexColor) === index);\n return Inputs.checkbox(layers, {\n label: \"Colors Enabled\",\n format: (d) => html`L${d.index} ${d.hexColor}`,\n value:layers.filter(d=>colorDistance(d.r, d.g, d.b, 255, 0, 0)<=3)\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1206,"value":"viewof removeFill = Inputs.toggle({label:html`Remove filling`, value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"svgForEnabledLayers = {\n const svg = ImageTracer.getsvgstring(\n Object.assign({}, \n imgTraceData, \n {\n layers:imgTraceData.layers.filter((_,i) => layersEnabled[0].index==i), \n palette: imgTraceData.palette.filter((_,i) => layersEnabled[0].index==i)\n }), options);\n const htmlSVG = html`${svg}`; //\n d3.select(htmlSVG).selectAll(\"svg\")\n .attr(\"transform\", `translate(-${(imgTraceData.width-width)/2} -${(imgTraceData.height-height)/2}) scale(${width/imgTraceData.width})`) \n .attr(\"width\",`${imgTraceData.width}px`)\n .attr(\"height\", `${imgTraceData.height}px`);\n if (removeFill) \n d3.select(htmlSVG).selectAll(\"path\").style(\"fill\", \"none\");\n \n return htmlSVG;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2700,"value":"At the very bottom of the map, one or two pixels that originally belonged to the planisphere's perimeter now appear in a very small autonomous path. This is the only case, and we'll remove them once we've created the geoPolygons.","pinned":false,"hidden":false,"mode":"md"},{"id":596,"value":"svgImg={\n let res = [];\n for (var l=0; l < svgForEnabledLayers.children.length; l++) {\n res.push(svgForEnabledLayers.children[l])\n }\n return res[1]; // on ne veut pas le HTMLStyleElement en position 0\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2510,"value":"We now have the contours we're looking for in the form of a vector image (`svg`). We'll sample each `path` in the `svg` using a linear method based on `getTotalLength()` and `getPointAtLength(t)` method of svg `path`.","pinned":false,"hidden":false,"mode":"md"},{"id":2514,"value":"Instead of imposing a constant number of points to be sampled, this will depend for each path on its total length and a division value of this length. The smaller the division value, the more points will be sampled.","pinned":false,"hidden":false,"mode":"md"},{"id":2367,"value":"viewof step = Inputs.range([50, 0.1], {label:'Total length division', step:0.1, value:1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2653,"value":"geopolygons = {\n const proj = d3.geoMollweide()\n .fitExtent([[0, 0], [imgTraceData.width, imgTraceData.height]], ({ type: \"Sphere\" }));\n var data = [];\n for (var l=0; l < svgImg.children.length; l++) {\n var path = svgImg.children[l];\n var len = path.getTotalLength();\n var NUM_POINTS = Math.max(8,len/step);\n data.push(polygonSampledFromPath(path.getAttribute(\"d\").split(\" M\")[0],NUM_POINTS).map(d=>proj.invert(d)));\n }\n return data.slice(0,-1) // we remove the last polygon which correspond to residual pixels of the border of the original planisphere.\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2655,"value":"polygonSampledFromPath = (path,samples) => {\n\n path = svg``\n var poly = document.createElementNS(\"http://www.w3.org/2000/svg\", \"polygon\");\n\n var points = [];\n var len = path.getTotalLength();\n var step = len/samples;\n \n for (var i=0;i<=len;i+=step){\n var p = path.getPointAtLength(i);\n points.push([p.x, p.y]);\n }\n\n return points\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2373,"value":"sampledPoints = geopolygons.flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2631,"value":"names = FileAttachment(\"mystara_land_names@3.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2389,"value":"geojson = {\n const getProperties = (i) => names.filter(d => d.ID ==i)[0];\n let features = geopolygons.map((p,i) => Object({type:'Feature', id:i, geometry:({type: \"Polygon\", coordinates: [p]}), properties:getProperties(i)}))\n return ({type:'FeatureCollection', features:features})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1327,"value":"renderer = {\n const svg = d3.select(DOM.svg(width, height));\n const proj = d3.geoMollweide()\n .fitExtent([[0, 0], [width, height]], ({ type: \"Sphere\" }));\n var path = d3.geoPath(proj);\n const g = svg.append(\"g\");\n\n g.append('path')\n .datum({type:\"Sphere\"})\n .attr('stroke', 'black')\n .attr('fill', \"#fefef6\");\n\n g.append('path')\n .datum(d3.geoGraticule()())\n .attr('stroke', 'black')\n .attr('stroke-width', 0.2)\n .attr('fill', 'none');\n \n g.append('text')\n .attr('x', 30)\n .attr('y', 30)\n .attr('style',\"font: 22px var(--sans-serif);\")\n .text('Path sampling');\n\n g.selectAll(\"circle\")\n .data(sampledPoints.map(d => proj(d)))\n .join(\"circle\")\n .attr(\"cx\", d => d[0])\n .attr(\"cy\", d => d[1])\n .attr(\"r\", 0.5)\n .attr(\"fill\", \"blue\");\n\n svg.call(d3.zoom()\n .extent([[0, 0], [width, height]])\n .scaleExtent([1, 8])\n .on(\"zoom\", zoomed));\n\n function zoomed({transform}) {\n g.attr(\"transform\", transform);\n }\n\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2434,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"We can now reproject `geojson` data with the `d3` library in any available projection.","pinned":false,"hidden":false,"mode":"md"},{"id":460,"value":"viewof targetProjection = projectionInput({\n value: \"Mollweide\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2419,"value":"Render_Proj = {\n\n targetProjection.fitSize([width, height], ({ type: \"Sphere\" })).rotate([0, 0, 0]);\n \n const context = DOM.context2d(width, height, 1);\n const path = d3.geoPath(targetProjection, context);\n\n const graticule = d3.geoGraticule().step([20, 20])()\n \n context.lineWidth = 3;\n context.strokeStyle = \"#000000\";\n context.fillStyle = \"#b7c9e2\";\n context.beginPath(), path({type:\"Sphere\"}), context.fill(), context.stroke();\n\n context.lineWidth = 0.2;\n context.strokeStyle = \"#000000\";\n context.beginPath(), path(graticule), context.stroke();\n\n context.lineWidth = 1;\n context.strokeStyle = \"#000000\";\n context.fillStyle = \"#947f67\";\n context.beginPath(), path(geojson), context.fill(), context.stroke();\n \n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"width= 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"height = width/2","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"function projectionInput({name = \"\", value} = {}) {\n const form = html` ${name}`;\n form.onchange = () => form.dispatchEvent(new CustomEvent(\"input\"));\n form.oninput = () => form.value = projections[form.i.selectedIndex].value;\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"Magick = import(/* webpackIgnore: true */\"https://cdn.jsdelivr.net/npm/wasm-imagemagick/dist/magickApi.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"d3 = require(\"d3\", \"d3-geo\", \"d3-geo-projection\", \"d3-geo-polygon\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"ImageTracer = require(\"imagetracerjs\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2623,"value":"// find Euclidian distance from the pixel color to the specified color \n//\nfunction colorDistance(colorRed,colorGreen,colorBlue,pixelRed,pixelGreen,pixelBlue){\n\n var diffR,diffG,diffB;\n\n // distance to color\n diffR=( colorRed - pixelRed );\n diffG=( colorGreen - pixelGreen );\n diffB=( colorBlue - pixelBlue );\n return(Math.sqrt(diffR*diffR + diffG*diffG + diffB*diffB));\n\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2f:"$2e:body"