3e:null 3f:["$","title",null,{"children":"Making Maps out of Emojis | Matt Dzugan | Observable"}] 45:T668,In this notebook we'll be passing through 5 stages of analysis: 1. obtain our map projection 2. sample this projection into a Grid of `N`x`M` points 3. for each point, lookup its country code 4. downsample the grid, letting the points "vote" on the frequent nearby country 5. convert the downsampled country data to emojis Astute readers may ask: _"Why Stage 4? Why not just sample at the lower resolution to begin with?"_. It's a good question, but there is a method to the madness. To create the effect we're going for here, representing an incredibly complex earth with just a couple hundred emojis, the actual locations of our sample points are _INCREDIBLY_ far apart on the globe. This means, there's a very good chance that places like Hawaii, or Portugal or New Zealand get "missed" when our sampling algorithm throws its darts on the map. To get around this, one option would be to just make more samples and render more emojis... but this ruins the effect of the cute little emoji map, at that point it starts to look like a realistic map. Instead we'll still do the act of taking more samples, but then rather than rendering them all, we'll take a clump of them, have them vote on a country and then represent it with only one emoji. For example - imagine we're over the Pacific Ocean. The probability that our coarse set of {Lat,Lon} samples lands on Hawaii's landmass is quite low. But if i generate 100x more points, and then ask "Hey did ANY of these 100 points hit Hawaii? if so, throw a 🇺🇸 in there." - that will be a bit more successful. We'll discuss the mechanics of this in a bit more detail in **Stage 4**46:T61e,### Stage 2: Sample the Projection to a Grid In this step, our goal is to call `rasterizeMap` from [@mattdzugan/raster-sampling-of-maps](https://observablehq.com/@mattdzugan/raster-sampling-of-maps) (a notebook i wrote on my journey to this stupid emoji map). To do so, we'll need * Number of Columns in our Raster Grid * Number of Rows in our Raster Grid * Boundaries of our Projection Canvas that we'd like to sample from * Map Projection itself ✅ As indicated by the checkmark, we've already got one of these, our `fittedProjection`. But the others will take a little work, Let's go through them in order. However, if you'd like to go to bed tonight without crying yourself to sleep, I'd suggest pausing here and coming back to this section another time. #### Number of Columns in our Raster Grid This one is the simplest. We'll simply take our `numEmojiWide` _(defined with a slider bar above)_ and our `upSampler` _(also defined above with a slider)_ and multiply them together. #### Number of Rows in our Raster Grid This is a bit trickier - in order to know how many rows we need to sample, it'll be similar to the above `numEmojiTall * upSampler`. However, we don't already know how _tall_ our canvas is. Since all map projections have different shapes, the height is not just a fixed ratio from the width. To find the **dummyHeight**, which represents the height of the full projection, which has been scalled to match our **dummyWidth** we can take advantage of **D3**'s `.bounds()` function. This will return for us the height we're looking for.47:T5bc,--- ### Stage 4: Downsample the Grid of Country-Codes Ok, now it's time to turn our densely sampled grid into something a bit smaller. Specifically, we're going to downsample by a factor of `upSampler` in both dimensions (a total reduction in `upSampler^2` number of points). On its surface this should be a two-argument function call: * original matrix * downsampling factor And.. well, if you call `downSampleByWeightedFreq()` with just those two parameters - it'll work. **But**, let's recall the rant from the **Approach** section. The whole reason that we're doing this downsampling in the first place is to have some increased visibility as to the distribution of countrie-codes in any area. And sometimes, I might want to choose to make the **water** points, less important, ya know, to make room for our little islands to shine. As such, `downSampleByWeightedFreq()` (yet another function that comes from [a notebook](https://observablehq.com/@mattdzugan/downsample-matrix-by-weighting-frequencies) I created on the journey to this silly emoji map) takes a third argument, a **Map** (the javascript thing, not the cartography thing) that described how much weight should be given to each possible element in the original matrix. For more details including an interactive demo that I'm quite proud of, check the [Matrix Downsampling with Weighted Frequencies Notebook](https://observablehq.com/@mattdzugan/downsample-matrix-by-weighting-frequencies).48:T411,emojiMatrix = { return countryCodeMatrix_Down.map(r => r.map(c => { if(c == waterCode){ if(waterEmoji=='custom'){ return customWater }else{ return waterEmoji } }else if(c == missingCode){ return offmapEmoji }else if(c == 10){ //antarctica if(antarcticaEmoji == "Land"){ if (landEmoji== "Country Flag"){ return countryEmojiLookup.get(c); }else if(landEmoji=='custom'){ return customLand; }else{ return landEmoji } }else if(antarcticaEmoji == "Water"){ if(waterEmoji=='custom'){ return customWater }else{ return waterEmoji } }else{ return customAntarctica; } }else{ if (landEmoji== "Country Flag"){ var out = countryEmojiLookup.get(c); return (out==undefined) ? (landFallbackEmoji) : out; }else if(landEmoji=='custom'){ return customLand; }else{ return landEmoji } } })) }49:[{"id":"708256de56313c53d3b2a10249f741ad4795923acd2a80457914e5900510e85fe73d28832c763abe8bec3f5796d247776cbfd546d3d39fe88d3e60d94328670d","href":"https://static.observableusercontent.com/files/708256de56313c53d3b2a10249f741ad4795923acd2a80457914e5900510e85fe73d28832c763abe8bec3f5796d247776cbfd546d3d39fe88d3e60d94328670d","name":"countryInfo.csv","type":"text/csv","lastModified":1621044205726.914,"size":9910},{"id":"e8f45032bc37bc79f70ce19274ff9a879d81e29566e0f9bec1c56f4ea7909a59c5611399e78eb5da2322cf1d7c3fb27a4dac77992a16e1ea52e5e7aaaee34919","href":"https://static.observableusercontent.com/files/e8f45032bc37bc79f70ce19274ff9a879d81e29566e0f9bec1c56f4ea7909a59c5611399e78eb5da2322cf1d7c3fb27a4dac77992a16e1ea52e5e7aaaee34919","name":"Screen Shot 2021-05-19 at 5.21.45 PM.png","type":"image/png","lastModified":1621462937368.574,"size":192383}] 43:{"id":"7f48d8158aee2d58","slug":"making-maps-out-of-emojis","title":"Making Maps out of Emojis","thumbnail":"9d3ecae699ffbb5578acd085e8f3ac700c5f158b4c1e013a6909dc9031ee4838","access_level":"public","create_time":"$D2021-05-14T20:48:00.607Z","update_time":"$D2021-05-25T15:43:45.724Z","view_time":null,"first_public_time":"$D2021-05-20T15:09:59.647Z","has_unpublished_edits":null,"fork":false,"stars":39,"starred":false,"owner":{"type":"team","id":"5d1c5c48a3939518","login":"mattdzugan","name":"Matt Dzugan","avatar_url":"https://avatars-next.observableusercontent.com/5e6f59dbd54952c1978225f1a7fdc6abf438d0beee68bf8df8be4f097380b46a","tier":"starter_2024","bio":""},"version":1362,"publish_version":1362,"role":null,"authored":false,"authors":[{"type":"individual","id":"e4c2116dac28a624","login":"mattdzugan","name":"Matt Dzugan","avatar_url":"https://avatars-next.observableusercontent.com/5e6f59dbd54952c1978225f1a7fdc6abf438d0beee68bf8df8be4f097380b46a","tier":null,"bio":""}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"individual","id":"e4c2116dac28a624","login":"mattdzugan","name":"Matt Dzugan","avatar_url":"https://avatars-next.observableusercontent.com/5e6f59dbd54952c1978225f1a7fdc6abf438d0beee68bf8df8be4f097380b46a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"b1eb241e8efe8a56","slug":"shorts","title":"shorts","owner":{"id":"5d1c5c48a3939518","login":"mattdzugan","name":"Matt Dzugan"}},"type":"notebook","body":{"titling":"auto","title":"Making Maps out of Emojis","cells":[{"id":0,"value":"# Making Maps out of Emojis\nI wrote a pretty long writeup below, since my [teaser tweet](https://twitter.com/MattDzugan/status/1394288014369693701) got a lot of eyes. If this stupid little thing inspires you, read the writeup for ideas. Anything is possible with code and that's the beauty of code as a creative medium. ❤","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"⚠️ _it has come to my attention that **windows** does not play nicely with the flag emojis. I'm working on a fall-back, but in the mean time, apologies if your windows machine makes ugly things here._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"{\n return html`${textOutput}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"md`### Primary Controls`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewof numEmojiWide = Range([10, 120], {\n step: 1,\n value: Math.round(width/18),\n label: \"Width (# of Emoji)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1204,"value":"viewof rotate = Inputs.toggle({label: \"Auto-Rotate?\", value: (width>600)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"viewof rawprojection = projectionInput({name: \"Map Projection\", value: ((width>600)?\"orthographic\":\"Armadillo\")})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"viewof landEmoji = Radio([\"Country Flag\",\"🏳️\",\"🏴\",\"🏳️‍🌈\",\"🏳️‍⚧️\",\"🟩\",\"custom\"], {\n value: \"Country Flag\",\n label: \"Land Emoji\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1322,"value":"viewof customLand = {\n if(landEmoji==\"custom\"){\n return Inputs.text({label: \"Custom Land\", value: \"🥺\"})\n }else{\n return Object.assign(html``, {value: []})\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"viewof waterEmoji = Radio([\"🏳️\",\"🏴\",\"🏴‍☠️\",\"🟦\",\"🌊\",\"⬜️\",\"⬛️\",\"　\",\"custom\"], {\n value: \"🏳️\",\n label: \"Water Emoji\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1340,"value":"viewof customWater = {\n if(waterEmoji==\"custom\"){\n return Inputs.text({label: \"Custom Water\", value: \"🌀\"})\n }else{\n return Object.assign(html``, {value: []})\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"md`### Secondary Controls`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"viewof LonRot = Range([-360, 360], {\n step: 1,\n value: 0,\n label: \"Longitude Rotation\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"viewof LatRot = Range([-360, 360], {\n step: 10,\n value: 0,\n label: \"Latitude Rotation\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"viewof offmapEmoji = Radio([\"🏳️\",\"🏴\",\"🇺🇳\",\"🏁\",\"🏴‍☠️\",\"⬜️\",\"⬛️\",\"　\"], {\n value: \"🏴\",\n label: \"Off-Map Emoji\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"viewof landFallbackEmoji = Radio([\"🏳️\",\"🏴\",\"🇺🇳\",\"🏁\",\"🏴‍☠️\",\"❓\",\"🚩\"], {\n value: \"🇺🇳\",\n label: \"Falback Land Emoji\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"viewof fontSize = Range([8, 35], {\n step: 1,\n value: 10,\n label: \"CSS Font-Size\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"viewof antarcticaEmoji = Radio([\"Land\", \"Water\", \"Custom\"], {\n value: \"Land\",\n label: \"Antarctica is...\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1356,"value":"viewof customAntarctica = {\n if(antarcticaEmoji==\"Custom\"){\n return Inputs.text({label: \"Custom Antarctica\", value: \"🐧\"})\n }else{\n return Object.assign(html``, {value: []})\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"md`### Tertiary Controls\n_(you probably don't need to touch these, but you seem nice, so here they are)_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":812,"value":"viewof RollRot = Range([-360, 360], {\n step: 10,\n value: 0,\n label: \"Roll Rotation\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"viewof lineHeight = Range([0.3, 2], {\n step: 0.05,\n value: 0.85,\n label: \"CSS Line-Height\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"viewof upSampler = Range([1, 5], {\n step: 1,\n value: 3,\n label: \"Upsample Factor\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1028,"value":"viewof waterCodeWeight = Range([0, 3], {\n step: 0.1,\n value: 0.5,\n label: \"Water Weight\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1031,"value":"viewof missingCodeWeight = Range([0, 3], {\n step: 0.1,\n value: 2,\n label: \"Missing Weight\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"### Note from the Author\n_*unfortunately your country could be \"missed\" by this map! That's no fault to the data, or the approach, it just means that with such a low resolution representation, it may be hard to \"find\". Try sliding some of these sliders around I know you can make it work!_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"Read the writeup below for details on how this was created. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"md`\n--- \n\n--- \n\n## Approach\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"FileAttachment(\"Screen Shot 2021-05-19 at 5.21.45 PM.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"---\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"### Implementation\nNow that we've described our process, let's do it! 🚀","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1042,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"### Stage 1: Compute our Map Projection\nFirst we need to mathematically define the relationship between our finished graphic and the {lat, lon} world. This mapping that translates {lat, lon} data to {x, y} data is called a **map projection**. In this case, one has been selected from the drop down controls above, but we still need to **scale** it. So in this case let's define our canvas, our drawing board as one that is **dummyWidth** wide, and then create a **fittedProjection** that is exactly that width.\n\n*_Note: we use the name dummyWidth because the actual numerical value is not important, so long as it is consistent throughout our calculations. It just represents a metaphorical canvas that we're drawing to._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"dummyWidth = 1000 // this number is not meaningful in any way","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"fittedProjection = rawprojection.fitWidth(dummyWidth, {type: \"Sphere\"}).rotate([LonRot, LatRot, -RollRot])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1038,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"dummyHeight = {\n const sphere = {type: \"Sphere\"};\n const [[x0, y0], [x1, y1]] = d3.geoPath(rawprojection.fitWidth(dummyWidth, sphere)).bounds(sphere);\n const dy = (y1 - y0);\n return dy;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"We still don't quite have the number of **rows** in our Grid. We now know how tall our map's theoretical canvas is, compared to how wide it is. In order to know how many rows, we'll need to take the height of our canvas and divide by the height (in projection/canvas space) of each \"row\". \n\nOk this is going to get a bit confusing so hang with me. How are we supposed to know how many canvas-pixels tall our rows should be? Well, why not just base their height (now called **cellHeight**) off of their width (now called **cellWidth**). Because remember, we actually already know the **cellWidth**. Since we set **dummyWidth** and we know **numEmojiWide**, we can divide them to find the hypothetical **width** of our cells:\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"cellWidth = dummyWidth/numEmojiWide","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"It's tempting to make **cellHeight** equal to **cellWidth** isn't it? Some nice square cells? Well unfortunately emojis aren't squares, they're rectangles. _(However, if you'd like to see this approach modified for square cells - be sure to checkout this [CURSED noteboook](https://observablehq.com/@mattdzugan/do-not-try-this-cursed-plot-map-at-home))_ \n\n\\* sigh \\*\n\nWe're almost there I promise - we just need to compute the emoji's rendered aspect ratio, THEN we'll be able to get this **cellHeight** we're after...\n\n_Oh yeah, I forgot to mention, the aspect ratio changes as a function of CSS line-height._ 🤮","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"md`##### Emoji Rendering Details\nAfter a bit of experimentation it seems that the CSS line-height has a linear affect on the amount of vertical space an emoji's cell will occupy. \n\nSpecifically, at the defaul observable font-size. An emoji will occupy: \n\n\\`-0.05 + 16.9*LineHeight\\`\n\nwhereas it will always occupt a horizontal space of 17.2.\n\n_I did the afforementioned experimentaion using my mac's screenshot tool which always shows the size in pixels of the area I'm screnshotting_\n\nWe can use this to compute the emoji's rendered aspect ratio\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"emojiAspectRatio = (17.2) / (-0.05 + 16.9*lineHeight)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"**OK WE DID IT!** we have what we need to compute `cellHeight`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"cellHeight = cellWidth/emojiAspectRatio","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"Now that we have this, the original thing we set out for (**Number of rows in grid**) will be as simple as:\n~~~js\nupSampler*Math.ceil(dummyHeight/cellHeight)\n~~~\nso let's do this thing and get our lat lon sample points!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"lonlatMatrix = rasterizeMap(upSampler*Math.ceil(dummyHeight/cellHeight),\n upSampler*numEmojiWide, \n [0, dummyHeight, 0, dummyWidth], \n fittedProjection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"---\n\n### Stage 3: Reverse Geocode the Samples\n\nOk, it is now safe to empty your vomit receptacle. The rest is straightforward.\nNow that we've got our matrix of {lon lat} data, we need to convert it to countries.\n\nThere's a few ways you might try to do this.\n\nThe most common way would be to have a set of polygons/shapes that describe each country, and then check to see wether or not each {lat lon} point is in each country. This is certainly the most accurate method, but with thousands of points and hundreds of countries, we've got hundreds of thousands of polygon-point checks to do. And those calculations are expensive.\n\nSo let's do something much simpler _(albeit less accurate)_\n\nIn the notebook [@mattdzugan/lightweight-reverse-geocoder](https://observablehq.com/@mattdzugan/lightweight-reverse-geocoder) (which i wrote on my journey to this stupid emoji map) I provide a 2D grid (yes, another one) that's simply just a grid of country IDs. Literally imagine a giant excel sheet that looks like:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":983,"value":"\n \n \n \n \n \n \n

