3e:null 3f:["$","title",null,{"children":"CAP 4720 Final Project: 3D Data Viewer | Fred Lu | Observable"}] 45:T419,{ var pointOnSphere = MouseXYZ(proj, view); var mouseLatLng = XYZ2latlon(pointOnSphere[0], pointOnSphere[1], pointOnSphere[2]); var minDistance = 10000000000; var data = chosenDataset.data; var lowestIdx; for (var i = 0; i < data.length; i++) { dataRenderables[i].active = false; var currentDistance = distance(mouseLatLng[0], mouseLatLng[1], parseFloat(data[i].coordinates.latitude), parseFloat(data[i].coordinates.longitude)); if (currentDistance < minDistance) { minDistance = currentDistance; lowestIdx = i; } } var lowest = data[lowestIdx]; var lowestName = (lowest == undefined) ? "" : lowest.locationName; var lowestVal = (lowest == undefined) ? "" : lowest.value; if (lowestName == "") return md`### No Data Point Selected`; else { dataRenderables[lowestIdx].active = true; // makes camera render camera.dirty = true; return md`### Closest Location: ${lowestName} Value: ${lowestVal}`; } }46:T92d,md `### Project Tasks (with divisions of labor):

Create discord server for team communications (Allen)
Paid subscription to Observable Teams for notebook collaboration (Pia)
Model Selection (Mark, Carter)

Models were needed to represent the earth (sphere), discs, and cylinders. Free earth models were examined from various websites including [Model 1](https://free3d.com/3d-model/earth-v1--590680.html#), [Model2](https://free3d.com/3d-model/ultra-realistic-sci-fi-earth-high-res-textures-low-end-textures-made-with-blender-279b-959150.html#), [Model 3](https://www.artstation.com/marketplace/p/Pvor/free-earth-planet-3d-model-all-format), and [Model 4](https://www.cgtrader.com/items/2408222/download-page). Each of the models had issues when loaded with the provided Object file loader. The final model selected for the earth was a sphere generated from THREE.js and D3 libraries provided by Dr. Sumantta Pattanaik, but using the texture found in model 3 listed above.

Identify REST API Data Set for COVID-19 Deaths and obtain initial data (Carter, Ryan)
Render Earth using REGL Camera Controls (Allen)
Render Data Points on model by Latitude and Longitude as GL Points (Yang, Mark)
Create disc with varying radius instead of GL Points (Yang, Ryan)

Create disc use THREE.js circle buffer, then make a model matrix use quaternion to rotate the disc to the correct position and direction.

Change color based on values (Ryan, Yang)

Our data points needed to be colored based off of the value they represented in the dataset. We used the D3 library to make a three-color scale (Purple -> Yellow -> Blue, from least to greatest) and applied the colors to each of our rendered discs.

Capture mouse canvas coordinates and convert to clip plane coordinates (Mark)
Mouse coordinates on the canvas are provided in range 0 to canvas height/width as (X,Y). These coordinates were converted to the clipspace range of -1 to +1.

`47:T464,{ gl.clear({color: [0.5, 0.5, 0.6, 1]}); const frame = gl.frame(() => { camera((state) => { if (!state.dirty) return; gl.clear({color: [0.5, 0.5, 0.6, 1]}) renderEarth(); mutable view = state.view; mutable proj = state.projection; let pointWidth = 8.0; for (var i = 0; i < dataRenderables.length; i++) { var color = d3.scaleSqrt() .domain([0, 0.5, 1]) .range(["purple", "yellow", "blue"]); var colorData = d3.color(color(dataRenderables[i].percent)); var colorVector = [colorData.r / 255.0, colorData.g / 255.0, colorData.b / 255.0]; var draw = dataRenderables[i].renderable; draw({ pointColor: dataRenderables[i].active ? hex2rgb("ff0000") : colorVector, view: state.view, projection: state.projection }); } }) }) invalidation.then(() => frame.cancel()); return md `Draw Canvas Code (Exapand Cell to View)` }48:T408,renderEarth = gl({ vert: ` precision mediump float; attribute vec3 position; attribute vec3 normal; attribute vec2 uv; uniform mat4 projection; uniform mat4 view; uniform mat4 modelMatrix; varying vec3 fragNormal; varying vec2 fragUV; void main() { gl_PointSize = 4.0; fragNormal = abs(modelMatrix * vec4(normal,0.0)).xyz; fragUV = uv; gl_Position = projection * view * modelMatrix * vec4(position,1); } `, frag: ` precision mediump float; varying vec3 fragNormal; varying vec2 fragUV; uniform sampler2D texture; void main() { vec3 color = texture2D(texture,fragUV).rgb;//abs(fragNormal) gl_FragColor = vec4(color, 1); } `, attributes: { position: sphere.positions, normal: sphere.normals, uv: sphere.uvs }, elements:sphere.cells, uniforms: { modelMatrix: modelMatrix, texture: sphere_texture }, primitive: 'triangles', cull: { enable: false } })49:T6c6,makeSmallCircleRenderable = (XYZ, radio) => { var translationMatrix = glMatrix.mat4.fromTranslation([], XYZ); var circleNormal = glMatrix.vec3.fromValues(0,0,1); // get normal vector between circle's normal line and direction vector var normalizVec = glMatrix.vec3.normalize([],glMatrix.vec3.cross([],circleNormal,XYZ)); // do dot product get the angle var angle = Math.acos((glMatrix.vec3.dot(XYZ,circleNormal)/(Math.sqrt(glMatrix.vec3.squaredLength(XYZ))))) var roterQuat = glMatrix.quat.setAxisAngle(glMatrix.quat.create(), normalizVec, angle) var rotationMatrix = glMatrix.mat4.fromQuat([], roterQuat) var modelMatrix = glMatrix.mat4.multiply([], translationMatrix, rotationMatrix) var cir = smallCircle(radio) var renderable = { vert: ` precision mediump float; attribute vec3 position; attribute vec3 normal; attribute vec2 uv; varying vec3 fragColor; uniform vec3 pointColor; uniform mat4 projection; uniform mat4 view; uniform mat4 modelMatrix; void main() { fragColor = pointColor; gl_Position = projection * view * modelMatrix * vec4(position,1); } `, frag: ` precision mediump float; varying vec3 fragColor; void main() { gl_FragColor = vec4(fragColor, 0.6); } `, attributes: { position: cir.positions, normal: cir.normals, uv: cir.uvs }, elements:cir.cells, uniforms: { modelMatrix: modelMatrix, pointColor: gl.prop('pointColor'), }, blend: { enable: true, func: { src: 'src alpha', dst: 'one minus src alpha' } }, primitive: 'triangles', cull: { enable: false } }; return renderable; }4a:T5bc,cylinderRenderable = (XYZ, percent) => { var cylinder = getCylinder(percent); var translationMatrix = glMatrix.mat4.fromTranslation([], XYZ); var cylinderAxis = glMatrix.vec3.fromValues(0,1,0); var normalizVec = glMatrix.vec3.normalize([],glMatrix.vec3.cross([],cylinderAxis,XYZ)); var angle = Math.acos((glMatrix.vec3.dot(XYZ,cylinderAxis)/(Math.sqrt(glMatrix.vec3.squaredLength(XYZ))))) var roterQuat = glMatrix.quat.setAxisAngle(glMatrix.quat.create(), normalizVec, angle); var rotationMatrix = glMatrix.mat4.fromQuat([], roterQuat); var modelMatrix = glMatrix.mat4.multiply([], translationMatrix, rotationMatrix); var renderable = { vert: ` precision mediump float; attribute vec3 position; attribute vec3 normal; attribute vec2 uv; uniform mat4 projection; uniform mat4 view; uniform mat4 modelMatrix; void main() { gl_PointSize = 4.0; gl_Position = projection * view * modelMatrix * vec4(position,1); } `, frag: ` precision mediump float; uniform vec3 pointColor; void main() { gl_FragColor = vec4(pointColor, 0.6); } `, attributes: { position: cylinder.positions, normal: cylinder.normals, uv: cylinder.uvs, }, elements:cylinder.cells, uniforms: { modelMatrix: modelMatrix, pointColor: gl.prop('pointColor') }, primitive: 'triangles', cull: { enable: false }}; return renderable; }4b:T54b,makeRenderablesForData = (genericData) => { let minMaxData = [] let min = 1000000000; let max = -100000000; for (let i = 0; i < genericData.data.length; i++) { if (max < parseFloat(genericData.data[i].value)) max = parseFloat(genericData.data[i].value) if (min > parseFloat(genericData.data[i].value)) min = parseFloat(genericData.data[i].value) } minMaxData[0] = min; minMaxData[1] = max; var renderables = [] for (let i = 0; i < genericData.data.length; i++) { var XYZ = latlon2XYZ(parseFloat(genericData.data[i].coordinates.latitude), parseFloat(genericData.data[i].coordinates.longitude)); var percent = parseFloat(genericData.data[i].value) / minMaxData[1]; if (displayFormat == "Circle") { renderables.push({ renderable: gl(makeSmallCircleRenderable( XYZ, getRad( minMaxData[0], minMaxData[1], parseFloat(genericData.data[i].value) ),)), color: hex2rgb("fff700"), percent: percent, active: false }); } else if (displayFormat == "Graph") { renderables.push({ renderable: gl(cylinderRenderable(XYZ, percent)), color: hex2rgb("fff700"), percent: percent, active: false }); } } return renderables; } 4c:[{"id":"7832cbebe75330327ce8635046f234731dfcc056931373d7772ba74540ceba7de5fe124f7eb9c4dcfb3ed9745c36aa0f1099ed8c65c4ff83d4443a93f4531a30","href":"https://static.observableusercontent.com/files/7832cbebe75330327ce8635046f234731dfcc056931373d7772ba74540ceba7de5fe124f7eb9c4dcfb3ed9745c36aa0f1099ed8c65c4ff83d4443a93f4531a30","name":"clipspace.jpg","type":"image/jpeg","lastModified":1674213453755.158,"size":23839},{"id":"09d610f17435468aaf728254bf465ad3e7146593e067f60b3feaa1bd6629235906e406fe52ac5ac79c86ea3827de7053069d9e1b7649927f8c336f7911deb5fb","href":"https://static.observableusercontent.com/files/09d610f17435468aaf728254bf465ad3e7146593e067f60b3feaa1bd6629235906e406fe52ac5ac79c86ea3827de7053069d9e1b7649927f8c336f7911deb5fb","name":"sphere-intersect.jpg","type":"image/jpeg","lastModified":1674213453755.158,"size":37794},{"id":"0939d4749c8e7e78314a8c266b6bdb86b2239a9851b897793c94ba338f00e3e39c9c21c2f293863e7b8d8b2f9e7034c5fb965bab1a61cb48dc4d613c031d7d5f","href":"https://static.observableusercontent.com/files/0939d4749c8e7e78314a8c266b6bdb86b2239a9851b897793c94ba338f00e3e39c9c21c2f293863e7b8d8b2f9e7034c5fb965bab1a61cb48dc4d613c031d7d5f","name":"8k_earth_daymap.jpg","type":"image/jpeg","lastModified":1674213453755.158,"size":4565076},{"id":"4750835415de771e7cc45aff387becbcab28292e9f31e3c8c401747a3610c25296f1819737f2b8e5fa54a5ea576a681b1d539f328c3b56280b19a7492f225268","href":"https://static.observableusercontent.com/files/4750835415de771e7cc45aff387becbcab28292e9f31e3c8c401747a3610c25296f1819737f2b8e5fa54a5ea576a681b1d539f328c3b56280b19a7492f225268","name":"covid19Data.txt","type":"text/plain","lastModified":1674213453755.158,"size":157614}] 43:{"id":"699e2ca5fea07408","slug":null,"title":"CAP 4720 Final Project: 3D Data Viewer","thumbnail":"426de37c8de77d49ee703cb27bd6a7c54a0ebf4fe1747e314ed28b52f30f6eb5","access_level":"public","create_time":"$D2023-01-20T11:17:33.755Z","update_time":"$D2023-01-20T11:17:33.755Z","view_time":null,"first_public_time":"$D2023-01-20T11:17:33.755Z","has_unpublished_edits":null,"fork":{"id":"7368ee8c2a24e595","slug":"cap-4720-final-project-3d-data-viewer","title":"CAP 4720 Final Project: 3D Data Viewer","owner":{"id":"91415db2a19585e8","login":"spattana","name":"Sumant Pattanaik"}},"stars":0,"starred":false,"owner":{"type":"team","id":"17521a73b4bf5369","login":"metaclass","name":"Fred Lu","avatar_url":"https://avatars-next.observableusercontent.com/74842e3449a16eaa8dc29f8685b5abd7f6e2a5bbb81c99ab6866780ea41c1981","tier":"starter_2024","bio":"","following":false},"version":1288,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"92c6c0b7fc90056e","login":"metaclass","name":"Fred Lu","avatar_url":"https://avatars-next.observableusercontent.com/74842e3449a16eaa8dc29f8685b5abd7f6e2a5bbb81c99ab6866780ea41c1981","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"92c6c0b7fc90056e","login":"metaclass","name":"Fred Lu","avatar_url":"https://avatars-next.observableusercontent.com/74842e3449a16eaa8dc29f8685b5abd7f6e2a5bbb81c99ab6866780ea41c1981","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"CAP 4720 Final Project: 3D Data Viewer","cells":[{"id":1284,"value":"md`# CAP 4720 Final Project: 3D Data Viewer\nLink to the original authors' page: https://observablehq.com/d/80c24ea6a2b36c52`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`# 3D Data Viewer (Final Demo)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":995,"value":"{\n return chosenDataset.title == \"\" ? md`## Title` : md`## ${chosenDataset.title}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"{\n return chosenDataset.description == \"\" ? md`### Description` : md`### ${chosenDataset.description}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"myCanvas = DOM.canvas(canvasWidth,canvasHeight)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1024,"value":"viewof displayFormat = radio({\n description: \"Choose display type\",\n options: [\n {value: \"Graph\", label: \"Varying height cylinders\"}, {value: \"Circle\", label: \"Varying radius discs\"}\n ],\n value: \"Graph\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"viewof chooseDataset = radio({\n description: 'Choose the data set',\n options: [{value: \"Covid2\", label: \"Covid REST API\"}, {value: \"Covid\", label: \"Covid File Attachment\"}, {value: \"Input\", label: \"Cut-n-paste Manual Input\"}],\n value: \"Covid2\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":989,"value":"md `### Manual Input of Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1006,"value":"md `Enter a title`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":988,"value":"viewof rawTitle = textarea({\n placeholder: \"Title\",\n width: \"100%\",\n rows: 1\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"md `Enter a description`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"viewof rawDescription = textarea({\n placeholder: \"Description\",\n width: \"100%\",\n rows: 1\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":997,"value":"md `Enter each datapoint on a new line`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":986,"value":"viewof rawInput = textarea({\n placeholder: \"label,latitude,longitude,value\",\n width: \"100%\",\n rows: 10\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1139,"value":"md`# Report`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1143,"value":"md `\n### Team Name: 3D Data Viewer\n### Team Members:
\n

Pia Nelson (Team Lead)
Carter Albrecht
Yang Chen
Allen Chion
Mark Fuller
Ryan Shavell

\n### Project Goals:\n

Build an interactive 3D Data viewer that displays location-based data points on a rotatable globe.
Show data points as discs with varying radius or cylinders with varying heights.
Provide support for arbitrary data
Show data values with mouse hovering
Deliver demo, code, and report using an Observable notebook.

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1197,"value":"FileAttachment(\"clipspace.jpg\").image();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"md `\n

Use ray tracing for mouse coordinates (X,Y) to sphere intersection points (X,Y,Z) (Pia, Mark)
Convert intersection points (X,Y,Z) back to lattitude and longitude (Mark, Pia)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1207,"value":"FileAttachment(\"sphere-intersect.jpg\").image();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1210,"value":"md `\n

Determine closest data point in data set to mouse hover point (Carter)
Change color of closest data point to red (Carter)
Create hover message showing data point values in red color (Mark, Carter)
Add capabilites for data source file uploads (Pia)
Convert REST API data to file attachment with failure if REST API returns nothing
Add capabilites for data source to be manually inputed (Pia)
Identify and obtain sample data set for manual input (Allen, Ryan)
Provide option to render as cylinders of varying height in addition to discs (Allen, Yang)

[Dr. Sumantra Pattanaik - Functions array2Darry(), reglScExtent(), getScDimensions() ](https://observablehq.com/@spattana/general-obj2sc#sphere)
[Fetch API examples](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
[Latitude and Longitude Math](http://www.movable-type.co.uk/scripts/latlong.html)
[Ray Tracing Examples](https://www.scratchapixel.com/lessons/3d-basic-rendering/ray-tracing-overview)
[THREE.js Documentation](https://threejs.org/docs/#api/en/geometries/CylinderBufferGeometry)

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1038,"value":"md `# Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md `### ===Canvas definition===`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"gl = {\n const gl = createRegl({canvas:myCanvas});\n gl.clear({color: [0.5, 0.5, 0.6, 1]});\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"canvasWidth = 960","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"canvasHeight = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"camera = createCamera(gl, {\n center: sphereDimensions.center,\n distance: sphereDimensions.radius * 3, // (* distance) // from widget\n noScroll: true,\n renderOnDirty: true\n // near: 0.001*sphereDimensions.radius, // Defaults to .01\n // far: 10*sphereDimensions.radius, // Defaults to 1000\n // fovy : toRadian(fov),\n });\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`### ===Models===`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"md `#### 1) Sphere for earth`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"// Credit to Dr. Pattanaik https://observablehq.com/@spattana/general-obj2sc#sphere\nsphere = {\n const sphereGeometry = new THREE.SphereBufferGeometry( 1, 32, 32 );\n \n //return sphereGeometry\n return {\n positions : array2Darray(sphereGeometry.attributes.position.array,3),\n normals : array2Darray(sphereGeometry.attributes.normal.array,3),\n uvs : array2Darray(sphereGeometry.attributes.uv.array,2),\n cells : array2Darray(sphereGeometry.index.array,3)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"sphereDimensions = getScDimensions(sphere)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"// Texture Credit: https://www.artstation.com/marketplace/p/Pvor/free-earth-planet-3d-model-all-format\ntexture_image = FileAttachment(\"8k_earth_daymap.jpg\").image();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"// https://www.artstation.com/marketplace/p/Pvor/free-earth-planet-3d-model-all-format\nsphere_texture = gl.texture({\n data: texture_image, \n flipY: true, \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"// Reserved for future use\nmodelMatrix = glMatrix.mat4.create()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"md `#### 2) Small Circles for Data Points`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"smallCircle = (rad) =>{\n // First arg is radius\n const disc = new THREE.CircleBufferGeometry(rad,16);\n return {\n positions : array2Darray(disc.attributes.position.array,3),\n normals : array2Darray(disc.attributes.normal.array,3),\n uvs : array2Darray(disc.attributes.uv.array,2),\n cells : array2Darray(disc.index.array,3)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1015,"value":"md `#### 3) Cylinders for Data Points`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"getCylinder = (percent) => {\n const cylinderGeometry = new THREE.CylinderBufferGeometry(0.005, 0.005, percent, 4);\n return {\n positions : array2Darray(cylinderGeometry.attributes.position.array,3),\n normals : array2Darray(cylinderGeometry.attributes.normal.array,3),\n uvs : array2Darray(cylinderGeometry.attributes.uv.array,2),\n cells : array2Darray(cylinderGeometry.index.array,3)\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":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"md`### ===Data Sources===`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"md`#### 1) Data from REST API call`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1055,"value":"// This sometimes fails to render points on page load due to Fetch API promises are always async. Reloading page usually fixes this \n// rawCovidData2 = (await fetch (\"https://corona.lmao.ninja/v2/jhucsse\")).json()\nrawCovidData2 = fetch('https://corona.lmao.ninja/v2/jhucsse', {\n method: 'GET'\n})\n.then(response => response.json())\n.then(result => {\n return result;\n})\n.catch(error => {\n return \"APIERROR\";\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1097,"value":"processedCovidData2 = {\n function makeDataObj(covidData)\n {\n var obj = {\n locationName: covidData.country + (covidData.province != null ? ' ' + covidData.province : ''),\n coordinates: covidData.coordinates,\n value: covidData.stats.deaths,\n }\n \n return obj;\n }\n \n function makeDataArray(rawCovidData2)\n {\n const dataArray = [];\n for (let i = 0; i < rawCovidData2.length; i++)\n {\n dataArray.push(makeDataObj(rawCovidData2[i]));\n }\n \n return dataArray;\n }\n \n if (rawCovidData2 == \"APIERROR\")\n return \"APIERROR\";\n else \n {\n var processedData = {\n title: \"Coronavirus Data\",\n description: \"Coronavirus Deaths\",\n data: makeDataArray(rawCovidData2)\n }\n return processedData;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1060,"value":"md`#### 2) Data from file attachment`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"rawCovidData = FileAttachment(\"covid19Data.txt\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1070,"value":"processedCovidData = {\n function makeDataObj(covidData)\n {\n var obj = {\n locationName: covidData.country + (covidData.province != null ? ' ' + covidData.province : ''),\n coordinates: covidData.coordinates,\n value: covidData.stats.deaths,\n }\n \n return obj;\n }\n \n function makeDataArray(rawCovidData)\n {\n const dataArray = [];\n for (let i = 0; i < rawCovidData.length; i++)\n {\n dataArray.push(makeDataObj(rawCovidData[i]));\n }\n \n return dataArray;\n }\n \n var processedData = {\n title: \"Coronavirus Data\",\n description: \"Coronavirus Deaths\",\n data: makeDataArray(rawCovidData)\n }\n \n return processedData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1082,"value":"Example_File_Format1 = \n{\n var data = {\n \"title\":\"Death Count\",\n \"description\":\"Total Coronavirus Deaths Since Yesterday\",\n \"data\":[\n {\n \"locationName\":\"Orlando\",\n \"coordinates\":{\n \"latitude\":28.6,\n \"longitude\":-81.229\n },\n \"value\":73\n },\n {\n \"locationName\":\"New York City\",\n \"coordinates\":{\n \"latitude\":40.7,\n \"longitude\":-73.9\n },\n \"value\":300\n }\n ]\n }\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1086,"value":"Example_File_Format2 = \n{\n var data = {\n \"title\":\"Smartphones Sold\",\n \"description\":\"Total Smartphones Sold To Date\",\n \"data\":[\n {\n \"locationName\":\"Tokyo\",\n \"coordinates\":{\n \"latitude\":35.65,\n \"longitude\":139.84\n },\n \"value\":100000000\n },\n {\n \"locationName\":\"London\",\n \"coordinates\":{\n \"latitude\":51.5,\n \"longitude\":-0.11\n },\n \"value\":28000000\n },\n {\n \"locationName\":\"Delhi\",\n \"coordinates\":{\n \"latitude\":28.6,\n \"longitude\":77.2\n },\n \"value\":50000000\n },\n ]\n }\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"md `#### 3) Data from manual user input`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"inputDataSet = {\n \n const parseData = value => {\n let lines = value.split(\"\\n\");\n const separator = count(lines[0], \"\\t\") > count(lines[0], \",\") ? \"\\t\" : \",\";\n lines = lines.map(line => line.split(separator)).filter(f => f.length > 1);\n const data = lines.map(line => {\n return {\n locationName: line[0],\n coordinates: {\n latitude: line[1],\n longitude: line[2]\n },\n value: parseFloat(line[3])\n };\n });\n return data;\n };\n \n var dataSet = {\n title: rawTitle,\n description: rawDescription,\n data: parseData(rawInput)\n }\n \n return dataSet;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"md `#### Dataset to be rendered`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"chosenDataset = {\n camera.dirty = true;\n switch (chooseDataset)\n {\n case \"Covid2\":\n return (rawCovidData2 == \"APIERROR\") ? processedCovidData : processedCovidData2;\n case \"Covid\":\n return processedCovidData;\n case \"Input\":\n return inputDataSet;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"md `#### Making renderables for data in generic form`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"dataRenderables = makeRenderablesForData(chosenDataset);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"md `### ===Obtaining Mouse Postion===`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1118,"value":"md `#### Current Camera Adjustments`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"mutable view = null; ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"mutable proj = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1121,"value":"md `#### Mouse Position Relative to Canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"mutable mousePos = ({x: canvasWidth / 2, y: canvasHeight / 2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"{\n// myCanvas.onmousedown =\n myCanvas.onmousemove = (e) => {\n //mutable mousePos = {x: e.offsetX, y: e.offsetY};\n mutable mousePos = {x: e.offsetX / canvasWidth * 2 - 1, y: e.offsetY / canvasHeight * (-2) + 1};\n // mutable cameraEye = {x: camera.eye[0], y: e.offsetY, z: e.offsetY};\n }\n \n return md `Register Mouse Listener (Expand Cell for Details)`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1113,"value":"md `#### Ray-Sphere Intersection Calculations For Point (X,Y,Z) on Sphere`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"MouseXYZ = ((proj, view) => {\n var InverseCamera = glMatrix.mat4.invert([],glMatrix.mat4.multiply([],proj, view));\n var rayPoint1 = glMatrix.vec3.transformMat4([], [mousePos.x,mousePos.y, -1], InverseCamera);\n var rayPoint2 = glMatrix.vec3.transformMat4([], [mousePos.x,mousePos.y, 1], InverseCamera);\n var rayOrigin = rayPoint1;\n var rayDirection = glMatrix.vec3.normalize([],glMatrix.vec3.subtract([], rayPoint2, rayPoint1));\n var A = glMatrix.vec3.dot(rayDirection,rayDirection);\n var B = 2 * glMatrix.vec3.dot(rayOrigin,rayDirection);\n var C = glMatrix.vec3.dot(rayOrigin,rayOrigin) - 1;\n var Root1 = (-B + Math.sqrt( (B**2 - 4*A*C) )) / 2*A;\n var Root2 = (-B - Math.sqrt( (B**2 - 4*A*C) )) / 2*A;\n var t = Math.min(Root1,Root2);\n var pointOnSphere = glMatrix.vec3.add([],rayOrigin, glMatrix.vec3.scale([],rayDirection,t));\n return pointOnSphere;\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`### ===Utility Functions===`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"latlon2XYZ = (lat,lon) => {\n const lonCorrection = 0; // Will need to determine value if texture map is not centered on equator and meridian\n const latCorrection = 0; // Will need to determine value if texture map is not centered on equator and meridian\n const phi = (90-lat+latCorrection)*(Math.PI/180);\n const theta = (lon+180+lonCorrection)*(Math.PI/180);\n const x = -((sphereDimensions.radius) * Math.sin(phi) * Math.cos(theta));\n const y = ((sphereDimensions.radius) * Math.cos(phi));\n const z = ((sphereDimensions.radius) * Math.sin(phi) * Math.sin(theta));\n return glMatrix.vec3.fromValues(x,y,z);\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"//https://stackoverflow.com/questions/28525191/translate-from-x-y-z-to-latitude-and-longitude\nfunction XYZ2latlon(x, y, z) {\n var radius = sphereDimensions.radius;\n var latRads = Math.acos(y / radius);\n var lngRads = Math.atan2(z, x);\n var lat = (Math.PI / 2 - latRads) * (180 / Math.PI);\n var lng = (Math.PI - lngRads) * (180 / Math.PI);\n return [lat, lng - 180];\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"// Credit to Dr. Pattanaik https://observablehq.com/@spattana/general-obj2sc#sphere\narray2Darray = (A,n)=>Array.from(A).reduce((a, c, i,data) => {\n return i % n === 0 ? a.concat([data.slice(i, i + n)]) : a;\n }, []);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"// Credit to Dr. Pattanaik https://observablehq.com/@spattana/general-obj2sc#sphere\nreglScExtent = sc => {\n const getExtent = i =>sc.positions[0][i]?d3.extent(sc.positions.map(d=>d[i])):[0,0];\n return new Array(3).fill().map((d,i)=>getExtent(i))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":981,"value":"count = (str, substr) => (str.match(new RegExp(substr, \"g\")) || []).length;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"// Credit to Dr. Pattanaik https://observablehq.com/@spattana/obj-parser-obj2sc#getScDimensions\ngetScDimensions = scObject => {\n const extent = reglScExtent(scObject);\n const size = [\n (extent[0][1]-extent[0][0]),\n (extent[1][1]-extent[1][0]),\n (extent[2][1]-extent[2][0])\n ];\n return {\n box : size,\n center : [\n 0.5*(extent[0][1]+extent[0][0]),\n 0.5*(extent[1][1]+extent[1][0]),\n 0.5*(extent[2][1]+extent[2][0])\n ],\n extent: extent,\n radius : 0.5*Math.sqrt(size[0]*size[0]+size[1]*size[1]+size[2]*size[2])\n }; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"hex2rgb = hex => (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(l => parseInt(hex.length%2 ? l+l : l, 16)/255)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"function distance(lat1,lon1,lat2,lon2) {\n var R = 6371; // Radius of the earth in km\n var dLat = deg2rad(lat2-lat1); // deg2rad below\n var dLon = deg2rad(lon2-lon1); \n var a = \n Math.sin(dLat/2) * Math.sin(dLat/2) +\n Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * \n Math.sin(dLon/2) * Math.sin(dLon/2)\n ; \n var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); \n var d = R * c; // Distance in km\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"\nfunction deg2rad(deg) {\n return deg * (Math.PI/180)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"getRad = (min, max, value) => {\n // calculate the r = a*value + b\n // we need to find the a and b by input the max and min of data nad max and min of radius\n var a = (0.04 - 0.001)/(Math.sqrt(max)-Math.sqrt(min))\n var b = 0.001 - a * Math.sqrt(min)\n \n return a * Math.sqrt(value) + b\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`### ===JavaScript libraries and imports===`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"createRegl = require(\"regl\") // Use the latest Version","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"createCamera = require('https://bundle.run/regl-camera@2.1.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"glMatrix = require('https://bundle.run/gl-matrix@3.3.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"// Used to generate sphere object\nTHREE = require(\"three\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"// Used to generate sphere object\nd3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"import {fileInput} from \"@mbostock/file-input-with-initial-value\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"import {slider, radio, color, textarea} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"import {columns} from \"@bcardiff/observable-columns\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 44:"$43:body"