29:null 2a:["$","title",null,{"children":"Visualizing earthquakes with Three.js | Joe Davies | Observable"}] 2f:T5ad,{ renderer.setSize(width, height); renderer.setPixelRatio(devicePixelRatio); try { while (true) { renderer.render(scene, camera); if (rotate) { points.rotation.y += 0.001; borders.rotation.y += 0.001; plates.rotation.y += 0.001; } let html_render = html`

${renderer.domElement}

${tooltip_state.label}

Earthquakes >=4 magnitude, 2024

0 && coords[0] && coords[1]) { console.log("group.add"); group.add(createLineFromCoords(coords)); } } else if (feature.geometry.type == "MultiPolygon") { //multipolygons for (let s = 0; s < feature.geometry.coordinates[c].length; s++) { //each polygon in multipolygon: let coords = []; for (let m = 0; m < feature.geometry.coordinates[c][s].length; m++) { const x = feature.geometry.coordinates[c][s][m][0]; const y = feature.geometry.coordinates[c][s][m][1]; if (isNaN(x) || isNaN(y)) console.log("invalid coords"); coords.push({ x, y }); } } if (coords.length > 0) { group.add(createLineFromCoords(coords)); } } else if (feature.geometry.type == "LineString") { //linestrings const x = feature.geometry.coordinates[c][0]; const y = feature.geometry.coordinates[c][1]; if (isNaN(x) || isNaN(y)) console.log("invalid coords"); coords.push({ x, y }); if (coords.length > 0) { group.add(createLineFromCoords(coords)); } } else if (feature.geometry.type == "MultiLineString") { //multilinestrings feature.geometry.coordinates.forEach((line) => { //each line in multiline: let coords = []; line.forEach((coord) => { const x = coord[0]; const y = coord[1]; if (isNaN(x) || isNaN(y)) return; coords.push({ x, y }); }); if (coords.length > 0) { group.add(createLineFromCoords(coords)); } }); } } // for each feature.geometry.coordinates } // for each feature scene.add(group); }33:[] 2d:{"id":"fe74b7b2a89db3cb","slug":"visualizing-earthquakes-with-three-js","title":"Visualizing earthquakes with Three.js","thumbnail":"707ae087ba7c16be7eca418dd55139b9613226e7125f28aacc93aa61df6e1b55","access_level":"public","create_time":"$D2022-01-13T09:32:13.768Z","update_time":"$D2025-01-09T15:39:01.201Z","view_time":null,"first_public_time":"$D2022-03-07T14:15:55.400Z","has_unpublished_edits":null,"fork":false,"stars":37,"starred":false,"owner":{"type":"team","id":"25fee90bb47fd709","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":"starter_2024"},"version":1174,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc51b4f7240f0553","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":null}],"members":[{"type":"individual","id":"dc51b4f7240f0553","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"5dfbac052344601a","slug":"globes","title":"Globes","owner":{"id":"25fee90bb47fd709","login":"joewdavies","name":"Joe Davies"}},"type":"notebook","body":{"title":"Visualizing earthquakes with Three.js","cells":[{"id":0,"value":"# Visualizing earthquakes with Three.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":228,"value":"md`This visualization shows all earthquakes above 4 magnitude in 2024. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"md`\nEarthquake data: [USGS](https://earthquake.usgs.gov/earthquakes/search/) \nCountry boundaries: [GISCO](https://gisco-services.ec.europa.eu/distribution/v2/countries/countries-2020-files.html) `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"viewof rotate = Inputs.toggle({ label: \"Rotate\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"viewof showBorders = Inputs.toggle({ label: \"Borders\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"viewof showPlates = Inputs.toggle({ label: \"Tectonic Plates\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"viewof viewDepth = Inputs.range([1000, 12000], {\n label: \"Camera frustum far plane\",\n step: 100,\n value: height * 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"viewof maxSize = Inputs.range([4, 120], {\n label: \"Maximum circle size\",\n step: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"legend({\n color: colorScale,\n title: \"Magnitude\",\n width: width / 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1103,"value":"sizeLegend = {\n const container = d3.create(\"div\");\n container\n .attr(\"id\", \"legend-container\")\n .style(\"position\", \"absolute\")\n .style(\"z-index\", \"9999999\")\n .style(\"transform\", `translate(20px, ${-height}px`);\n\n const svg = d3.create(\"svg\");\n svg.append(\"text\").text(\"Magnitude\").attr(\"transform\", `translate(10, 17)`);\n svg.append(\"g\").attr(\"transform\", `translate(10, 25)`).call(sizelegend);\n\n container.node().appendChild(svg.node());\n\n //return container.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"We can change the camera's frustum far plane in order to hide elements that are far away, this can help reduce noise which might help make the data easier to interpret for the reader.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":665,"value":"md`\nTo-do list:\n - reduce flickering\n - Raycasting\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"viewof backgroundColor = Inputs.color({\n label: \"Background color\",\n value: \"#ffffff\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1002,"value":"viewof lineColor = Inputs.color({ label: \"Line color\", value: \"#BABABA\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"(scene.background = new THREE.Color(backgroundColor))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"height = window.screen.height / 1.7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"radius = height * 1.6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"updateCamera = {\n viewDepth;\n camera.far = viewDepth;\n camera.updateProjectionMatrix();\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1140,"value":"sizelegend = legendCircle()\n .tickValues([4, 4.5, 5, 6])\n .tickFormat((d, i, e) => {\n return `${d}`;\n })\n .scale(sizeScale)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"md`### Threejs building blocks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"renderer = new THREE.WebGLRenderer();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"scene = new THREE.Scene()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"borders = new THREE.Group()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":882,"value":"plates = new THREE.Group()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"points = new THREE.Points(pointsGeometry, pointsMaterial)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"lineMaterial = new THREE.LineBasicMaterial({\n linewidth: 0.1,\n color: lineColor\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"pointsMaterial = new THREE.ShaderMaterial({\n uniforms: {\n multiplier: {\n value: 1000 // size multiplier\n }\n },\n fragmentShader: pointFragmentShader,\n vertexShader: pointVertexShader,\n vertexColors: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"controls = new THREE.OrbitControls(camera, renderer.domElement)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"pointFragmentShader = `\n varying vec3 vColor;\n varying vec2 vUV; // texture coordinates\n\n void main() {\n float r = 0.0, delta = 0.0;\n\n //square\n //gl_FragColor = vec4( vColor.rgb, 1.0 );\n\n //circle\n //radius\n vec2 cxy = 2.0 * gl_PointCoord - 1.0;\n r = dot(cxy, cxy);\n\n // distance from texCoords to 0.5,0.5\n float d = distance(vUV, vec2(.5, .5));\n\n // outside radius\n if (d e.mag)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"depthDomain = d3.extent(earthquakes, (e) => e.depth)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"sizeRange = [4, maxSize]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"sizeScale = d3.scaleSequentialSqrt().domain(magDomain).range(sizeRange)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"md`### Set points and add geojson lines to scene`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"//add countries\n{\n if (showBorders) {\n addGeoJsonFeaturesToScene(countryBoundaries.features, borders);\n } else {\n emptyGroup(borders);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"{\n // add tectonic plates\n if (showPlates) {\n addGeoJsonFeaturesToScene(tectonicPlates.features, plates);\n } else {\n emptyGroup(plates)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"function emptyGroup(group) {\n while (group.children.length > 0) {\n group.remove(group.children[0]);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"function createLineFromCoords(coords) {\n let lineGeom = new THREE.BufferGeometry();\n let positions = [];\n for (var i = 0; i < coords.length; i++) {\n let lat = coords[i].y;\n let lon = coords[i].x;\n let latRad = lat * (Math.PI / 180);\n let lonRad = -lon * (Math.PI / 180);\n let x = Math.cos(latRad) * Math.cos(lonRad) * radius;\n let y = Math.sin(latRad) * radius;\n let z = Math.cos(latRad) * Math.sin(lonRad) * radius;\n if (isNaN(x) || isNaN(y) || isNaN(z)) {\n console.log(\"invalid coordinates\", coords);\n } else {\n positions.push(x, y, z);\n }\n\n //lineGeom.vertices.push(new THREE.Vector3(x, y, z));\n }\n console.log(\"positions added\");\n lineGeom.setAttribute(\n \"position\",\n new THREE.Float32BufferAttribute(positions, 3)\n );\n\n return new THREE.Line(lineGeom, lineMaterial);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"md`### Raycasting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"raycaster = new THREE.Raycaster()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"{\n // raycaster.params.Points.threshold = 0.01;\n // return raycaster;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"function onMouseMove(event) {\n // calculate mouse position in normalized device coordinates\n // (-1 to +1) for both components\n //let mousePosition = d3.pointer(event);\n pointer.x = (event.clientX / window.innerWidth) * 2 - 1;\n pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;\n\n // update the picking ray with the camera and pointer position\n raycaster.setFromCamera(pointer, camera);\n\n // calculate objects intersecting the picking ray\n const intersects = raycaster.intersectObjects(scene.children);\n\n for (let i = 0; i < intersects.length; i++) {\n intersects[i].object.material.color.set(0xff0000);\n }\n\n //let intersects = checkIntersects(mousePosition);\n if (intersects && intersects.length > 0) {\n console.log(intersects);\n let eq = earthquakes[intersects[0].index];\n highlightPoint(intersects[0]);\n showTooltip(event, eq);\n } else {\n hideTooltip();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"pointer = new THREE.Vector2()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"function checkIntersects(mousePosition) {\n let mouse_vector = mouseToThree(...mousePosition);\n raycaster.setFromCamera(mouse_vector, camera);\n\n let intersects = raycaster.intersectObject(points, false);\n\n if (intersects.length > 0) {\n let sorted_intersects = sortIntersectsByDistanceToRay(intersects);\n return sorted_intersects;\n } else {\n return false;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"function mouseToThree(mouseX, mouseY) {\n return new THREE.Vector2(\n (mouseX / width) * 2 - 1,\n -(mouseY / height) * 2 + 1\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"md`### Tooltip`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"function hideTooltip() {\n tooltip_state.display = \"none\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"function showTooltip(event, earthquake) {\n console.log(d3.pointer(event));\n let mouse = d3.pointer(event);\n let tooltip_width = 120;\n let x_offset = -tooltip_width / 2;\n let y_offset = 30;\n tooltip_state.display = \"block\";\n tooltip_state.left = mouse[0] + x_offset;\n tooltip_state.top = mouse[1] + y_offset;\n tooltip_state.label = earthquake.place;\n tooltip_state.color = colorScale(earthquake.mag);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"tooltip_state = {\n return { display: \"none\" };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"function highlightPoint(intersect) {\n let colors = intersect.object.geometry.attributes.color.array;\n let colourIndex = intersect.index * 3;\n let newColor = new THREE.Color(\"yellow\");\n colors[colourIndex] = newColor.r;\n colors[colourIndex + 1] = newColor.g;\n colors[colourIndex + 2] = newColor.b;\n\n intersect.object.geometry.attributes.color.needsUpdate = true;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"function sortIntersectsByDistanceToRay(intersects) {\n return _.sortBy(intersects, \"distanceToRay\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"mouse = new THREE.Vector2()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"init()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":818,"value":"year = 2024","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"earthquakes = {\n const earthquakesB = await d3.csv(\n `https://earthquake.usgs.gov/fdsnws/event/1/query?format=csv&starttime=${year}-06-01&endtime=${year}-12-31&minmagnitude=4&orderby=time`\n );\n const earthquakesA = await d3.csv(\n `https://earthquake.usgs.gov/fdsnws/event/1/query?format=csv&starttime=${year}-01-01&endtime=${year}-06-01&minmagnitude=4&orderby=time`\n );\n\n return earthquakesA.concat(earthquakesB);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"tectonicPlates = await d3.json(\n \"https://raw.githubusercontent.com/fraxen/tectonicplates/master/GeoJSON/PB2002_boundaries.json\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"countryBoundaries = {\n const geom = await d3.json(\n \"https://gisco-services.ec.europa.eu/distribution/v2/countries/geojson/CNTR_BN_20M_2020_4326.geojson\"\n );\n\n return geom;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1025,"value":"import { legendCircle } from \"@harrystevens/circle-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"THREE = {\n const THREE = (window.THREE = await require(\"three@0.132.0/build/three.min.js\"));\n await require(\"three@0.136.0/examples/js/controls/OrbitControls.js\").catch(\n () => {}\n );\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"_ = require(\"https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"