31:T496,md` Inspired by the translucent globes that others have made in the past, here's one that uses a satellite projection (rather than an orthographic one). This creates distortion that mimics human intuition (specifically, landmasses on the back side look smaller than those on the front), giving the impression that you're looking at a glass sphere with the continents painted on its surface. This is accomplished using \`d3.geoClipPolygon()\` in order to clip the rear shell appropiately (basically doing the exact inverse clipping that \`clipAngle()\` performs). Try dragging the globe around to see what happens as landmasses cross the horizon, or changing the distance slider to see the effect that 'camera' distance has on distortion. If you're looking to add other elements to the 'scene' that aren't on the surface of the Earth (such as satellite orbits), or if you want to do more advanced lighting, you will probably be better served by using Three.js to draw your map onto an actual sphere, as in [Mike Bostock's example](/@mbostock/geojson-in-three-js). Most of this code was written by [Philippe Rivière](/@fil); I merely adjusted the projections and colors. `32:T8d8,map = { const context = this ? this.getContext("2d") : DOM.context2d(size, size); const render = function() { const path = d3.geoPath(projection, context); const rotate = projection.rotate(); const backpath = d3.geoPath(backprojection, context); const frontColor = d3.hcl('#a9c681'); const backColor = d3.hcl(frontColor); backColor.l += 15; backColor.c -= 30; context.clearRect(0, 0, width, width); context.beginPath(), path({type:"Sphere"}), context.fillStyle = '#fcfcfc', context.fill(); context.beginPath(), backpath(countries), context.fillStyle = backColor, context.fill(); context.beginPath(), backpath(d3.geoGraticule()()), context.lineWidth = .1, context.strokeStyle = '#aaa', context.stroke(); context.beginPath(), path(d3.geoGraticule()()), context.lineWidth = .1, context.strokeStyle = '#111', context.stroke(); context.beginPath(), path(countries), context.globalAlpha = 0.9, context.lineWidth = 1, context.strokeStyle = frontColor.darker(1), context.stroke(), context.fillStyle = frontColor, context.fill(), context.globalAlpha = 1; context.beginPath(), path({type: "Sphere"}), context.lineWidth = .1, context.strokeStyle = '#111', context.stroke(); context.beginPath(), path(selectedData); context.lineWidth = 1, context.strokeStyle = selectedColor, context.stroke() context.beginPath(), path({type: 'Point', coordinates: selectedPlace}); context.fillStyle = "red", context.fill() context.beginPath(), path({type: 'LineString', coordinates:[projection]}) context.lineWidth = 1, context.strokeStyle = selectedColor, context.stroke() // Flying arc } // no need to specify render() here, it's taken care of by the loop below. context.canvas.inertia = d3.geoInertiaDrag(d3.select(context.canvas), null, projection); const timer = d3.timer(function() { var rotate = projection.rotate(); rotate[0] += velocity * 20; projection.rotate(rotate); backprojection.rotate(rotate); render(); }); invalidation.then(() => (timer.stop(), timer = null, d3.select(context.canvas).on(".drag", null))); return context.canvas; }33:T438,function select(config = {}) { let { value: formValue, title, description, submit, multiple, size, options } = config; if (Array.isArray(config)) options = config; options = options.map( o => (typeof o === "object" ? o : { value: o, label: o }) ); const form = input({ type: "select", title, description, submit, getValue: input => { const selected = Array.prototype.filter .call(input.options, i => i.selected) .map(i => i.value); return multiple ? selected : selected[0]; }, form: html` ` }); form.output.remove(); return form; }34:T8dd,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }35:[] 2f:{"title":"Scholar Trajectory","cells":[{"id":1,"value":"md`# Scholar Trajectory`","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"md`_**Update:** Philippe Rivière (@fil) came up with a [more efficient way to create this effect](/@fil/translucent-earth-satellite-projection), by defining a new projection for the back face that uses a negative distance and a 180° rotation in λ. This permits the use of \\`clipAngle()\\` to clip the back face, which is much more performant than the \\`geoClipPolygon()\\` technique I used below (although this technique works for any polygon, which as [Philippe has demonstrated](/@fil/polyhedral-projections-with-d3-geo-polygon) opens up a lot of possibilities)._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"viewof selected_institution = select({\n title: \"Selected institution\",\n options: institutions,\n value: 0\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":575,"value":"viewof selected_inoutflow = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":756,"value":"viewof selected_year = slider({\n message: \"A sample slider that does nothing!\",\n min: 1980, \n max: 2015, \n start: 1980,\n step: 5,\n int: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"{\n // this only for informative purposes.\n while (true) {\n var p = projection.rotate().map(d3.format(\".2f\"));\n yield md`λ = ${p[0]}, φ = ${p[1]}, γ = ${p[2]}`\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"velocity = 0.003","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"viewof distance = {\n const inputToDistance = x => x ** 2;\n const distanceToInput = x => Math.sqrt(x);\n\n const form = DOM.element(\"form\");\n form.value = 3\n const input = html``;\n input.value = distanceToInput(form.value);\n input.addEventListener(\"input\", () => form.value = inputToDistance(input.valueAsNumber));\n form.appendChild(input);\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":463,"value":"md`Distance (Earth radii): ${distance.toPrecision(5)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"projection = d3.geoSatellite()\n .distance(distance)\n .clipAngle(Math.acos(1 / distance) * 180 / Math.PI - 1e-6)\n .precision(0.1)\n .fitExtent([[5, 5], [size - 5, size - 5]], {type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":721,"value":"projection.invert([0,0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":668,"value":"loftedProjection = d3.geoSatellite()\n .distance(distance)\n .clipAngle(Math.acos(1 / distance) * 180 / Math.PI - 1e-6)\n .precision(0.1)\n .fitExtent([[5, 5], [(size - 5)*1.3, (size - 5)*1.3]], {type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":670,"value":"function locationAlongArc(start, end, theta) {\n return d3.geoInterpolate(start, end)(theta);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":672,"value":"function flyingArc(link) {\n var source = [0,0],\n target = [50,50],\n middle = locationAlongArc(source, target, 0.5);\n return [ \n projection(source),\n loftedProjection(middle),\n projection(target)\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":680,"value":"link = {\n const data = {\"source\":[0,0],\"target\":[50,50]}\n \n return data\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":690,"value":"function lineLength(points) {\n var d = 0;\n for (var i = 0; i < points.length - 1; i++) {\n var x0 = points[0][0],\n y0 = points[0][1],\n x1 = points[1][0],\n y1 = points[1][1],\n dx = x1 - x0,\n dy = y1 - y0;\n d += Math.sqrt(dx * dx + dy * dy);\n }\n return d;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":521,"value":"backShell = d3.geoCircle()\n .center([180, 0])\n .radius(180 - projection.clipAngle())","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"backprojection = d3.geoSatellite()\n .distance(distance)\n .clipAngle(0)\n .preclip(d3.geoClipPolygon(backShell()))\n .translate(projection.translate())\n .scale(projection.scale())\n .precision(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"md`----\n_boring zone_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"Url=\"https://gist.githubusercontent.com/zhengyunhan/6bae5a5d7872ea314ca155281865fcc3/raw/820ee002c06751c4689e6f7a64318446cdd54fae/select_inflow.csv\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":580,"value":"Url2=\"https://gist.githubusercontent.com/zhengyunhan/ec0cba9408754fc0b38ae90b4dd65a10/raw/3ff848f89d4ebd2ded2c698f1697e18c9a4c3afa/select_outflow.csv\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":742,"value":"Urlin=\"https://gist.githubusercontent.com/zhengyunhan/dc9bf727352a5fd307381879bd3757d0/raw/6475356b1a569c48bf360b4fe970464092fbbf4f/inflow_5year.csv\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":744,"value":"Urlout=\"https://gist.githubusercontent.com/zhengyunhan/2389b3d6abb6a4afa37daaa8368bba7d/raw/34e9ce9ab5bfa1ae8b417a43d47b4c816a98655b/outflow_5year.csv\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":582,"value":"Inflow=d3.csv(Urlin)","pinned":true,"hidden":false,"mode":"ojs"},{"id":584,"value":"Outflow=d3.csv(Urlout)","pinned":true,"hidden":false,"mode":"ojs"},{"id":588,"value":"arc_inflow={\n let features=[]\n for (let i=0; i r[selected_institution] == 1 & r.year == selected_year, Inflow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"selected_outflow=z.filter(r => r[selected_institution] == 1 & r.year == selected_year, Outflow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":602,"value":"institutions=Object.keys(Inflow[0]).slice(14)","pinned":true,"hidden":false,"mode":"ojs"},{"id":766,"value":"z.unique(selected_inflow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":537,"value":"size = width * 0.8","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"land = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs"},{"id":567,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"world = d3.json(\"https://unpkg.com/world-atlas@1/world/110m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"d3-format\", \"d3-fetch@0.1\", \"d3-geo@1\", \"d3-geo-projection\", \"d3-geo-polygon\", \"d3-selection\", \"d3-timer\", \"d3-inertia\", \"d3-color\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":596,"value":"z = require('https://bundle.run/zebras@0.0.11')","pinned":true,"hidden":false,"mode":"ojs"},{"id":604,"value":"versor = require(\"versor@0.0.3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":606,"value":"// import {select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":733,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":736,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":738,"value":"d3format = require(\"d3-format@1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":753,"value":"function slider({\n message = 'Set your value', \n min = 0, \n max = 1, \n start = 0.5, \n step = 0.1,\n precision = 3, \n int = false,\n}){\n \n min = min/step;\n max = max/step;\n start = start/step;\n \n const div = html`\n\t${message}\n \n ${start*step}\n `;\n const range = div.querySelector(\"[type=range]\");\n const value_disp = div.querySelector('span');\n div.value = value_disp.innerHTML = start*step;\n\n \n range.addEventListener(\"input\", () => {\n const newValue = range.valueAsNumber*step; \n div.value = newValue;\n value_disp.innerHTML = int ? Math.round(newValue) : newValue.toPrecision(precision); \n });\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}