2e:null 2f:["$","title",null,{"children":"Artificial cartography I | linard-y | Observable"}] 34:[{"id":"c4c01fe728220fe27506543191cdb50d65029ed3b464379f05f64c6785ea90a3bcd756567df3feb60198e9d580294508f166e91398d328e053e681f00b253c56","href":"https://static.observableusercontent.com/files/c4c01fe728220fe27506543191cdb50d65029ed3b464379f05f64c6785ea90a3bcd756567df3feb60198e9d580294508f166e91398d328e053e681f00b253c56","name":"Map1@3.png","type":"image/png","lastModified":1787724743035.722,"size":850018}] 32:{"id":"e55ffe6897bad0bc","slug":"artificialcartography_1","title":"Artificial cartography I","thumbnail":null,"access_level":"public","create_time":"$D2026-08-26T06:12:23.035Z","update_time":"$D2026-08-28T16:48:22.375Z","view_time":null,"first_public_time":"$D2026-08-26T13:33:22.894Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024"},"version":966,"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"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Artificial cartography I","cells":[{"id":0,"value":"# Artificial cartography I\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":847,"value":"## The homemade image","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":838,"value":"Here is an image created manually in GIMP to serve as the basis for a digital elevation model, thereby allowing me to create my *artificial map*.\n\nTo create this image in practice:\n* I obtained DEMs of small, real-world geographic areas from the tiles server Terrarium from [Nextzen](https://www.nextzen.org/);\n* I rendered these DEMs using a high-contrast color spectrum (_spaceColor_), retaining only ten specific elevation levels (_originalThresh_);\n* I arranged all these elements within a GIMP image according to my own vision and manually filled (using a brush) in the areas where the elements met to create a seamless look. Of course, the DEM segments must be arranged logically—respecting slopes, river continuity, and so on — so that the final map looks realistic.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"spaceColor = [\"#ffffff\",\"#5933b4\",\"#d2f6ff\",\"#7bb1ff\",\"#ecdced\",\"#ff8774\",\"#b5a99e\",\"#fdb462\",\"#ddefb3\",\"#d5b9ff\",\"#70897b\",\"#efc883\",\"#1e52ad\",\"#ffd3ca\",\"#c3df7e\",\"#c2d2c9\",\"#37b7df\",\"#564a3f\",\"#ffb2a4\",\"#ffd92f\",\"#85f2c4\",\"#729e05\",\"#e7e2dd\",\"#b77a0d\",\"#b7fade\",\"#3f5448\",\"#dde6e1\",\"#e75741\",\"#e8d7ff\",\"#0f90b8\",\"#37b7df\",\"#9fc63f\",\"#987099\",\"#e7e2dd\",\"#ffed6f\",\"#cde5ff\",\"#7b4700\",\"#9ee8ff\",\"#e8d7ff\",\"#b5a99e\",\"#406600\",\"#007e41\",\"#b891ff\",\"#ffffb3\",\"#fea9ff\",\"#10bc73\",\"#dbc2dc\",\"#ce49d4\",\"#48e0a0\",\"#9ee8ff\",\"#5933b4\",\"#f8e0b6\",\"#a32a18\",\"#dca646\",\"#603f62\",\"#b891ff\",\"#8f62fb\",\"#9db3a6\",\"#ffffff\",\"#69d3f5\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"originalThresh = [0, 300, 450, 600, 1200, 1800, 2400, 3000, 3600, 4200]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"earth = d3.scaleSequential(t => d3.scaleLinear()\n .domain(d3.range(0,60).map(i=>i/60))\n .range(spaceColor)\n .interpolate(d3.interpolate)(t)).domain([0, 3000])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"image = FileAttachment(\"Map1@3.png\").image({width: 1576})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"## General adjustment of elevations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":852,"value":"The second step involved reassigning ten new elevation levels (_thresh_) to the image's color palette — levels other than the original ones associated with the realistic DEMs — that would align with our imagination.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"mapColors = originalThresh.map(h => d3.color(earth(h)).hex())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"// Thresholds for contour\nthresh = [0,200,400,600,1000,1500,2000,2500,3000,3500]//d3.range(Math.round(elevRange[0]/interval)*interval, elevRange[1], interval)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"## Dem generation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":860,"value":"To generate a DEM as a 2D array, you then simply need to read the color of each pixel in the image and convert that color into an elevation.\n\nThe successive transformations of the DEM segments and the manipulations performed in GIMP may have slightly altered the colors of certain pixels; therefore, reading the image pixels requires allowing for some tolerance when matching each pixel's color to one of the colors in our palette. For this reason, we calculate the distance from each pixel to the 10 colors in our palette and assign the pixel the color that yields the minimum distance.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":924,"value":"The concept of distance between colors was introduced in a notebook by [Mike Bostock](https://observablehq.com/@mbostock/measuring-color-difference), and here we are using an implementation of the calculation algorithm written by [Sylvain Lesage](https://observablehq.com/@severo/color-distance).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":319,"value":"import {distance} from '@severo/color-distance'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"function getRgbColorDistance(value1, value2) {\n if (value1.length && value2.length) {\n const { r: r1, g: g1, b: b1 } = d3.color(value1);\n const { r: r2, g: g2, b: b2 } = d3.color(value2);\n \n return distance(d3.color(value1),d3.color(value2))\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"imageData = {\n const context = DOM.context2d(image.naturalWidth, image.naturalHeight, 1)\n context.drawImage(image, 0, 0)\n return context.getImageData(0, 0, image.naturalWidth, image.naturalHeight).data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"colorToAlt = (coo) => {\n \n let index = d3.minIndex(mapColors.map(c => getRgbColorDistance(coo.hex(), c)));\n return [0, 200, 400, 600, 1000, 1500, 2000, 2500, 3000, 3500][index]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"altArr = {\n let arr = [];\n for(let row = 0; row < image.naturalHeight; row += 1) {\n let rowArr = [];\n for(let col = 0; col < image.naturalWidth; col += 1) {\n let index = row*((image.naturalWidth)*4)+col*4;\n let colorPt = d3.color(`rgba(${imageData[index]},${imageData[index+1]},${imageData[index+2]},${imageData[index+3]})`);\n rowArr.push(colorToAlt(colorPt));\n }\n arr.push(rowArr);\n }\n return arr\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"flatAltArr = [].concat.apply([], altArr)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"Bluring the array a little allow us to get a nicer rendering. I use a radius equal to 3 to make it smoooooth. [_Fil_](https://observablehq.com/@fil/array-blur-d3-plot) has implemented an algorithm to blur an array, we use it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":374,"value":"B = require(\"array-blur@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"demValues = B.blur().radius(0).width(altArr[0].length)(flatAltArr)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"dem = ({\n values: demValues,\n width: altArr[0].length,\n height: altArr.length,\n minVal: d3.extent(demValues)[0],\n maxVal: d3.extent(demValues)[1]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"## The finishing touch","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":899,"value":"Now, to view the created DEM as a more conventional image, we will select a new smoother color scale.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":563,"value":"altToColor = (dem, color, normalized=false) => {\n \n // Color Scale & Min-Max normalization\n const normalize = d => ((d-dem.minVal)/(dem.maxVal-dem.minVal));\n const colorScale = d => normalized?color(normalize(d)):color(d);\n\n // Set up canvas element\n const context = DOM.context2d(dem.width, dem.height, 1);\n\n const imageData = context.createImageData(dem.width, dem.height);\n dem.values.forEach((d, i) => {\n let color = isNaN(d) ? {r: 0, g: 0, b: 0} : d3.color(colorScale(d));\n imageData.data[i*4 ] = color.r;\n imageData.data[i*4+1] = color.g;\n imageData.data[i*4+2] = color.b;\n imageData.data[i*4+3] = 255;\n });\n\n return imageData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"rasterDEM = (dem, config={}) => {\n\n const defaultColorScale = (alt) => {\n const r = Math.floor(128 + alt / 256);\n alt -= 256 * (r - 128);\n const g = Math.floor(alt);\n const b = Math.round(256 * (alt - g));\n return `rgb(${r},${g},${b})`;\n }\n\n const scale = config?.scale ? config.scale : 1;\n const pixelated = config?.pixelated ? config.pixelated : true;\n const colorScale = config?.colorScale ? config.colorScale : defaultColorScale;\n const normalized = config?.normalized ? config.normalized : false;\n\n\n const data = altToColor(dem, colorScale, normalized);\n \n const context = DOM.context2d(dem.width, dem.height, 1);\n context.putImageData(data, 0, 0);\n \n return Object.assign(context.canvas, {\n style: `width:${dem.width * scale}px; height:${dem.height * scale}px;${\n pixelated ? \" image-rendering: pixelated;\" : \"\"\n }`\n });\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"scale = width/(2*dem.width)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"html`${rasterDEM(dem, {scale})}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"This image with a red gradient looks terrible. Indeed, it is necessary to normalize the elevations to achieve a good-looking result. Below are the final renderings with various color scales.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":569,"value":"colorScale2 = (t) => {\n const clrs = [\n \"rgb(141,166,141)\",\n \"rgb(172,194,155)\",\n \"rgb(221,219,167)\",\n \"rgb(254,235,181)\",\n \"rgb(248,212,153)\",\n \"rgb(241,170,109)\",\n \"rgb(227,112,72)\"\n ];\n const interps = [];\n for (let i = 0; i < clrs.length - 1; i++) {\n interps.push(d3.interpolateRgb(clrs[i], clrs[i + 1]));\n }\n if (t < 0) {\n return \"blue\";\n }\n const scaledT = d3.scaleLinear().range([0, clrs.length - 1])(t);\n const intT = Math.min(clrs.length - 2, Math.floor(scaledT));\n return interps[intT](scaledT - intT);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"colorScale3 = (t) => d3.interpolatePiYG(1 - t)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"colorScale4 = d3.interpolateGreys","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"colorScale5 = d3.interpolateViridis","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"html`${rasterDEM(dem, {scale, colorScale:colorScale2, normalized:true})}${rasterDEM(dem, {scale, colorScale:colorScale3, normalized:true})}${rasterDEM(dem, {scale, colorScale:colorScale4, normalized:true})}${rasterDEM(dem, {scale, colorScale:colorScale5, normalized:true})}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"