30:T706,md`## Comments The globe above was built with d3 and X3Dom from the file [land.json](https://mcmcclur.static.observableusercontent.com/files/ae1de257fe186aebe95a275fd82967cc00a195b11c1d47fced96b70863d6f288f2a11ea845bab9a4d011454ba53c87b81c264906f2217e810c0d9968ce5130ba?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27land.json&Expires=1577707200000&Key-Pair-Id=APKAJCHFJLLLU4Y2WVSQ&Signature=VT6ZRRvpSVAcFTqQY1Hl098igKc7o5o1AvQe9NRIFLYc2v8UXLMXmEEZZS-77RnF1fcWgxzAJ~2vFXC83a8wpIaJdtXtHvl-IUwTrGectPMYSFOWzBYcv7eav5lGc3~VKQA1h-F4mBmJxeKcU7txMWWSnFxiYBDgY6mhDzC~FeLYQj02x29YMEmQpFEaIce12Bunv~sLMK7cVzIHqovfbSCKzwQg-xzxCTE1zo2jxPws8ylCqOAH5MygFdU523Qd~9ibCXrMLTQlLXkv96XQmqUFxC4ISg48MksJMZTRzIW~sGbDwZhMMznA1AyUUuBzZFjeNhtefIhabRKNEY87Rw__). The result is a bit different from most other interactive globes that I've seen that are typically either: * 2D images that are maps in orthographic projection or * 3D renderings (using X3Dom or THREE) with a texture. The closest that I've seen to the effect here uses [GeoElevationGrid](http://create3000.de/users-guide/components/geospatial/geoelevationgrid/), like [Andreas Plesch's visualization of sea level](https://observablehq.com/@andreasplesch/sea-level-past-present-and-future). The land.json file was built from Natural Earth's widely used [ne_110m_land](https://www.naturalearthdata.com/downloads/110m-physical-vectors/110m-land/) data set. I first used a point reduction algorithm to simplify that file a bit with [Mapshaper](https://mapshaper.org/). I triangulated the resulting polygons with [Triangle](https://www.cs.cmu.edu/~quake/triangle.html). I then added elevation data obtained from [Elevation API](https://elevation-api.io/) and finally converted all that to the JSON form here that is easily used by X3Dom.`31:Te71,function* create_globe() { let this_width = width < 600 ? width : 600; let height = this_width; // d3.min([this_width, window.screen.height]); // let this_width = 600; // let height = 600; let container = d3 .create("div") .style("width", this_width.toString() + "px") .style("height", height.toString() + "px"); // .style('border', 'solid 1px black'); let scene = container .append("x3d") .attr("width", this_width.toString() + "px") .attr("height", height.toString() + "px") .append("scene"); let r = (2 * Math.PI) / 3; r = r.toString(); let d = 1 / Math.sqrt(3); d = d.toString(); let ddd = d + " " + d + " " + d; scene .append("viewpoint") .attr("position", "4 0 0") .attr("orientation", ddd + " " + r); scene .append("directionalLight") .attr("direction", "-0.5 1 0") .attr("on", "TRUE") .attr("intensity", "0.75"); // .attr('shadowIntensity', '0.2') // .attr('shadowOffset', 100); // Unfortunatley, the shadow produces a fairly poor effect. let tilt = scene .append("transform") .attr("id", "tilt") .attr("rotation", "1 0 0 0.2"); let rotation = tilt.append("transform").attr("id", "rotation"); let sphere_shape = rotation.append("shape"); sphere_shape .append("appearance") .append("material") .attr("diffuseColor", "0.63 0.73 0.85") .attr("shininess", "0.1"); sphere_shape .append("sphere") .attr("subdivision", "256,256") .attr("radius", "0.999"); for (let cnt = 0; cnt < land.pts.length; cnt++) { let pt_string = ""; let color_string = ""; land.pts[cnt].forEach(function (lnglat) { let lnglat_sphere_string = lnglat_to_globe(lnglat, { r: 1.6 }); pt_string = pt_string + lnglat_sphere_string + ", "; color_string = color_string + shade(lnglat[2] / M) + ", "; }); let index_string = ""; land.triangles[cnt].forEach(function (ijk) { let i = ijk[0]; let j = ijk[1]; let k = ijk[2]; index_string = index_string + `${i} ${j} ${k} -1 `; }); let land_shape = rotation.append("shape"); let indexedFaceSet = land_shape .append("indexedFaceset") .attr("coordIndex", index_string) .attr("creaseAngle", "0"); indexedFaceSet.append("coordinate").attr("point", pt_string); indexedFaceSet.append("Color").attr("color", color_string); let mesh = rotation.append("shape").attr("class", "mesh"); mesh.append("appearance").append("material").attr("transparency", 1); mesh .append("IndexedLineSet") .attr("coordIndex", index_string) .append("Coordinate") .attr("point", pt_string); } let pt_string = ""; let index_string = ""; d = Math.PI / 12; let dd = Math.PI / 144; let cnt = 0; for (let lng = -Math.PI; lng <= Math.PI; lng = lng + d) { for (let lat = -Math.PI / 2; lat <= Math.PI / 2; lat = lat + dd) { pt_string = pt_string + lnglat_to_globe([lng, lat]) + ", "; index_string = `${index_string} ${cnt++}`; } index_string = index_string + " -1"; } for (let lat = -Math.PI / 2; lat <= Math.PI / 2; lat = lat + d) { for (let lng = -Math.PI; lng <= Math.PI; lng = lng + dd) { pt_string = pt_string + lnglat_to_globe([lng, lat]) + ", "; index_string = `${index_string} ${cnt++}`; } index_string = index_string + " -1"; } let graticule = rotation.append("shape").attr("class", "graticule"); graticule.append("appearance").append("material").attr("transparency", 0); graticule .append("IndexedLineSet") .attr("coordIndex", index_string) .append("Coordinate") .attr("point", pt_string); yield container.node(); x3dom.reload(); }32:[{"id":"ae1de257fe186aebe95a275fd82967cc00a195b11c1d47fced96b70863d6f288f2a11ea845bab9a4d011454ba53c87b81c264906f2217e810c0d9968ce5130ba","href":"https://static.observableusercontent.com/files/ae1de257fe186aebe95a275fd82967cc00a195b11c1d47fced96b70863d6f288f2a11ea845bab9a4d011454ba53c87b81c264906f2217e810c0d9968ce5130ba","name":"land.json","type":"application/json","lastModified":1577602154030.386,"size":560482}] 2e:{"title":"An X3D Globe","cells":[{"id":0,"value":"md`# An X3D Globe`","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"viewof rotation = Scrubber(rotation_values)","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"viewof show_triangulation = checkbox({\n options: [{ value: \"true\", label: \"Show triangulation\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":851,"value":"viewof show_graticule = checkbox({\n options: [{ value: \"true\", label: \"Show graticule\" }],\n value: \"true\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"globe = create_globe()","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"function lnglat_to_globe(lnglat, opts = {}) {\n let { r = 1, mode = \"radians\" } = opts;\n let lat = lnglat[1];\n let lng = lnglat[0];\n let R;\n\n // Third component represents elevation, if it exists\n if (lnglat.length > 2) {\n R = 1.001 + 0.000005 * lnglat[2];\n } else {\n R = r;\n }\n if (mode == \"degrees\") {\n lat = (lat * Math.PI) / 180;\n lng = (lng * Math.PI) / 180;\n }\n\n // Convert latitude to spherical phi\n let phi = Math.PI / 2 - lat;\n let theta = lng;\n let x = R * Math.sin(phi) * Math.cos(theta);\n if (Math.abs(x) < 0.000001) {\n x = 0;\n }\n let y = R * Math.sin(phi) * Math.sin(theta);\n if (Math.abs(y) < 0.000001) {\n y = 0;\n }\n let z = R * Math.cos(phi);\n if (Math.abs(z) < 0.000001) {\n z = 0;\n }\n return x + \" \" + y + \" \" + z;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":810,"value":"lnglat_to_globe([-82, 35])","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"function shade(elevation) {\n let result;\n if (elevation < 0.5) {\n result = d3.interpolateRgb('rgb(0, 105, 62)', \"rgb(210, 180, 140)\")(\n 2 * elevation\n );\n } else {\n result = d3.interpolateRgb(\"rgb(210, 180, 140)\", 'white')(\n 2 * elevation - 1\n );\n }\n return String(\n result\n .split('(')[1]\n .split(')')[0]\n .split(',')\n .map(x => String(parseFloat(x) / 255))\n ).replace(/,/g, ' ');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":362,"value":"// The maximum of all elevations\nM = d3.max(\n land.pts.map(pt_list => d3.max(pt_list.map(p => p[p.length - 1])))\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"rotate = d3\n .select(globe)\n .select('#rotation')\n .attr('rotation', `0 0 1 ${rotation}`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":854,"value":"show_grat = {\n let transparency;\n if (show_graticule) {\n transparency = \"0\";\n } else {\n transparency = \"1\";\n }\n d3.select(globe)\n .selectAll(\".graticule\")\n .select(\"material\")\n .attr(\"transparency\", transparency);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":537,"value":"show_tri = {\n let transparency;\n if (show_triangulation) {\n transparency = '0';\n } else {\n transparency = '1';\n }\n d3.select(globe)\n .selectAll('.mesh')\n .select('material')\n .attr('transparency', transparency);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":358,"value":"rotation_values = d3.range(0, 2 * Math.PI, Math.PI / 500)","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"// This file defines 90 triangulated land masses.\n// The array in pts[k] defines the points in the kth land mass as\n// [longitude, latitude, elevation] triples.\n// The kth element of the triangles array is a list of triples and\n// each triple contains indices of pts[k] defining a triangle in\n// that land mass. Of course, that's easy to translate to either an\n// indexedLineSet or an indexedFaceSet\n\nland = FileAttachment(\"land.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"// d3 = require('d3-selection@2', 'd3-array@2', 'd3-interpolate@2')","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"x3dom = require('x3dom').catch(() => window['x3dom'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":509,"value":"import { checkbox } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":453,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"// Hide the canvas outline and some Scrubber features\nstyle = html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}