40:null 41:["$","title",null,{"children":"Sketchy Earth + Pencil + scenes | Daniel Wood | Observable"}] 47:T14c2,// https://observablehq.com/@matthewturk/pencil-effect-filters function applyPencilFilterTextures(svg) { const defs = svg.append("defs"); defs.html(arrowHead) var roughPaper = defs.append("filter"); roughPaper .attr("x", "0%") .attr("y", "0%") .attr("width", "100%") .attr("height", "100%") .attr("filterUnits", "objectBoundingBox") .attr("id", "roughPaper"); roughPaper.append("feTurbulence") .attr("type", "fractalNoise") .attr("baseFrequency", "128") .attr("numOctaves", "1") .attr("result", "noise"); var diffLight = roughPaper.append("feDiffuseLighting"); diffLight .attr("in", "noise") .attr("lighting-color", "white") .attr("surfaceScale", "1") .attr("result", "diffLight"); diffLight.append("feDistantLight") .attr("azimuth", "45") .attr("elevation", "55"); roughPaper.append("feGaussianBlur") .attr("in", "diffLight") .attr("stdDeviation", "0.75") .attr("result", "dlblur"); roughPaper.append("feComposite") .attr("operator", "aritmetic") .attr("k1", "1.2") .attr("k2", "0") .attr("k3", "0") .attr("k4", "0") .attr("in", "dlblur") .attr("in2", "SourceGraphic") .attr("result", "out"); var pencilTexture = defs.append("filter") .attr("x", "-2%") .attr("y", "-2%") .attr("width", "104%") .attr("height", "104%") .attr("filterUnits", "objectBoundingBox") .attr("id", "pencilTexture") pencilTexture.append("feTurbulence") .attr("type", "fractalNoise") .attr("baseFrequency", "1.2") .attr("numOctaves", "3") .attr("result", "noise") pencilTexture.append("feDisplacementMap") .attr("xChannelSelector", "R") .attr("yChannelSelector", "G") .attr("scale", "3") .attr("in", "SourceGraphic") .attr("result", "newSource"); var pencilTexture2 = defs.append("filter") .attr("x", "0%") .attr("y", "0%") .attr("width", "100%") .attr("height", "100%") .attr("filterUnits", "objectBoundingBox") .attr("id", "pencilTexture2"); pencilTexture2.append("feTurbulence") .attr("type", "fractalNoise") .attr("baseFrequency", 2) .attr("numOctaves", 5) .attr("stitchTiles", "stitch") .attr("result", "f1"); pencilTexture2.append("feColorMatrix") .attr("type", "matrix") .attr("values", "0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1.5 1.5") .attr("result", "f2"); pencilTexture2.append("feComposite") .attr("operator", "in") .attr("in2", "f2") .attr("in", "SourceGraphic") .attr("result", "f3"); var pencilTexture3 = defs.append("filter") .attr("x", "0%") .attr("y", "0%") .attr("width", "100%") .attr("height", "100%") .attr("filterUnits", "objectBoundingBox") .attr("id", "pencilTexture3"); pencilTexture3.append("feTurbulence") .attr("type", "fractalNoise") .attr("baseFrequency", 0.5) .attr("numOctaves", 5) .attr("stitchTiles", "stitch") .attr("result", "f1"); pencilTexture3.append("feColorMatrix") .attr("type", "matrix") .attr("values", "0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1.5 1.5") .attr("result", "f2"); pencilTexture3.append("feComposite") .attr("operator", "in") .attr("in2", "f2b") .attr("in", "SourceGraphic") .attr("result", "f3"); pencilTexture3.append("feTurbulence") .attr("type", "fractalNoise") .attr("baseFrequency", 1.2) .attr("numOctaves", 3) .attr("result", "noise"); pencilTexture3.append("feDisplacementMap") .attr("xChannelSelector", "R") .attr("yChannelSelector", "G") .attr("scale", 2.5) .attr("in", "f3") .attr("result", "f4"); var pencilTexture4 = defs.append("filter") .attr("x", "-20%") .attr("y", "-20%") .attr("width", "140%") .attr("height", "140%") .attr("filterUnits", "objectBoundingBox") .attr("id", "pencilTexture4"); pencilTexture4.append("feTurbulence") .attr("type", "fractalNoise") .attr("baseFrequency", 0.03) .attr("numOctaves", 3) .attr("seed", 1) .attr("result", "f1"); pencilTexture4.append("feDisplacementMap") .attr("xChannelSelector", "R") .attr("yChannelSelector", "G") .attr("scale", 5) .attr("in", "SourceGraphic") .attr("in2", "f1") .attr("result", "f4"); pencilTexture4.append("feTurbulence") .attr("type", "fractalNoise") .attr("baseFrequency", 0.03) .attr("numOctaves", 3) .attr("seed", 10) .attr("result", "f2"); pencilTexture4.append("feDisplacementMap") .attr("xChannelSelector", "R") .attr("yChannelSelector", "G") .attr("scale", 5) .attr("in", "SourceGraphic") .attr("in2", "f2") .attr("result", "f5"); pencilTexture4.append("feTurbulence") .attr("type", "fractalNoise") .attr("baseFrequency", 1.2) .attr("numOctaves", 2) .attr("seed", 100) .attr("result", "f3"); pencilTexture4.append("feDisplacementMap") .attr("xChannelSelector", "R") .attr("yChannelSelector", "G") .attr("scale", 3) .attr("in", "SourceGraphic") .attr("in2", "f3") .attr("result", "f6"); pencilTexture4.append("feBlend") .attr("mode", "multiply") .attr("in2", "f4") .attr("in", "f5") .attr("result", "out1"); pencilTexture4.append("feBlend") .attr("mode", "multiply") .attr("in", "out1") .attr("in2", "f6") .attr("result", "out2"); }48:T7c4,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width , height]) .attr("fill", "none") .attr("stroke", "currentColor"); // Bring in the filters applyPencilFilterTextures(svg); const outline = svg.append("path") .attr("fill","white") .attr("id","earth") const grid = svg.append("path") .attr("stroke-width","0.5px") .attr("stroke","#eee") .attr("filter", "url(#pencilTexture4"); const feature = svg.append("path") .attr("stroke-width", "3px") .attr("fill","#eeeeee") .attr("filter", "url(#pencilTexture3"); const linebox = svg.append("g").attr("id","lineBox"); const lines = linebox.selectAll(".lines") .data(linesRaw.features.reverse()) .join("path") .attr("class",d => `lines ${d.properties.class}`) .attr("stroke","#0789ad"); function render() { grid.attr("d", path(graticule)); outline.attr("d", path(sphere)); feature.attr("d", path(land)); lines.attr("d", d => path2(d)) } let p1, p2 = [0, 0], r1, r2 = [0, 0, 0]; let z1, z2 = 400; // Create the step through scene code here function update(e) { let item = arbitraryPoints.find(o => o.trigger == e) p1 = p2, p2 = [item.lon,item.lat]; z1 = z2, z2 = item.zoom; // Get the diff between current and next scene rotate/zoom r1 = r2, r2 = [-p2[0], tilt - p2[1], 0]; const ip = d3.geoInterpolate(p1, p2); const iv = Versor.interpolateAngles(r1, r2); const zoomer = (t) => {return z1 + (z2-z1)*t}; // render the path between with a tween. d3.transition() .duration(1250) .tween("render", () => t => { projection.scale(zoomer(t)); projection.rotate(iv(t)); render(); }) .transition() .tween("render", () => t => { render(); }) .end(); return e; } update(); return Object.assign(svg.node(), {update}); }49:T7d8,// versor = require("versor@0.0.4") class Versor { static fromAngles([l, p, g]) { l *= Math.PI / 360; p *= Math.PI / 360; g *= Math.PI / 360; const sl = Math.sin(l), cl = Math.cos(l); const sp = Math.sin(p), cp = Math.cos(p); const sg = Math.sin(g), cg = Math.cos(g); return [ cl * cp * cg + sl * sp * sg, sl * cp * cg - cl * sp * sg, cl * sp * cg + sl * cp * sg, cl * cp * sg - sl * sp * cg ]; } static toAngles([a, b, c, d]) { return [ Math.atan2(2 * (a * b + c * d), 1 - 2 * (b * b + c * c)) * 180 / Math.PI, Math.asin(Math.max(-1, Math.min(1, 2 * (a * c - d * b)))) * 180 / Math.PI, Math.atan2(2 * (a * d + b * c), 1 - 2 * (c * c + d * d)) * 180 / Math.PI ]; } static interpolateAngles(a, b) { const i = Versor.interpolate(Versor.fromAngles(a), Versor.fromAngles(b)); return t => Versor.toAngles(i(t)); } static interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]) { a2 -= a1, b2 -= b1, c2 -= c1, d2 -= d1; const x = new Array(4); return t => { const l = Math.hypot(x[0] = a1 + a2 * t, x[1] = b1 + b2 * t, x[2] = c1 + c2 * t, x[3] = d1 + d2 * t); x[0] /= l, x[1] /= l, x[2] /= l, x[3] /= l; return x; }; } static interpolate([a1, b1, c1, d1], [a2, b2, c2, d2]) { let dot = a1 * a2 + b1 * b2 + c1 * c2 + d1 * d2; if (dot < 0) a2 = -a2, b2 = -b2, c2 = -c2, d2 = -d2, dot = -dot; if (dot > 0.9995) return Versor.interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]); const theta0 = Math.acos(Math.max(-1, Math.min(1, dot))); const x = new Array(4); const l = Math.hypot(a2 -= a1 * dot, b2 -= b1 * dot, c2 -= c1 * dot, d2 -= d1 * dot); a2 /= l, b2 /= l, c2 /= l, d2 /= l; return t => { const theta = theta0 * t; const s = Math.sin(theta); const c = Math.cos(theta); x[0] = a1 * c + a2 * s; x[1] = b1 * c + b2 * s; x[2] = c1 * c + c2 * s; x[3] = d1 * c + d2 * s; return x; }; } }4a:[{"id":"eec657afeffb70691657f56f78ce546cc20861c628c4272d902fb7ff94d07a73737fd5356d255cef2a092de8322c56bbbc4f0f6a3c0c12864101f37ec6da9321","href":"https://static.observableusercontent.com/files/eec657afeffb70691657f56f78ce546cc20861c628c4272d902fb7ff94d07a73737fd5356d255cef2a092de8322c56bbbc4f0f6a3c0c12864101f37ec6da9321","name":"land-110m.json","type":"application/octet-stream","lastModified":1676929514405.82,"size":55207},{"id":"f09c2b426e0921592fd2011e20c21e1c02de3adcb62c0c7e0ed8b587660d16da77392e20c377cca698bd848edf66b04b2ee639e7a5fae9d82b4660f441599a76","href":"https://static.observableusercontent.com/files/f09c2b426e0921592fd2011e20c21e1c02de3adcb62c0c7e0ed8b587660d16da77392e20c377cca698bd848edf66b04b2ee639e7a5fae9d82b4660f441599a76","name":"lines.geojson","type":"application/geo+json","lastModified":1676997937302.888,"size":2958},{"id":"6236cd91fbbfb8a25bc72b32e204593896b4b197a334de8c59da2054b261873afa757aba39fa7e27f70cf7a242f25d97221c5b915027330bc0f69df27267db41","href":"https://static.observableusercontent.com/files/6236cd91fbbfb8a25bc72b32e204593896b4b197a334de8c59da2054b261873afa757aba39fa7e27f70cf7a242f25d97221c5b915027330bc0f69df27267db41","name":"lines@2.geojson","type":"application/geo+json","lastModified":1677014924133.651,"size":134853},{"id":"0cf0ab96687604ff6f16092b997299babe1834e538753732ba13ade879a7fb8967da7118de5d55919a3647d29db663d9a0b7e81181f4084260bcf076d0077f0a","href":"https://static.observableusercontent.com/files/0cf0ab96687604ff6f16092b997299babe1834e538753732ba13ade879a7fb8967da7118de5d55919a3647d29db663d9a0b7e81181f4084260bcf076d0077f0a","name":"lines@1.geojson","type":"application/geo+json","lastModified":1677007130773.377,"size":3591}] 45:{"id":"4941020b7e992148","slug":null,"title":"Sketchy Earth + Pencil + scenes","thumbnail":"8b655d2ccd457d734f0b77f5cd74e0630d89d23b9ab0da79b63f6832e0007a91","access_level":"public","create_time":"$D2023-02-20T21:45:14.405Z","update_time":"$D2023-03-20T20:19:23.460Z","view_time":null,"first_public_time":"$D2023-02-20T21:45:14.405Z","has_unpublished_edits":null,"fork":{"id":"bb265e5f8575d2b6","slug":null,"title":"Sketchy Earth + Pencil + step through","owner":{"id":"3e625d3fdbdc0d0a","login":"danieljwood","name":"Daniel Wood"}},"stars":1,"starred":false,"owner":{"type":"team","id":"3e625d3fdbdc0d0a","login":"danieljwood","name":"Daniel Wood","avatar_url":"https://avatars-next.observableusercontent.com/37aea67dccef4e009d2709aca1700a64df2eb6b1d78ff8a345b3b2bc3bcc8f2f","tier":"starter_2024","bio":"Maps and Chartjunk for @nprapps","following":false},"version":1157,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"319e840dacaee022","login":"danieljwood","name":"Daniel Wood","avatar_url":"https://avatars-next.observableusercontent.com/37aea67dccef4e009d2709aca1700a64df2eb6b1d78ff8a345b3b2bc3bcc8f2f","tier":null,"bio":"Maps and Chartjunk for @nprapps","following":false}],"members":[{"type":"individual","id":"319e840dacaee022","login":"danieljwood","name":"Daniel Wood","avatar_url":"https://avatars-next.observableusercontent.com/37aea67dccef4e009d2709aca1700a64df2eb6b1d78ff8a345b3b2bc3bcc8f2f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sketchy Earth + Pencil + scenes","cells":[{"id":0,"value":"md`# Sketchy Earth + Pencil + scenes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"viewof stepOne = Inputs.button(\"Step 1\", {value: \"stepOne\", reduce: (e) => chart.update(e)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"viewof stepTwo = Inputs.button(\"Step 2\", {value: \"stepTwo\", reduce: (e) => chart.update(e)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"viewof stepThree = Inputs.button(\"Step 3\", {value: \"stepThree\", reduce: (e) => chart.update(e)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1072,"value":"arbitraryPoints = d3.csv(getCsvUrl(url), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"# Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1045,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":790,"value":"# data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":977,"value":"linesRaw = FileAttachment(\"lines@2.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"sphere = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1070,"value":"url = \"https://docs.google.com/spreadsheets/d/1yZcjs9ATBOEGHzsACug4kgrRBouki83gvKd6kl1NcbI/edit#gid=0\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"land = {\n let topology = world;\n topology = topojson.presimplify(topology);\n topology = topojson.simplify(topology, minArea);\n return topojson.feature(topology, topology.objects.land);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"world = FileAttachment(\"land-110m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"# Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":346,"value":"viewof minArea = {\n const form = html``;\n form.i.oninput = () => {\n form.value = Math.pow(10, 2 - form.i.valueAsNumber);\n form.o.value = `${form.value.toFixed(2)} min. area`;\n };\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"path = geoCurvePath(d3.curveBasisClosed, projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"path2 = geoCurvePath(d3.curveLinear, projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"projection = d3.geoOrthographic().precision(0.1);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"curve = d3.curveBasisClosed","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, sphere)).bounds(sphere);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"tilt = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"# Libraries etc. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1129,"value":"arrowHead = `\n \n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"import {geoCurvePath} from \"@d3/context-to-curve\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"topojson = require(\"topojson@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"import {getCsvUrl} from \"@observablehq/google-sheets-starter\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 46:"$45:body"