31:Td85,viewof mapBounds = { let container = html`

`; // Give the container dimensions. yield container; // Create the \`map\` object with the mapboxgl.Map constructor, referencing // the container div let map = new mapboxgl.Map({ container, center: [-22.1,63.9], zoom: 9, style: `mapbox://styles/mapbox/${mapType}`, scrollZoom: false }); // Create a default Marker and add it to the map. const marker1 = new mapboxgl.Marker({color: "red"}) .setLngLat([-22.436554096980853, 63.84382556722716]) .addTo(map); const marker3 = new mapboxgl.Marker({color: "yellow"}) .setLngLat([-22.43267699923121,63.87824143121298]) .addTo(map); const marker4 = new mapboxgl.Marker({color: "blue"}) .setLngLat([-22.373801353089178,63.89774739413845]) .addTo(map); const marker5 = new mapboxgl.Marker({color: "orange"}) .setLngLat([-22.37921938271511,63.984167503443935]) .addTo(map); const popup = new mapboxgl.Popup({ offset: [0, -7], closeButton: false, closeOnClick: false }); map.on("load", () => { map.addSource('geoQuakes', { 'type': 'geojson', 'data': geoQuakes }); map.addLayer({ id: 'earthquakes-layer', type: 'circle', source: 'geoQuakes', paint: { "circle-radius": { property: "magnitude", stops: [ [0, 5], [1, 10], [2, 15], [3, 20], ] }, "circle-color": { property: "depth", stops: [ [1, splitColors[0]], [3, splitColors[1]], [5, splitColors[2]], [7, splitColors[3]], [9, splitColors[4]], [12,splitColors[5]] ] }, "circle-stroke-width": 0.75, "circle-stroke-color": "black" } }); }); map.on("mousemove", "earthquakes-layer", (e) => { map.getCanvas().style.cursor = "pointer"; // Copy coordinates array. const coordinates = e.features[0].geometry.coordinates.slice(); const description = e.features[0].properties.magnitude; const depth = e.features[0].properties.depth; const date = e.features[0].properties.date; // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } // Populate the popup and set its coordinates // based on the feature found. popup .setLngLat(coordinates) .setHTML( `

Magnitude ${description}

Depth ${depth}km

Date ${date}

` ) .addTo(map); }); map.on("mouseleave", "earthquakes-layer", () => { map.getCanvas().style.cursor = ""; popup.remove(); }); container.value = map.getBounds(); map.on("zoom", (e) => { container.value = map.getBounds(); container.dispatchEvent(new CustomEvent("input")); }); map.on("drag", (e) => { container.value = map.getBounds(); container.dispatchEvent(new CustomEvent("input")); }); map.addControl(new mapboxgl.NavigationControl(), "top-right"); // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. invalidation.then(() => map.remove()); }32:T55b,earthQuake3Data = { return [ { key: "earthquakes", values: dataExtracted.slice(fromToPoint[0],fromToPoint[1]) .filter( (d) => { if( d.latitude >= mapBounds._sw.lat && d.latitude <= mapBounds._ne.lat && d.longitude >= mapBounds._sw.lng && d.longitude <= mapBounds._ne.lng ) return true; return false } ) .map((d,i) => { return { key: "point"+i, value: d.magnitude, x: d.latitude, y: d.longitude, z: d.depth } } ) }, { key: "Grindavik", values: [ { key: "Grindavik", value: 0, x: 63.84382556722716, y: -22.436554096980853, z: 0 } ] }, { key: "Svartsengi", values: [ { key: "Svartsengi", value: 0, x: 63.87824143121298, y: -22.43267699923121, z: 0 }, ] }, { key: "Stora Skogfell", values: [ { key: "Stora Skogfell", value: 0, x: 63.89788149415097, y: -22.37261764135373, z: 0 }, ] }, { key: "SVogar", values: [ { key: "Vogar", value: 0, x: 63.984167503443935, y: -22.37921938271511, z: 0 }, ] }, ]; }33:[{"id":"942466a45b488ccdec1d763726de22cea620123571c1f349875cb1b58a8e06070f5eba1c8f20eb780458c3aa5b5b44cd75eaf806f0a88fd2662a272fe1df583e","href":"https://static.observableusercontent.com/files/942466a45b488ccdec1d763726de22cea620123571c1f349875cb1b58a8e06070f5eba1c8f20eb780458c3aa5b5b44cd75eaf806f0a88fd2662a272fe1df583e","name":"Reykjanes peninsula - earthquakes during the last 48 hours (Preliminary results) _ Reykjanes peninsula _ Icelandic Meteorological office@11.html","type":"text/html","lastModified":1717010435653.319,"size":157718},{"id":"cebcb7f5dc69edf7e293b2e1a632471ac68d8fb0618916f292fe4ac3e8fa5cde08bfd6486b2a43704c9eaa5a8668ea7217ee8b504a5a499baa220b8748949bc6","href":"https://static.observableusercontent.com/files/cebcb7f5dc69edf7e293b2e1a632471ac68d8fb0618916f292fe4ac3e8fa5cde08bfd6486b2a43704c9eaa5a8668ea7217ee8b504a5a499baa220b8748949bc6","name":"Reykjanes peninsula - earthquakes during the last 48 hours (Preliminary results) _ Reykjanes peninsula _ Icelandic Meteorological office@12.html","type":"text/html","lastModified":1724392693281.454,"size":200227},{"id":"9e85730c54e2796d6872b661e35f33bfddcbd933ab1a95f69d361d2a98a46e5fae2dcff907834acfd538665ab9f6acbf30b3ab41335ec52a06601cd814e91e98","href":"https://static.observableusercontent.com/files/9e85730c54e2796d6872b661e35f33bfddcbd933ab1a95f69d361d2a98a46e5fae2dcff907834acfd538665ab9f6acbf30b3ab41335ec52a06601cd814e91e98","name":"Reykjanes peninsula - earthquakes during the last 48 hours (Preliminary results) _ Reykjanes peninsula _ Icelandic Meteorological office@13.html","type":"text/html","lastModified":1724423491786.607,"size":201788},{"id":"623bec7986b2ae6f93b239997b55790338e99b54ae93d52d70855b9b118c8536e8233da945b5eec1d2e7a522070237767b608b41304e639d6dfededca3966603","href":"https://static.observableusercontent.com/files/623bec7986b2ae6f93b239997b55790338e99b54ae93d52d70855b9b118c8536e8233da945b5eec1d2e7a522070237767b608b41304e639d6dfededca3966603","name":"Reykjanes peninsula - earthquakes during the last 48 hours (Preliminary results) _ Reykjanes peninsula _ Icelandic Meteorological office@14.html","type":"text/html","lastModified":1732287131430.773,"size":54974},{"id":"73822a8edf78c3ebc167d2a0e7e14a6e51840628ca4f5e809a875f2f38ef78bdee21592462c87bab438469c6455d15ea2c33894dd47d6afa1e00eefa195d34bd","href":"https://static.observableusercontent.com/files/73822a8edf78c3ebc167d2a0e7e14a6e51840628ca4f5e809a875f2f38ef78bdee21592462c87bab438469c6455d15ea2c33894dd47d6afa1e00eefa195d34bd","name":"Reykjanes peninsula - earthquakes during the last 48 hours (Preliminary results) _ Reykjanes peninsula _ Icelandic Meteorological office@15.html","type":"text/html","lastModified":1732287918338.687,"size":56655},{"id":"73822a8edf78c3ebc167d2a0e7e14a6e51840628ca4f5e809a875f2f38ef78bdee21592462c87bab438469c6455d15ea2c33894dd47d6afa1e00eefa195d34bd","href":"https://static.observableusercontent.com/files/73822a8edf78c3ebc167d2a0e7e14a6e51840628ca4f5e809a875f2f38ef78bdee21592462c87bab438469c6455d15ea2c33894dd47d6afa1e00eefa195d34bd","name":"Reykjanes peninsula - earthquakes during the last 48 hours (Preliminary results) _ Reykjanes peninsula _ Icelandic Meteorological office@16.html","type":"text/html","lastModified":1732287997234.543,"size":56655},{"id":"53c60ea3741ec58c4a2246119661caf9e8a7cfa12d80135217406580023203a524fb84bc125e7c7358a5eb531bb0d101f4c621bf8a96104a813127e45c15af9a","href":"https://static.observableusercontent.com/files/53c60ea3741ec58c4a2246119661caf9e8a7cfa12d80135217406580023203a524fb84bc125e7c7358a5eb531bb0d101f4c621bf8a96104a813127e45c15af9a","name":"Reykjanes peninsula - earthquakes during the last 48 hours (Preliminary results) _ Reykjanes peninsula _ Icelandic Meteorological office@18.html","type":"text/html","lastModified":1743746626127.121,"size":826014},{"id":"c931b4950ac693f69ca9136d618c2e150f8df9f9525a65755536560135b6335ac75e8569c97d7d8104626d937bfd0d72979d7aaa17af378d9b89cbb21779b66e","href":"https://static.observableusercontent.com/files/c931b4950ac693f69ca9136d618c2e150f8df9f9525a65755536560135b6335ac75e8569c97d7d8104626d937bfd0d72979d7aaa17af378d9b89cbb21779b66e","name":"Reykjanes peninsula - earthquakes during the last 48 hours (Preliminary results) _ Reykjanes peninsula _ Icelandic Meteorological office@19.html","type":"text/html","lastModified":1752686704069.702,"size":159269},{"id":"f6b1bce0699fdd2ab15682c4a7fc376387e3ef41f0b951a080449c9fdf407d2bc707dc479a06e37eaf9cdbf52a902eeda1db0c1f8888257c371994d270443430","href":"https://static.observableusercontent.com/files/f6b1bce0699fdd2ab15682c4a7fc376387e3ef41f0b951a080449c9fdf407d2bc707dc479a06e37eaf9cdbf52a902eeda1db0c1f8888257c371994d270443430","name":"Reykjanes peninsula - earthquakes during the last 48 hours (Preliminary results) _ Reykjanes peninsula _ Icelandic Meteorological office@10.html","type":"text/html","lastModified":1707421110867.887,"size":147479},{"id":"09040b412868b4d6976beb6ec6477b437d585eaa6abf1202e6f4da507f8e08c2b936638cf930e30319a06ab301d6250835f484b6bd6f718aa965c83e23352f47","href":"https://static.observableusercontent.com/files/09040b412868b4d6976beb6ec6477b437d585eaa6abf1202e6f4da507f8e08c2b936638cf930e30319a06ab301d6250835f484b6bd6f718aa965c83e23352f47","name":"image.png","type":"image/png","lastModified":1707342010150.559,"size":50501},{"id":"166c58cf8c72af9daaee6461605df0815603246fbc916d99cc2a1014dead5eb13586a7ae9f9e02a5f692190b0ba05c2ace494224987b7dd37966acb844453e2a","href":"https://static.observableusercontent.com/files/166c58cf8c72af9daaee6461605df0815603246fbc916d99cc2a1014dead5eb13586a7ae9f9e02a5f692190b0ba05c2ace494224987b7dd37966acb844453e2a","name":"Reykjanes peninsula - earthquakes during the last 48 hours (Preliminary results) Reykjanes peninsula Icelandic Meteorological office.html","type":"text/html","lastModified":1707419064910.185,"size":84388}] 2f:{"title":"Map earthquakes during the last 48 hours of Reykjanes peninsula in Iceland","cells":[{"id":0,"value":"# Map earthquakes during the last 48 hours of Reykjanes peninsula in Iceland \n\nData from: https://en.vedur.is/earthquakes-and-volcanism/earthquakes/reykjanespeninsula/#view=table\n\n![image.png](${await FileAttachment(\"image.png\").url()})\n\n---\n\nTo update data (current ones are from ${dataExtracted[fromToPoint[0]-1].date.toISOString()} to ${dataExtracted[fromToPoint[1]-1].date.toISOString()}), use your browser's save as file function of the above cited web page and use below *Choose File* to load the HTML file containing new data","pinned":false,"hidden":false,"mode":"md"},{"id":493,"value":"viewof file = fileInput({\n initialValue: FileAttachment(\"Reykjanes peninsula - earthquakes during the last 48 hours (Preliminary results) _ Reykjanes peninsula _ Icelandic Meteorological office@19.html\").blob(),\n accept: \".html\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":824,"value":"viewof search = Inputs.search(dataExtracted)","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"Inputs.table(dataExtracted, {\n filter: search\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"Depth with colored magnitude in time","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"Plot.plot({\n color: {legend: true},\n marks: [\n Plot.dot(dataExtracted, {x: \"date\", y: \"depth\", stroke: \"magnitude\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"Magnitude with colored depth in time","pinned":false,"hidden":false,"mode":"md"},{"id":164,"value":"Plot.plot({\n color: {legend: true},\n marks: [\n Plot.dot(dataExtracted, {x: \"date\", y: \"magnitude\", stroke: \"depth\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"Magnitude/Depth correlation","pinned":false,"hidden":false,"mode":"md"},{"id":286,"value":"Plot.plot({\n marks: [\n Plot.dot(dataExtracted, {x: \"depth\", y: \"magnitude\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"---\n\n- Red marker is Grindavik, yellow is Svartsengi, blue is Stora Skogfell and orange is Vogar.\n- Circle size corresponds to magnitude (four sizes <1, 1-2, 2-3 and >=3) ","pinned":false,"hidden":false,"mode":"md"},{"id":250,"value":"magLeg = Legend(d3.scaleOrdinal([\"<1km\", \"1-3km\", \"3-5km\",\"5-7km\", \"7-9km\", \"≥12km\"], splitColors), {\n title: \"Depth\",\n tickSize: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"viewof mapType = Inputs.select([null].concat(\n [\n \"light-v10\",\n \"streets-v11\",\n \"outdoors-v11\",\n \"satellite-v9\",\n \"satellite-streets-v11\"\n ]\n), {label: \"Map type\", value: \"satellite-streets-v11\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"html`From: ${dataExtracted[fromToPoint[0]-1].date.toISOString()} to ${dataExtracted[fromToPoint[1]-1].date.toISOString()} ${viewof fromToPoint}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"Shift key + mouse left click to select a zone to zoom in","pinned":false,"hidden":false,"mode":"md"},{"id":176,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"3D plot of lon/lat/depth, circle size corresponds to magnitude (with same color markers)","pinned":false,"hidden":false,"mode":"md"},{"id":443,"value":"chart3D = {\n let chartHolder = d3.select(document.createElement(\"div\"));\n chartHolder.attr(\"style\", \"height: 400px\");\n let myChart = d3X3d.chart.bubbleChart();\n chartHolder.datum(earthQuake3Data).call(myChart);\n return chartHolder.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"---\n\nLibs and data","pinned":false,"hidden":false,"mode":"md"},{"id":497,"value":"htmlSource = {\n const text = await Files.text(file);\n const domparser = new DOMParser();\n return domparser.parseFromString(text, \"text/html\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"dataExtracted = {\n const tablesData = []; \n for (let tr of htmlSource.querySelectorAll('tr')) {\n const tdList = tr.querySelectorAll('td'); \n if(tdList && tdList.length == 8) {\n const d1 = tdList[0].innerHTML.split('
')[1].split('.');\n const d2 = tdList[1].innerHTML.split(':');\n const date = new Date(Date.UTC(d1[2], d1[1]-1, d1[0], d2[0], d2[1], d2[2]));\n const magnitude = Number(tdList[5].innerHTML.replace('','').replace('',''));\n tablesData.push({\n date : date,\n latitude: Number(tdList[2].innerHTML),\n longitude: Number(tdList[3].innerHTML),\n depth: Math.abs(Number(tdList[4].innerHTML.split(' ')[0])),\n magnitude: magnitude,\n quality: Number(tdList[6].innerHTML),\n location: tdList[7].innerHTML\n }\n );\n }\n } \n return tablesData.sort((a,b) => a - b).reverse();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"geo = require(\"geotoolbox@1.7.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"geoQuakes = geo.coords2geo(\n dataExtracted.slice(fromToPoint[0],fromToPoint[1]), \n { lat: \"latitude\", lon: \"longitude\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"viewof fromToPoint = interval([1, dataExtracted.length], {\n step: 1,\n value: [0, dataExtracted.length],\n// label: 'From/To point',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"import {Legend, Swatches} from \"@d3/color-legend\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"splitColors = [\"#eff3ff\",\"#c6dbef\",\"#9ecae1\",\"#6baed6\",\"#3182bd\",\"#08519c\"].reverse()// https://observablehq.com/@d3/color-schemes","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@0.49\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoiZHBmb3NlciIsImEiOiJjazlxaHRvbmMwazR2M2Vwbmpha3I5c28yIn0.nklv92j_cl0t2HsHD579AQ\";\n const href = await require.resolve(\"mapbox-gl@0.49/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"reloader = { \n x3dom.reload();\n return chart3D;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"d3X3d = require(\"d3-x3d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"x3dom = require('https://x3dom.org/release/x3dom.js').catch(() => window.x3dom)","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"function fileInput({initialValue, accept = \"\"} = {}) {\n const form = html`