Canda	Canda	Water	Canda
Canda	Canda	Canda	Canda
Canda	Canda	Canda	USA
USA	USA	USA	USA
USA	USA	USA	USA
USA	USA	USA	Water

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"such that if you zoom back and squint - your actually looking at an abstract map in some sense _(in an equirectangular projection)_\n\nThe reason why this approach is so advantageous is because it's **REALLY EASY** to find the answer to which country is at a given coordinate. If you want `Latitude = 89` and `Longitude = 3`, well that's just `Row 2` and `Column 3`. It's really easy to just query a table like this. Our computers will thank us.\n\nI handwaved some of the details a bit, so if you're hungry for more detail on that, check [the country-lookup notebook itself](https://observablehq.com/@mattdzugan/lightweight-reverse-geocoder).\n\nBut anyways, it's pretty simple to convert our **lonlatMatrix** from stage 2, so a **countryCodeMatrix**. We'll just take each element of the matrix, and run the `lonLat2country` function on it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"countryCodeMatrix = lonlatMatrix.map(r => r.map(c => lonLat2country([c.lon, c.lat])))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1083,"value":"_Note: it should be noted that while I keep referring to this as the **countryCodeMatrix** it actually has 3 types of codes:_\n* _Country Codes_\n* _A Code Which Represents \"Water\" -- ${waterCode}_\n* _A Code Which Represents \"null\" or \"hey - you're off the map!\" -- ${missingCode}_\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"$47","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"countryCodeMatrix_Down = downSampleByWeightedFreq(countryCodeMatrix, upSampler,\n new Map([[waterCode, waterCodeWeight],\n [missingCode, missingCodeWeight]]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1071,"value":"Let's take a moment to admire 👆 that matrix of country codes. Look it's even `numEmojiWide` elements across!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"---\n\n### Stage 5: Replace Country-Codes with Emojis\n\nNow that we have an array of country codes, all that's left is to convert them to their actual emojis and then print 'em out!\n\nNaturally, as a resourceful internet citizen - I was able to find a file which has our ISO 3166-1 Country Codes and maps the to their emojis.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"countryEmoji = FileAttachment(\"countryInfo.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1135,"value":"the file was missing a few entries however, so I had to manually add a handful:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"countryEmojiLookup = {\n var m = new Map(countryEmoji.map(key => [Number(key.numeric), key.flag]));\n \n // I'm missing a few\n m.set(10, \"🇦🇶\");\n m.set(304, \"🇬🇱\");\n m.set(732, \"🇪🇭\");\n m.set(254, \"🇬🇫\");\n m.set(238, \"🇫🇰\");\n m.set(158, \"🇹🇼\");\n m.set(540, \"🇳🇨\"); \n m.set(239, \"🇬🇸\"); \n m.set(258, \"🇵🇫\"); \n m.set(796, \"🇹🇨\");\n m.set(92 , \"🇻🇬\");\n m.set(850, \"🇻🇮\");\n m.set(660, \"🇦🇮\");\n m.set(52, \"🇧🇧\");\n m.set(670, \"🇻🇨\");\n m.set(780, \"🇹🇹\");\n m.set(662, \"🇱🇨\");\n m.set(474, \"🇲🇶\");\n m.set(212, \"🇩🇲\");\n m.set(312, \"🇬🇵\");\n m.set(630, \"🇵🇷\");\n m.set(744, \"🇸🇯\");\n // that was #realdatascience\n \n return m;\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"md`#### Mapping to Emojis\n\nNow that we've built our **country code --> emoji** map, let's use it to create an **emojiMatrix**!\n\nThis stage has a few conditional statements to handle the plethora of inputs available to the user at the top via all the radio buttons. It's all fairly straightforward though.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"And now that we've got a matrix of these things, we're at our final step.\n\nAll we need to do is convert this matrix into a few lines of text.\nThis is admittedly a bit of HTML ninja manouvering, but hopefully reading the code you can follow what's going on. Essentially we create a blank string, add each emoji to it, and then at the end of a row we add a linebreak symbol.\n\n_oh, of course, then I add a link to my twitter. Don't hate the player, hate the game._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"textOutput = {\n var str = '';\n for(var emojiRow of emojiMatrix){\n for(var emoji of emojiRow){\n str = str+emoji;\n }\n str = str+'
'\n }\n \n str = str + '
@mattdzugan' // ❤\n \n const p = `

${str}

`;\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"---\n## Appendix\n\nOne of the user-checkboxes above allows a user to decide wether or not the projection will automatically rotate, giving the illusion of a spinning globe.\n\nSince Longitudinal Rotation is already an input, we use a little generator here to trigger the update of this parameter (`LonRot`).\n\nFirst we make a little counter `ii` that updates every 100 milliseconds _(as long as the \"rotate\" checkbox is checked)_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1183,"value":"ii = {\n let i = 0;\n while (true) {\n await Promises.delay(100);\n if(rotate){\n i++;\n }\n yield i;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1228,"value":"next we just create a simple bit of logic:\n\nIf the \"rotate\" checkbox is checked, increment the value for `LonRot`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1194,"value":"{\n function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\"));\n }\n \n if(rotate){\n set(viewof LonRot, (ii%360)-180)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1247,"value":"---\n\n## Related Works\n### Emojification of Images ([link](https://observablehq.com/@mattdzugan/emojification-convert-images-to-hundreds-of-emojis-to-impr))\nIf you enjoy this and want to see more emoji content, try [this notebook](https://observablehq.com/@mattdzugan/emojification-convert-images-to-hundreds-of-emojis-to-impr) - where I build a tool that converts an image into a set of emoji.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1257,"value":"{\n var str = ''+'❔❔❔❔❔❔🗻⛴🔵🔵🔵🔵🏙🥿❔❔❔❔❔❔
❔❔❔❔⛴🥏🔵🟦🟦🖲🦥🗄🖲🟫🎮🕳❔❔❔❔
❔❔❔🔵🟦🟦🟦🔵🌍🌳🗄🤢🤢🤢🥦🟫🦍❔❔❔
❔❔🔵🟦🟦🟦🆒🏞🍏🤢🤢🤢🤢🤢🤢🟫🟫🦍❔❔
❔🧢🟦🟦🟦🟦📘🍀🍀🔫🤢🥝🌏🌽🌗📜🟫⬛♟❔
🗻🟦🟦🟦🚹🍈🥝🥏🔣🔣🔽🌎🤢😇🍐🌒🟫🟫⬛❔
🔵🟦🟦🟦🛅🍈🍈🍈🔓🗾🗾🔵🔵🌝🤢🍐🟫🟫⬛♟
🟦🟦🟦🛅🌁🏻🏻🏻🍈🌝🌝🎾🌝🌔🌝📜🦥🟫🟫🕋
🟦🟦🟦🥏🏻🏻🏻🏻🍈🍈🌝🎾🌝🌗🤢🤢🍐🟦⬛⬛
🟦🟦🟦📶🍈🏻🏻🏻🍈🍈🌝🌝🌝🤢🌓🌳🔵🟦🌑⬛
🟦🟦🟦🛅🧩🧩🧩🧩🧩🧩🧩🤢🤢🤢🍐🌠🟦🟦🌑⬛
🟦🟦🟦🟦🚹🏙🥏🛅🔋🧩🔋🔋🤢🥝🏉🔵🟦🟦🌑🌑
🤢🟦🟦🟦🟦🚹🚹🚹🔽🧩🔋🔋🍐🥝🔵🟦🟦🌑🌑🌑
🌕🌗🟦🟦🟦🟦🟦🟦🟦🤢🤢🤢🥝🍐🟦🟦🟦🌑🌑🌑
👇🌗🟦🟦🟦🟦🟦🟦🟦🌝🌝🍐🍐🍱🖲🌃🟦🌑🌑❣
❔🌗🟦🟦🟦🟦🟦🟦🟦🌔🌝🏉🍐🟦🟫🔵🌑🌑🌑❔
❔🦈🟦🟦🟦🟦🟦🟦🟦🔵🏉🏉🔵🟦🟦🌑🌑🌑🥄❔
❔❔💙🟦🟦🟦🟦🟦🟦🟦🔵🔵🟦🟦🌑🌑🌑💾❔❔
❔❔❔👿🟦🟦🟦🟦🟦🟦🟦🟦🟦🌑🌑🌑💾❔❔❔
❔❔❔❔🪁😈🟦🟦🟦🟦🟦🌑🌑🌑🖥🥄❔❔❔❔
❔❔❔❔❔❔❔🪁🖥🖥🖥🖥💾🥄❔❔❔❔❔❔

'\n\n const p = md`${str}`;\n p.style.lineHeight = 1.25;\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1271,"value":"### Maps as Text ([link](https://observablehq.com/@visionscarto/ascii-art-geography))\n[Fil](https://observablehq.com/@fil) has a [similar notebook](https://observablehq.com/@visionscarto/ascii-art-geography) to this one you're reading, but he solves the problem in a completely different way. He renders the map to a low-resolution canvas, then queries the pixels on that canvas to determine which country they're in etc. While that approach doesn't allow for the weighted scaling we take advantage of here, it's admittedly much simpler overall.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1174,"value":"---\n\n## Imports\n#### A few of these are custom-tools I built just for this notebook:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"import {lonLat2country, missingCode, waterCode} from \"@mattdzugan/lightweight-reverse-geocoder\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"import {downSampleByWeightedFreq} from \"@mattdzugan/downsample-matrix-by-weighting-frequencies\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"import {rasterizeMap} from \"@mattdzugan/raster-sampling-of-maps\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1160,"value":"#### Here's a real nifty one from [Fil](https://observablehq.com/@fil)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"import {projectionInput} with {d3} from \"@fil/d3-projections\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1156,"value":"#### The rest are more common","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import {Radio, Range, Select, Toggle} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3-geo@2\", \"d3-geo-projection@3\", \"d3-geo-polygon@1.8\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 44:"$43:body"