2d:null 2e:["$","title",null,{"children":"Quick, Draw! Star Constellations | Amit Sch | Observable"}] 33:T596,sheet = { const sheet = svgSheet({ viewSize:[width, width * paperSize[1]/paperSize[0]], paperSize: paperSize, unit: 'in', margin: { t: 0.35, r: 0.5, b: .5, l: 0.35 }, zoomable: true, rulers: { t: false, b: false, l: false, r: true, } }) const inset = false sheet.addLayer({ inset, name: 'Background' }) sheet.addLayer({ inset, name: 'Frame' }) sheet.addLayer({ inset, name: 'Graticule' }) sheet.addLayer({ inset, name: 'Background Stars' }) sheet.addLayer({ inset, name: 'Constellation Stars' }) sheet.addLayer({ inset, name: 'Layout' }) sheet.addLayer({ inset, name: 'Hulls' }) sheet.addLayer({ inset, name: 'Strokes' }) sheet.addLayer({ inset, name: 'Labels' }) sheet.querySelector('svg').insertBefore( (svg``).firstChild, sheet['Background'] ) // Most of the drawing happens in a cell named 'proc' // The reason is to avoid rerunning of this cell ('sheet') when // parameters change, which also preserves the zoom and panning of // the sheet view return sheet }34:T1306,proc = { const sz = sheet.bottomRight(false) const quarterInch = sheet.convert(.25, 'in') const border = sheet.convert(1/16, 'in') const margin = sheet.convert(3/16, 'in') const nib = sheet.convert(0.05, 'cm') function isInFrame(coordinates, extent) { const pt = projection(coordinates) return Math.max(extent[0][0], Math.min(extent[1][0], pt[0])) === pt[0] && Math.max(extent[0][1], Math.min(extent[1][1], pt[1])) === pt[1] } d3.select(sheet.layers['Background']).selectAll('rect') .data([null]) .join('rect') .attr('width', sz[0]) .attr('height', sz[1]) const clipExtent = [ [margin + border, margin + border], [sz[0] - margin - border, sz[1] - margin - border] ] const projection = d3.geoStereographic() .translate([sz[0]/2, sz[1]/2]) .rotate([rotation, -elevation, 20]) .clipExtent(clipExtent) .scale(zoom) const path = d3.geoPath(projection) const graticule = d3.geoGraticule()() d3.select(sheet.layers['Graticule']).selectAll('path.graticule') .data([null]) .join('path').attr('class', 'graticule') .attr('d', path(graticule)) .attr('stroke', '#555').attr('fill', 'none') .attr('stroke-dasharray', '6 3') d3.select(sheet.layers['Frame']).selectAll('rect') .data([ margin + nib/2, margin + border - nib/2 ]) .join('rect') .attr('x', v => v) .attr('y', v => v) .attr('width', v => sz[0] - v * 2) .attr('height', v => sz[1] - v * 2) .attr('stroke', '#ccc').attr('fill', 'none') d3.select(sheet.layers['Frame']).selectAll('path') .data(borderDashes([ [margin + border/2, margin + border/2], [sz[0] - margin - border/2, sz[1] - margin - border/2] ], nib)) .join('path') .attr('stroke', '#ccc').attr('fill', 'none') .attr('d', d3.line()) d3.select(sheet.layers['Strokes']).selectAll('path') .data( renderingOptions.includes('Strokes') ? sky.constellations.map(d => d.geoStrokes.geometry) : [] ) .join('path') .attr('d', path) .attr('stroke', '#fff').attr('fill', 'none').attr('opacity', .5) .attr('stroke-width', 1) d3.selectAll([ sheet.layers['Background Stars'], sheet.layers['Constellation Stars'] ]).selectAll('circle') .data(function (_, i) { if ( (i === 0 && !renderingOptions.includes('Background Stars')) || (i === 1 && !renderingOptions.includes('Constellation Stars')) ) { return [] } return sky.stars.features .filter(d => d.properties.inConstellation === Boolean(i)) .filter(d => isInFrame(d.geometry.coordinates, clipExtent)) }) .join('circle') .attr('r', d => d.properties.r) .attr('opacity', d => d.properties.alpha || 1) .attr('transform', d => `translate(${projection(d.geometry.coordinates)})`) .attr('fill', '#fff') d3.selectAll([ sheet.layers['Constellation Stars'], sheet.layers['Strokes'] ]) .attr('filter', 'url(#softGlow)') d3.select(sheet.layers['Layout']).selectAll('path') .data( renderingOptions.includes('Circles') ? sky.constellations .map(d3.geoCircle().center(d => [d.circle.x, d.circle.y]).radius(d => d.circle.r)) : [] ) .join('path') .attr('d', path) .attr('stroke', '#ff0').attr('fill', 'none') d3.select(sheet.layers['Hulls']).selectAll('path') .data( renderingOptions.includes('Hulls') ? sky.constellations .map(d => d.geoStars.properties.offsetHull) .map(hull => ({ type: 'Polygon', coordinates: [hull], })) : [] ) .join('path') .attr('d', path) .attr('stroke', 'red').attr('fill', '#ff000055' || 'none') let labelAbove d3.select(sheet.layers['Labels']).selectAll('g') .data( renderingOptions.includes('Names') ? sky.constellations.filter(d => isInFrame([d.circle.x, d.circle.y], clipExtent)) : [] ) .join('g') .attr('stroke', '#f00').attr('fill', 'none') .attr('transform', d => `translate(${ d3.mean(d.geoStars.features, d => projection(d.geometry.coordinates)[0]) }, ${ d3[(labelAbove = projection([d.circle.x, d.circle.y])[1] > sz[1] * .85) ? 'min' : 'max']( d.geoStars.features, d => projection(d.geometry.coordinates)[1]) + quarterInch/4 * (labelAbove ? -2.2 : 1) })`) .selectAll('path') .data( d => [...renderTextPaths( d.word.split(' ').map(t => t.charAt(0).toUpperCase() + t.substr(1)).join(' '), { size: 10, font: 'timesi' || 'gothiceng' || 'timesr', anchor:'middle' }) ], () => String(Math.random()) ) .join(enter => enter.append(d => d),) .attr('stroke', '#fff').attr('fill', 'none') return 'Successfully Drawn' }35:T40b,## Concerns Admittedly, there are two big problems with this approach to constellations. First, these constellations aren't based on the real stars. The star positions are completely made up. In theory, it *might* be possible to fit some of these drawing to the *real* star positions in our sky, but doing so seemed much NP harder. The second problem is, if you remove the lines between stars (which you can do using the ***Show/Hide*** checkboxes) to view the constellations as they would be seen in the (fake) night sky, the constellations aren't all that recognizable. It turns out human brains aren’t so good at connecting dots. So that pretty much defeats the purpose. ## In Conclusion Weighing the shortcomings of these new constellations against the undeniable usefulness of our current, real constellations — especially when it comes to astronomy, navigation, farming and storytelling — it is recommended to continue using the current scheme, the way our ancestors have been doing it. However, metaphorically speaking:36:T80e,{ const unitSz = 200, results = searchResults.slice(0, 4 * Math.floor(width / unitSz)), wrapWidth = Math.floor(width / unitSz) * unitSz, height = unitSz * Math.ceil(results.length * unitSz / wrapWidth), line = d3.line() const svg = (this ? d3.select(this) : d3.create('svg')) .attr('width', width).attr('height', height) let result = svg.selectAll('g') .data(results, d => d.word) result.exit().remove() result = result.enter() .append('g') .call(g => { g.append('rect') .attr('x', -unitSz / 2 + 2) .attr('y', -unitSz / 2 + 2) .attr('width', unitSz - 4) .attr('height', unitSz - 4) .attr('fill', '#000').attr('stroke', '#333') g.append('path') .attr('d', d => recenterStrokes(d.strokes, { padding: 0.3, r: unitSz / 2 }).map(line)) .attr('transform', 'translate(0, -4)') .attr('fill', 'none').attr('stroke', '#fff') g.append('text') .attr('x', -unitSz / 2 + 8) .attr('y', unitSz / 2 - 8) // .attr('dy', '1em') .attr('fill', '#fff') }) .merge(result) .order() .attr('transform', (_,i) => `translate(${ unitSz / 2 + (unitSz * i) % wrapWidth }, ${ unitSz / 2 + unitSz * Math.floor( i * unitSz / wrapWidth ) })`) .on('click', function() { const d = d3.select(this).datum() if (mutable mustHaves.includes(d)) { mutable mustHaves = mutable mustHaves.filter(_d => _d !== d) } else { mutable mustHaves = mutable mustHaves.concat([d]) } update(result) }) .call(update) function update(result) { result.select('rect') .attr('fill', d => mutable mustHaves.includes(d) ? '#333' : '#000') .attr('stroke', d => mutable mustHaves.includes(d) ? '#999' : '#333') result.select('text') .text( d => d.word.split(' ') .map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ') + (mutable mustHaves.includes(d) ? ' ✓' : '') ) } return svg.node() }37:T518,Plot.plot({ width: Math.min(800, width), height: Math.min(800, width), margin: framing.margin, style: { background: '#000', }, projection: { rotate: [rotation, -elevation, 20*0], ...framing.projection, }, r: { range: [0.25, 2 * width/1e3], }, marks: [ // Graticule and frame Plot.graticule({strokeOpacity: 0.3, stroke: '#fff', strokeWidth: width/1000}), Plot.sphere({ stroke: '#fff' }), // Circles around each constellation Plot.geo(sky.constellations, { geometry: d3.geoCircle() .center(d => [d.circle.x, d.circle.y]) .radius(d => d.circle.r), // stroke: '#555', fill: 'transparent', title: 'word', }), // Constellation strokes Plot.geo(sky.constellations, { geometry: d => d.geoStrokes, stroke: '#fff', strokeWidth: 0.5 * width/1e3, }), // stars Plot.geo(sky.stars.features, { r: d => d.properties.r, fill: '#fff', }), // Constellation labels Plot.text(sky.constellations, { text: d => d.word, x: d => d.circle.x, y: d => d3.min(d3.merge(d.geoStrokes.geometry.coordinates).map(p => p[1])) - 1, fill: '#fff', fontSize: 10 * width / 1000, fontFamily: 'serif', fontStyle: 'italic', }) ] })38:T65a,sky = { const rngPos = d3.randomUniform.source(d3.randomLcg(seed + 10))(0, 1) const rngRad = d3.randomNormal.source(d3.randomLcg(seed + 11))(0, .5-.15) const rngAlpha = d3.randomNormal.source(d3.randomLcg(seed + 12))(.5, .3) const stars = { type: 'FeatureCollection', features: d3.range(starAmount) .map(() => [rngPos() * 2 * π, rngPos() * 2 - 1]) .map(([x,z]) => [x * 180 / π, Math.asin(z) * 60]) .map(([lng, lat]) => [(lng + 360) % 360, lat, rngRad()]) .filter(coordinates => { if (starDodging === 'Slow') { return !constellations.find(d => { return d3.polygonContains(d.geoStars.properties.offsetHull, coordinates) }) } if (starDodging === 'Faster') { const nearest = constellations[ d3.minIndex(constellations, d => Math.pow(d.circle.x - coordinates[0], 2) + Math.pow(d.circle.y - coordinates[1], 2)) ] return !d3.polygonContains(nearest.geoStars.properties.offsetHull, coordinates) } return true }) .map(coordinates => ({ type: 'Feature', properties: { r: 1 + Math.pow(coordinates.pop(), 2), alpha: rngAlpha(), inConstellation: false, }, geometry: { type: 'Point', coordinates } })) // Append all the constellations' stars to the background field of stars .concat(constellations.flatMap(d => d.geoStars.features)) } return { stars, constellations } }39:Tb3c,constellations = { const rngIndex = d3.randomUniform.source(d3.randomLcg(seed))(0, 1) const rngAngle = d3.randomNormal.source(d3.randomLcg(seed + 1))(-9, 9) const rngRad = d3.randomNormal.source(d3.randomLcg(seed + 2))(0, .5-.1) const rngAlpha = d3.randomNormal.source(d3.randomLcg(seed + 3))(.8, .1) const availableDrawings = drawings.filter(d => !mustHaves.includes(d)), chosenDrawings = [] for (let i = 0; i < N - mustHaves.length; i++) { const randomIndex = (Math.floor(rngIndex() * availableDrawings.length) + seed) % availableDrawings.length chosenDrawings.push(availableDrawings.splice(randomIndex, 1)[0]) } const constellations = mustHaves.concat(chosenDrawings) .map((drawing, i) => { // Compute the circle region of the sky allotted to the constellation by spherical fibonacci const circle = { x: fiblat.θ(i) * 180 / π, y: -fiblat.φ(i, N, E) * 180 / π + 90, r: 90 / Math.sqrt(N), } // Pick a randomized angle to slightly rotate the constellation in place const angle = rngAngle() * π / 180 + π /* plus half revolution */ const strokesReprojected = recenterStrokes(drawing.strokes).map( stroke => stroke // Slightly rotate the constellation in place for a more "natural" look .map(([x, y]) => [ x * Math.cos(angle) - y * Math.sin(angle), y * Math.cos(angle) + x * Math.sin(angle), ]) // Project onto a sphere, at the allotted position .map(([x, y]) => { y = y * circle.r + circle.y return [x * circle.r / Math.cos(y * π / 180) + circle.x, y] }) ) const geoStrokes = { type: 'Feature', properties: { type: 'strokes', name: drawing.word, }, geometry: { type: 'MultiLineString', coordinates: strokesReprojected, } } const starPositions = d3.merge(simplify(geoStrokes).geometry.coordinates), hull = d3.polygonHull(starPositions) const geoStars = { type: 'FeatureCollection', properties: { hull, offsetHull: new Offset() .arcSegments(12) .data([hull.concat([hull[0]])]) .margin(1.5)[0], }, features: starPositions.map(pt => ({ type: 'Feature', properties: { r: 1 + Math.pow(rngRad(), 2), alpha: Math.pow(rngAlpha(), 2), inConstellation: true, }, geometry: { type: 'Point', coordinates: pt } })) } geoStars.properties.hull.push(geoStars.properties.hull[0]) return { ...drawing, geoStrokes, geoStars, circle, } }) return constellations }3a:Tefd,wordList = ["aircraft carrier", "airplane", "alarm clock", "ambulance", "angel", "animal migration", "ant", "anvil", "apple", "arm", "asparagus", "axe", "backpack", "banana", "bandage", "barn", "baseball", "baseball bat", "basket", "basketball", "bat", "bathtub", "beach", "bear", "beard", "bed", "bee", "belt", "bench", "bicycle", "binoculars", "bird", "birthday cake", "blackberry", "blueberry", "book", "boomerang", "bottlecap", "bowtie", "bracelet", "brain", "bread", "bridge", "broccoli", "broom", "bucket", "bulldozer", "bus", "bush", "butterfly", "cactus", "cake", "calculator", "calendar", "camel", "camera", "camouflage", "campfire", "candle", "cannon", "canoe", "car", "carrot", "castle", "cat", "ceiling fan", "cello", "cell phone", "chair", "chandelier", "church", "circle", "clarinet", "clock", "cloud", "coffee cup", "compass", "computer", "cookie", "cooler", "couch", "cow", "crab", "crayon", "crocodile", "crown", "cruise ship", "cup", "diamond", "dishwasher", "diving board", "dog", "dolphin", "donut", "door", "dragon", "dresser", "drill", "drums", "duck", "dumbbell", "ear", "elbow", "elephant", "envelope", "eraser", "eye", "eyeglasses", "face", "fan", "feather", "fence", "finger", "fire hydrant", "fireplace", "firetruck", "fish", "flamingo", "flashlight", "flip flops", "floor lamp", "flower", "flying saucer", "foot", "fork", "frog", "frying pan", "garden", "garden hose", "giraffe", "goatee", "golf club", "grapes", "grass", "guitar", "hamburger", "hammer", "hand", "harp", "hat", "headphones", "hedgehog", "helicopter", "helmet", "hexagon", "hockey puck", "hockey stick", "horse", "hospital", "hot air balloon", "hot dog", "hot tub", "hourglass", "house", "house plant", "hurricane", "ice cream", "jacket", "jail", "kangaroo", "key", "keyboard", "knee", "knife", "ladder", "lantern", "laptop", "leaf", "leg", "light bulb", "lighter", "lighthouse", "lightning", "line", "lion", "lipstick", "lobster", "lollipop", "mailbox", "map", "marker", "matches", "megaphone", "mermaid", "microphone", "microwave", "monkey", "moon", "mosquito", "motorbike", "mountain", "mouse", "moustache", "mouth", "mug", "mushroom", "nail", "necklace", "nose", "ocean", "octagon", "octopus", "onion", "oven", "owl", "paintbrush", "paint can", "palm tree", "panda", "pants", "paper clip", "parachute", "parrot", "passport", "peanut", "pear", "peas", "pencil", "penguin", "piano", "pickup truck", "picture frame", "pig", "pillow", "pineapple", "pizza", "pliers", "police car", "pond", "pool", "popsicle", "postcard", "potato", "power outlet", "purse", "rabbit", "raccoon", "radio", "rain", "rainbow", "rake", "remote control", "rhinoceros", "rifle", "river", "roller coaster", "rollerskates", "sailboat", "sandwich", "saw", "saxophone", "school bus", "scissors", "scorpion", "screwdriver", "sea turtle", "see saw", "shark", "sheep", "shoe", "shorts", "shovel", "sink", "skateboard", "skull", "skyscraper", "sleeping bag", "smiley face", "snail", "snake", "snorkel", "snowflake", "snowman", "soccer ball", "sock", "speedboat", "spider", "spoon", "spreadsheet", "square", "squiggle", "squirrel", "stairs", "star", "steak", "stereo", "stethoscope", "stitches", "stop sign", "stove", "strawberry", "streetlight", "string bean", "submarine", "suitcase", "sun", "swan", "sweater", "swing set", "sword", "syringe", "table", "teapot", "teddy-bear", "telephone", "television", "tennis racquet", "tent", "The Eiffel Tower", "The Great Wall of China", "The Mona Lisa", "tiger", "toaster", "toe", "toilet", "tooth", "toothbrush", "toothpaste", "tornado", "tractor", "traffic light", "train", "tree", "triangle", "trombone", "truck", "trumpet", "t-shirt", "umbrella", "underwear", "van", "vase", "violin", "washing machine", "watermelon", "waterslide", "whale", "wheel", "windmill", "wine bottle", "wine glass", "wristwatch", "yoga", "zebra", "zigzag"]3b:T577,class BinaryDrawing { constructor(ab, data_offset) { const buf = new Uint8Array(ab, data_offset) this.data = buf this.strokes = [] var c = 0 c += 8 // Key id this.n_strokes = buf[c] + (buf[c + 1] << 8) if (this.n_strokes > 1000) throw new Error("Too many strokes: " + this.n_strokes) this.n_points = 0 c += 2 this.headerSize = c for (var i = 0; i < this.n_strokes; i++) { var n_points = buf[c] + (buf[c + 1] << 8);c += 2 this.n_points += n_points c += n_points * 2 } this.data_length = c } getKeyId() { var key = BigInteger(0) for (var i = 7; i >= 0; i--) { key = key.multiply(256) key = key.add(this.data[i]) } return key.toString(); } getStrokes() { let c = this.headerSize; const strokes = [] for (let i = 0; i < this.n_strokes; i++) { const n_points = this.data[c] + (this.data[c + 1] << 8);c += 2; if (n_points > 2000) throw new Error("To many points: " + n_points); if (n_points > 1) { for (let u = 0; u < n_points; u++) { const x = this.data[c + u]; const y = this.data[c + u + n_points]; if (u == 0) { strokes.push([[x, y]]) } else { strokes[strokes.length - 1].push([x, y]) } } } c += n_points * 2; } return strokes } }3c:[{"id":"db92befef7380de1942c65dc01b3cfc15934c641997ee3c8d27bed9b22e39b01840b8d14c083f9102b2b3450c0c43094eb1f122528723dad7e4ff0fbbe3e2524","href":"https://static.observableusercontent.com/files/db92befef7380de1942c65dc01b3cfc15934c641997ee3c8d27bed9b22e39b01840b8d14c083f9102b2b3450c0c43094eb1f122528723dad7e4ff0fbbe3e2524","name":"quickdraw.chunk.0001.bin","type":"application/octet-stream","lastModified":1676235718786.988,"size":16308},{"id":"480ae5d921b70db6188189f16795f39edce68fcddd3d50ecb679b1e8605bfd557abb7970002b9ee1cd49cd396eafb1b8be1d744faac242bed3a2e1909b3012ae","href":"https://static.observableusercontent.com/files/480ae5d921b70db6188189f16795f39edce68fcddd3d50ecb679b1e8605bfd557abb7970002b9ee1cd49cd396eafb1b8be1d744faac242bed3a2e1909b3012ae","name":"quickdraw.chunk.0000.bin","type":"application/octet-stream","lastModified":1676235718791.784,"size":50554}] 31:{"id":"e1b5ffffd1aa58c5","slug":"star-constellations","title":"Quick, Draw! Star Constellations","thumbnail":"ef7e7ee3974643d315abb8f4c3a84868913191f83cf23f43bad255cd4ffc0da2","access_level":"public","create_time":"$D2023-02-12T20:57:32.062Z","update_time":"$D2023-08-06T20:25:04.465Z","view_time":null,"first_public_time":"$D2023-03-08T16:19:40.961Z","has_unpublished_edits":null,"fork":false,"stars":39,"starred":false,"owner":{"type":"team","id":"39266e42aee80d30","login":"meetamit","name":"Amit Sch","avatar_url":"https://avatars-next.observableusercontent.com/9670de3870bda4c2dfd4121b77200f8c0756c9f5bdebbf1a9e80887ba5c5c5a4","tier":"starter_2024"},"version":2123,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dfa15ada0d605a00","login":"meetamit","name":"Amit Sch","avatar_url":"https://avatars-next.observableusercontent.com/9670de3870bda4c2dfd4121b77200f8c0756c9f5bdebbf1a9e80887ba5c5c5a4","tier":null}],"members":[{"type":"individual","id":"dfa15ada0d605a00","login":"meetamit","name":"Amit Sch","avatar_url":"https://avatars-next.observableusercontent.com/9670de3870bda4c2dfd4121b77200f8c0756c9f5bdebbf1a9e80887ba5c5c5a4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Quick, Draw! Star Constellations","cells":[{"id":0,"value":"# Quick, Draw! Star Constellations\n\n*DISCLAIMER: To anyone who is knowledgeable about astronomy: Sorry!*\n\nThere are two glaring problems with star constellations as we know them. First, most constellations hardly look anything like the objects and creatures they're named after. And second, many constellations are named after obscure, outdated things (who’s Osidius, and what’s he so [emphatic](https://www.youtube.com/watch?v=RCyHFg9m9f8) about??).\n\nIn this notebook, better star constellations are proposed — ones that actually look like their namesakes, that are common objects recognizable by almost anyone.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":654,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"viewof rotation = Inputs.range([0, 360], { value: 0, label: 'Projection Rotation', step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"viewof elevation = Inputs.range([-90, 90], { value: 35, label: 'Projection Tilt', step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1896,"value":"viewof zoom = Inputs.range([200, 2000], { value: 618, step: 1, label: 'Projection Zoom'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"viewof seed = Inputs.range([0, 1000], { value: 1, step: 1, label: 'Random Seed' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1418,"value":"viewof N = Inputs.range([3, drawings.length], { value: 80, step: 1, label: 'Density (constellations per globe)'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1290,"value":"viewof simplificationAmount = Inputs.range([0, 1], { value: 0.618, step: .01, label: 'Path/Star Simplification' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"viewof packPadding = Inputs.range([0, .5], {\n value: 0.15,\n format: v => (v * 100).toFixed(0),\n label: 'Constellation Padding',\n step: .01,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1962,"value":"viewof starAmount = Inputs.range([1e3, 8e3], { step: 1e3, value: 3e3, label: 'Background Star Amount'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1143,"value":"viewof renderingOptions = {\n const options = ['Strokes', 'Constellation Stars', 'Background Stars', 'Names']\n return Inputs.checkbox(options.concat(['Circles', 'Hulls']), { value: options, label: 'Show/Hide' })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1635,"value":"The new constellations are generated using Google’s [*Quick, Draw!*](https://quickdraw.withgoogle.com/) dataset of about 340 drawings, from among which ${N} drawings (adjustable via *Density* slider) are randomly chosen (*Random Seed* slider), simplified (*Path/Star Simplification* slider) and turned into constellations. A [Fibonacci Lattice](https://observablehq.com/@meetamit/fibonacci-lattices) is used for laying out the constellations on the globe (this layout method is somewhat unrealistic, as constellations don't tend to be evenly spaced across celestial sphere). Then, randomly generated background stars are added, with some care taken to avoid overlaps between constellations and background stars (*Background Star Dodging* radio selector). Under the hood, the stars and constellations are represented as GeoJSON, and d3-geo comes in very handy in rendering them. Since all the lines and text are vector based, this map is importable into InkScape and plotter-friendly, except for the glow effects.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1341,"value":"viewof paperSize","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"renderSvgDownloadButton(sheet, 'constellations', 'Download SVG')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1499,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1856,"value":"![\"Don't wait for the stars to align, reach up and rearrange them the way you want...create your own constellation\" – Pharrell Williams](https://www.azquotes.com/picture-quotes/quote-don-t-wait-for-the-stars-to-align-reach-up-and-rearrange-them-the-way-you-want-create-pharrell-williams-86-72-59.jpg)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1997,"value":"Below, you can search through all the drawings in the Google *Quick, Draw!* dataset and, by clicking a drawing you like, you can force it to be included in the otherwise-randomized selection of constellations to map (look for your selection near the north pole). Perhaps in the future a less crude selection mechanism will be added to this notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1508,"value":"viewof searchResults = Inputs.search(drawings, { label: 'Search Drawings', query: 'do' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1512,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2017,"value":"mustHaves.length === 0 ? md`No Drawings Selected` : html`Selected drawings: ${mustHaves.map(d => d.word).join(', ')}.

${viewof clear}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"viewof framing = {\n let v0\n return Inputs.radio([\n v0 = {\n label: 'Orthographic',\n margin: 30,\n projection: {\n type: 'orthographic', \n // clip: 450,\n // domain: d3.geoCircle().center([85.3, 27.7]).radius(50)(),\n },\n },\n {\n label: 'Stereographic',\n margin: 15, \n projection: {\n type: 'stereographic', \n },\n },\n {\n label: 'Mercator',\n margin: 15, \n projection: {\n type: 'mercator',\n rotate: [0, 0, 0]\n },\n },\n {\n label: 'Conic Equidistant',\n margin: 15, \n projection: {\n type: 'conic-equidistant',\n domain: d3.geoCircle().center([0,10]).radius(80)(),\n // rotate: [0, 0, 0],\n },\n }\n\n], {\n value: v0,\n format: d => d.label,\n label: 'Preview Projection'\n})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1229,"value":"{\n viewof E.value = 1.25\n viewof E.dispatchEvent(new CustomEvent('input'))\n return viewof E\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1204,"value":"viewof starDodging = Inputs.radio(['None', 'Slow', 'Faster'], { value: 'Faster', label: 'Background Star Dodging'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1734,"value":"mutable mustHaves = [] || clear","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":855,"value":"function borderDashes(extent, thickness) {\n function borderEdges(extent, offset) {\n const tl = [extent[0][0] - offset, extent[0][1] - offset],\n br = [extent[1][0] + offset, extent[1][1] + offset]\n return d3.pairs([tl, [br[0], tl[1]], br, [tl[0], br[1]], tl]) \n }\n\n function dashes([p1, p2], n) {\n const interpolator = d3.interpolateArray(p1, p2)\n const steps = d3.range(0, 1+1e-3, .5/n)\n .filter((v,i) => v === 0 || v === 1 || i % 2 === (n+1) % 2)\n .map(t => [...interpolator(t)])\n return d3.pairs(steps)\n .filter((seg, i) => i % 2 === 0)\n }\n\n function distance(p1, p2) {\n return Math.sqrt(Math.pow(p2[0]-p1[0], 2) + Math.pow(p2[1]-p1[1], 2))\n }\n\n const approxDashLength = sheet.convert(1/3, 'in')\n return d3.range(-.75, .75 + 1e-3, .5)\n .flatMap(f => borderEdges(extent, f * thickness))\n .flatMap(edge => dashes(edge, Math.floor(distance(...edge) / approxDashLength)))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1529,"value":"function recenterStrokes(strokes, {padding, r}={padding: packPadding, r: 1}) {\n // Compute the circle that tightly encloses the drawing\n const circum = d3.packEnclose(\n d3.merge(strokes).map(([x, y]) => ({ x, y, r: 0 }))\n )\n return strokes.map(\n stroke => stroke\n // Recenter the drawing and its enclosing circle on 0,0 and normalize r to unit circle\n .map(([x, y]) => [\n (x - circum.x) / circum.r * (1 - padding) * r, \n (y - circum.y) / circum.r * (1 - padding) * r,\n ])\n )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"π = Math.PI","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"drawings = {\n const buffer1 = await FileAttachment(\"quickdraw.chunk.0000.bin\").arrayBuffer(),\n buffer2 = await FileAttachment(\"quickdraw.chunk.0001.bin\").arrayBuffer(),\n join = new Uint8Array(buffer1.byteLength + buffer2.byteLength)\n join.set(new Uint8Array(buffer1), 0)\n join.set(new Uint8Array(buffer2), buffer1.byteLength)\n \n const buffer = join.buffer,\n drawings = [] \n let cursor = 0, index = 0\n while (cursor < buffer.byteLength) {\n const drawing = new BinaryDrawing(buffer, cursor)\n drawings.push({\n word: wordList[index],\n strokes: drawing.getStrokes(),\n })\n index++\n cursor += drawing.data_length\n }\n\n const exclusions = [\n 'animal migration',\n 'hockey puck',\n 'jail',\n 'line',\n 'square',\n ]\n return drawings\n .filter(d => !exclusions.includes(d.word))\n // .slice(200, 300)\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"function simplify(feature, quantile=(1-simplificationAmount)) {\n const topojson = topojsonExtras\n const topology = topojson.topology({feature})\n const presimplified = topojson.presimplify(topology)\n const minWeight = topojson.quantile(presimplified, quantile) \n const simplified = topojson.simplify(presimplified, minWeight)\n return topojson.feature(simplified, simplified.objects.feature)\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1875,"value":"viewof clear = Inputs.button('Clear Selection')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"BigInteger = (await import('https://cdn.skypack.dev/javascript-biginteger@0.9.2?min')).BigInteger","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"import { fiblat, viewof E } from '@meetamit/fibonacci-lattices'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"import { svgSheet, renderSvgDownloadButton, renderPrintButton, viewof paper as paperSize } with { renderTextPaths } from '@meetamit/svg-sheet'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"import { renderTextArray, renderTextSvg, renderTextPaths, fonts } from '@meetamit/hershey-fonts'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"topojsonExtras = {\n return Object.assign(topojson, {\n ...await require('topojson-simplify'),\n ...await require('topojson-server')\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1444,"value":"Offset = require('https://bundle.run/polygon-offset@0.3.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 32:"$31:body"