2d:null 2e:["$","title",null,{"children":"World maps that looks like a QR code | Clément Renaud | Observable"}] 33:T53d,pixel = { // create a canvas const canvas = document.createElement('canvas') // set size const ratio = map.canvas.width/map.canvas.height*gridSize, w = gridSize*ratio, h = gridSize*ratio canvas.width = w canvas.height = h const ctx = canvas.getContext('2d') // turn off image aliasing ctx.msImageSmoothingEnabled = false; ctx.mozImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false; ctx.imageSmoothingEnabled = false; // background noise const step = 10; for (let x = 0; x < canvas.width; x = x + step){ for (let y = 0; y < canvas.height; y = y + step){ let bw = Math.random() > .5; ctx.fillStyle = bw ? 'white' : 'black'; ctx.fillRect(x,y,step,step); } } // draw map const margin = 30 ctx.drawImage(blackWhite, 0, 0, miniMap.canvas.width, miniMap.canvas.height, margin, margin, w-margin, h-margin); // draw squares const sqrw = gridSize; [ [0,0], [0, height-100], [width-100, 0] ].forEach( d => { let x = d[0], y = d[1] ctx.fillStyle = 'black' ctx.fillRect(x+0, y+0, 100, 100); ctx.fill(); ctx.fillStyle = 'white' ctx.fillRect(x+15,y+15, 70, 70); ctx.fill(); ctx.fillStyle = 'black' ctx.fillRect(x+30, y+30, 40, 40); ctx.fill(); }) return canvas }34:[] 31:{"id":"80b516dce81a59db","slug":"world-maps-that-looks-like-a-qr-code","title":"World maps that looks like a QR code","thumbnail":"08f5568fc40a13867852513dac1059a8fada9ab42e355a6476cf62893eddafb4","access_level":"public","create_time":"$D2019-01-15T16:26:31.222Z","update_time":"$D2019-01-17T22:14:33.891Z","view_time":null,"first_public_time":"$D2019-01-17T22:14:37.639Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"866b7439c266bbe5","login":"clemsos","name":"Clément Renaud","avatar_url":"https://avatars-next.observableusercontent.com/08d03128c2d7bf6ffc580efc85edec0c40b5d91826b746db27920b996240c8f0","tier":"starter_2024"},"version":526,"publish_version":526,"role":null,"authored":false,"authors":[{"type":"individual","id":"4b23a90c6da12bac","login":"clemsos","name":"Clément Renaud","avatar_url":"https://avatars-next.observableusercontent.com/08d03128c2d7bf6ffc580efc85edec0c40b5d91826b746db27920b996240c8f0","tier":null}],"members":[{"type":"individual","id":"4b23a90c6da12bac","login":"clemsos","name":"Clément Renaud","avatar_url":"https://avatars-next.observableusercontent.com/08d03128c2d7bf6ffc580efc85edec0c40b5d91826b746db27920b996240c8f0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"World maps that looks like a QR code","cells":[{"id":0,"value":"md`# World maps that looks like a QR code\n\nJust some map projections in the form of QR codes.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"viewof proj = select({\n description: \"Please pick your favorite projection.\",\n options: [\n 'Mercator',\n 'Orthographic',\n 'AzimuthalEqualArea',\n 'AzimuthalEquidistant', // UN\n 'PierceQuincuncial', // square thanx to Pierce !\n 'Berghaus', // star\n // 'Bertin1953', // WARN : remove rotate\n 'RectangularPolyconic', // UK War Office\n 'Wiechel',\n 'Stereographic'\n ],\n value: 'Mercator'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"viewof rotate = {\n const form = html``;\n form.oninput = () => form.value = JSON.parse(form.select.value);\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"blackWhite = {\n const w = miniMap.canvas.width, \n h = miniMap.canvas.height;\n\n // create a canvas \n const canvas = document.createElement('canvas')\n \n // set mini size\n canvas.width = w\n canvas.height = h\n\n const ctx = canvas.getContext('2d')\n\n const imgData = miniMap.getImageData(0, 0, w, h);\n \n const bws = []\n for (var i = 0; i < imgData.data.length; i+= 4) {\n let p = [ imgData.data[i] , imgData.data[i+1] , imgData.data[i+2], imgData.data[i+3] ]\n let bw = d3.sum(p) ? 255 : 0\n imgData.data[i] = 0;\n imgData.data[i+1] = 0;\n imgData.data[i+2] = 0;\n imgData.data[i+3] = bw;\n bws.push(d3.sum(p))\n }\n \n ctx.putImageData(imgData, 0, 0) \n\n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"map = {\n const context = DOM.context2d(width, height);\n const path = d3.geoPath(projection, context).pointRadius(1);\n\n context.beginPath();\n path(land);\n context.fillStyle = \"black\";\n context.lineWidth = 5;\n context.strokeStyle = \"white\";\n context.stroke();\n context.fill();\n return context;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"miniMap = {\n const w = 70,\n h = 70;\n\n // create a canvas \n const canvas = document.createElement('canvas')\n \n // set mini size\n canvas.width = w\n canvas.height = h\n\n const ctx = canvas.getContext('2d')\n\n //draw mini image\n ctx.drawImage(map.canvas, 0, 0, w, h);\n \n return ctx\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"gridSize = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"width = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"mutable projection = d3[`geo${proj}`]()\n .rotate(rotate)\n .translate([width / 2, height / 2])\n .fitExtent([[1, 1], [width - 1, height - 1]], {type: \"Sphere\"})\n .precision(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"land = ({\n type: \"FeatureCollection\",\n features: topojson.feature(world, world.objects.countries).features\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"world = fetch(\"https://unpkg.com/world-atlas@1/world/110m.json\").then(\n response => response.json()\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"topojson = require(\"topojson-client@3\", \"topojson-simplify@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\", \"d3-geo-voronoi\", \"d3-geo-projection\", \"d3-geo-polygon\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import {slider, select, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"