31:Tb8c,viewof map = { const container = html`

`; yield container; // Give the container dimensions. const map = (container.value = new mapboxgl.Map({ container, center: [-18.19826, 64.96292], zoom: 5.5, minZoom: 4.5, style: "mapbox://styles/mapbox/light-v10", preserveDrawingBuffer: true })); invalidation.then(() => map.remove()); const popup = new mapboxgl.Popup({ offset: [0, -7], closeButton: false, closeOnClick: false }); map.on("load", () => { map.addSource("earthquakes", { type: "geojson", data: notebookData }); map.addLayer({ id: "earthquakes-layer", type: "circle", source: "earthquakes", paint: { "circle-radius": { property: "s", stops: [ [0, 0.5], [3, 10] ] }, "circle-color": { property: "s", stops: [ [2.99, magBelow3], [3, magAbove3] ] }, "circle-stroke-width": 0.75, "circle-stroke-color": "white" } }); map.addSource("plates", { type: "geojson", // Use a URL for the value for the `data` property. data: plates }); map.addLayer({ id: "plates-layer", type: "line", source: "plates", paint: { "line-color": "darkred", "line-width": 1 } }); 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.s; 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}

Date ${new Date( date ).toLocaleDateString("ES-es", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false // Para usar el formato de 24 horas })}

` ) .addTo(map); }); map.on("mouseleave", "earthquakes-layer", () => { map.getCanvas().style.cursor = ""; popup.remove(); }); if (showLabels === false) { map.style.stylesheet.layers.forEach(function (layer) { if (layer.type === "symbol") { map.removeLayer(layer.id); } }); } }); }32:T422,Plot.plot({ title: `Plotting by date and deep`, subtitle: `${ sourceData === "Vedur" ? `('deep' not available for ${sourceData} source)` : "" }`, y: { grid: true, label: "Deep" }, x: { grid: true }, marks: [ Plot.ruleY([0]), Plot.dot( notebookData.features.map((feature) => feature.properties), { x: "date", fillOpacity: 0.7, r: 2, y: (d) => -parseFloat(d.dep), channels: { Deep: (d) => `${d.s} km.`, date: { label: "Fecha", value: (d) => d.date.toLocaleTimeString("es-ES", { hour: "2-digit", minute: "2-digit", weekday: "short", year: "numeric", month: "short", day: "numeric" }) } }, tip: { format: { date: true, fill: false } }, fill: (d) => (d.s > 3 ? magAbove3 : magBelow3) } ) ] })33:Ta6d,iceland = { const svg = d3 .select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") .style("overflow", "visible") .style("font-family", "MarcinAntB,sans-serif"); var path = d3.geoPath(projection); const g = svg.append("g").attr("class", "land"); const circles = svg.append("g").attr("class", "earthquakes"); const labelsGroup = svg.append("g").attr("class", "labels"); /* Create Map */ g.selectAll(".land") .data(icelandGeo.features) .enter() .append("path") .attr("fill", "#e5e5e5") .attr("stroke", "#3182bd") .attr("stroke-width", ".5") .attr("d", path); /* Add plates */ g.selectAll(".plates") .datum(plates.features) .enter() .append("path") .attr("stroke", "darkred") .attr("stroke-width", ".5") .attr("d", path); /* Add earthquakes */ circles .selectAll(".earthquake") .data(notebookData.features) .enter() .append("circle") .attr("cx", function (d) { return projection(d.geometry.coordinates)[0]; }) .attr("cy", function (d) { return projection(d.geometry.coordinates)[1]; }) .attr("r", (d) => scaleRadius(d.properties.s)) .attr("fill", (d) => (d.properties.s >= 3 ? magAbove3 : magBelow3)) .attr("stroke", "white") .append("title") .html( (d) => ` Magnitude: ${d.properties.s} Date: ${new Date(d.properties.date).toLocaleDateString("ES-es", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false // Para usar el formato de 24 horas })} ` ); labelsGroup .selectAll("text") .data(labels) .enter() .append("text") .attr("x", function (d) { return projection(d.coordinates)[0]; }) .attr("y", function (d) { return projection(d.coordinates)[1]; }) .attr("fill", "black") .attr("text-anchor", "start") .attr("dx", 4) .attr("dy", -6) .style("visibility", showLabels === true ? "visible" : "hidden") .style( "text-shadow", "0px 0px 1px #fff, 0px 0px 2px #fff, 0px 0px 3px #fff, 0px 0px 4px #fff" ) .html((d) => d.label); labelsGroup .selectAll(".city-dot") .data(labels) .enter() .append("circle") .attr("cx", function (d) { return projection(d.coordinates)[0]; }) .attr("cy", function (d) { return projection(d.coordinates)[1]; }) .attr("fill", "black") .style("visibility", showLabels === true ? "visible" : "hidden") .attr("r", 3); return svg.node(); }34:[{"id":"d6265bf4926aabef60e0386c26a4ca041488ef9966d07650c63e82b500219e4e96049c4799daca233aa6f5a9958e6a141d0d63c155ffca92f8d2c40a5a01d658","href":"https://static.observableusercontent.com/files/d6265bf4926aabef60e0386c26a4ca041488ef9966d07650c63e82b500219e4e96049c4799daca233aa6f5a9958e6a141d0d63c155ffca92f8d2c40a5a01d658","name":"PB2002_plates.json","type":"application/json","lastModified":1700732791780.991,"size":327718}] 2f:{"title":"Iceland Earthquakes","cells":[{"id":0,"value":"# Iceland Earthquakes\nData from [IMO](https://en.vedur.is/earthquakes-and-volcanism/earthquakes#view=table), [Vafri](https://vafri.is/quake/) and [Veðurstofa Islands](https://skjalftalisa.vedur.is/#/page/table_quakes).","pinned":false,"hidden":false,"mode":"md"},{"id":270,"value":"viewof showLabels = Inputs.toggle({ label: \"Show labels\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"viewof sourceData = Inputs.radio(dataSources, {\n label: \"Source data\",\n value: \"Vedur\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"viewof since = Inputs.date({\n label: \"Since\",\n value: new Date(Date.now() - 12096e5)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"Swatches(\n d3.scaleOrdinal([\"Magnitude >3\", \"Magnitude <3\"], [magAbove3, magBelow3])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"downloadButton(notebookData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"Plot.plot({\n title: \"Plotting by date and magnitude\",\n y: {\n grid: true,\n label: \"Magnitude\"\n },\n x: {\n grid: true\n },\n marks: [\n Plot.ruleY([0]),\n Plot.dot(\n notebookData.features.map((feature) => feature.properties),\n {\n x: \"date\",\n fillOpacity: 0.7,\n r: 2,\n y: \"s\",\n channels: {\n Magnitude: \"s\",\n date: {\n label: \"Fecha\",\n value: (d) =>\n d.date.toLocaleTimeString(\"es-ES\", {\n hour: \"2-digit\",\n minute: \"2-digit\",\n weekday: \"short\",\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\"\n })\n }\n },\n tip: {\n format: {\n date: true,\n fill: false\n }\n },\n\n fill: (d) => (d.s > 3 ? magAbove3 : magBelow3),\n sort: { channel: \"s\" }\n }\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":671,"value":"Plot.plot({\n title: \"Number of eartquakes per day\",\n y: {\n grid: true\n },\n color: {\n legend: true\n },\n marks: [\n Plot.rectY(\n notebookData.features.map((d) => ({\n date: d3.timeDay(d.properties.date)\n })),\n Plot.binX(\n { y: \"count\" },\n { x: \"date\", thresholds: d3.timeDay, fill: magBelow3 }\n )\n ),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"Plot.plot({\n title: \"Cumulative number of earthquakes\",\n y: {\n grid: true\n },\n color: {\n legend: true\n },\n marks: [\n Plot.line(cumulativeData, {\n x: \"date\",\n y: \"cumulative\",\n stroke: magBelow3\n }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"viewof magAbove3 = Inputs.color({\n label: \"Magnitude above 3\",\n value: \"#ffd700\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"viewof magBelow3 = Inputs.color({\n label: \"Magnitude below 3\",\n value: \"#4682b4\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"#### _Vector map for easy downloading and use_","pinned":false,"hidden":false,"mode":"md"},{"id":281,"value":"viewof resolution = Inputs.radio([\"10\", \"50\", \"110\"], {\n label: \"Select one the resolution for Natural Earth\",\n value: \"10\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"html`\n

${DOM.download(\n () => serialize(iceland),\n `iceland_map_${Date.now()}`,\n \"Descarga como SVG\"\n )}

${DOM.download(\n () => rasterize(iceland),\n `iceland_map_${Date.now()}`,\n \"Descarga como PNG\"\n)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":502,"value":"viewof radios = Inputs.radio([\"geoMercator\", \"EPSG:3857\"], {\n label: \"Choose projection\",\n value: \"EPSG:3857\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"cumulativeData = {\n let index = 0;\n return notebookData.features\n .sort(function (b, a) {\n // Turn your strings into dates, and then subtract them\n // to get a value that is either negative, positive, or zero.\n return new Date(b.properties.date) - new Date(a.properties.date);\n })\n .map((d) => {\n //d.properties.date = d3.timeDay(d.properties.date);\n d.properties.cumulative = ++index;\n return d.properties;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"timeParse = d3.utcFormat(\"%B %d, %Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"projection = radios === \"geoMercator\"\n ? projection1\n : projection2.fitExtent(\n [\n [margin, margin],\n [width - margin, height - margin]\n ],\n icelandGeo\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"icelandGeo = topojson.feature(countries_data, {\n type: \"GeometryCollection\",\n geometries: countries_data.objects.countries.geometries.filter(function (d) {\n return d.id === \"352\"; // outlying areas\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"countries_data = d3.json(\n `https://cdn.jsdelivr.net/npm/world-atlas@2/countries-${String(\n parseInt(resolution)\n )}m.json`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"countries = topojson.feature(countries_data, countries_data.objects.countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"projection1 = d3\n .geoMercator()\n .center([-19, 65])\n .scale(2000 * 1.4)\n .translate([width / 2, height / 2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"projection2 = proj4d3(\n `+proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +wktext +no_defs`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"labels = [\n {\n label: \"Reikiavik\",\n coordinates: [-21.89541, 64.13548]\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"scaleRadius = d3\n .scalePow()\n .domain(d3.extent(notebookData.features, (d) => d.properties.s))\n .range([0.5, 10])","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"dataSources = [\"IMO\", \"Vafri\", \"Vedur\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"notebookData = {\n let data = [];\n if (sourceData === \"IMO\") {\n data = geoData;\n } else if (sourceData === \"Vafri\") {\n data = geoDataVafri;\n } else if (sourceData === \"Vedur\") {\n data = geoVedur;\n }\n return {\n type: \"FeatureCollection\",\n features: data.features.filter((d) => {\n console.log(d.properties.date, since);\n return d.properties.date > since;\n })\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"margin = 67","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":353,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"import { downloadButton } from \"@luissevillano/geoconfirmed-parser\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"plates = FileAttachment(\"PB2002_plates.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"// You’ll need to replace this with your own MapBox token.\n// See https://www.mapbox.com/help/how-access-tokens-work/\naccessToken = \"pk.eyJ1IjoibW9sbGllbWFyaWUiLCJhIjoiY2txNXF0Mmw5MTVvdDJ3b2N3bHhobXN6aCJ9.ztC4Av-WFMynvpwyFgUiGw\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1\");\n if (!gl.accessToken) {\n gl.accessToken = accessToken;\n const href = await require.resolve(\"mapbox-gl@1/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"import {\n data,\n geoData,\n geoDataVafri,\n vedurData,\n geoVedur\n} from \"@luissevillano/iceland-earthquakes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"usgs_data = d3.json(\n \"https://earthquake.usgs.gov/fdsnws/event/1/query.geojson?starttime=2023-11-09%2000:00:00&endtime=2023-11-14%2023:59:59&maxlatitude=68.399&minlatitude=60.544&maxlongitude=-6.108&minlongitude=-30.894&minmagnitude=1&maxmagnitude=10&orderby=time\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"import { rasterize } from \"@luissevillano/poisson-disc-generator\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"import { serialize } from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"import { proj4d3 } from \"@fil/proj4js-d3\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}