27:null 28:["$","title",null,{"children":"Shakealert map | Michele Vallisneri | Observable"}] 2d:T752,themap = { const svg = d3.select(DOM.svg(960, 500)) .attr('id', 'quakeplot') .style('border', 'solid 1px #999'); const g = svg.append('g'); const zoom = d3.zoom() .scaleExtent([1, 8]) .on("zoom", zoomed); const projection = d3.geoEquirectangular(); // 960 x 500 ? // const projection = d3geo.geoCylindricalStereographic(); const path = d3.geoPath().projection(projection); g.append("path") .datum(topojson.feature(world, world.objects.land)) .attr("class", "world land") .attr("d", path).style("stroke-width", 0.3); g.append("path") .datum(topojson.mesh(world, world.objects.countries, function(a,b) { return a !== b; })) .attr("class", "world mesh") .attr("d", path).style("stroke-width", 0.2); g.selectAll("circle.stationcircle") .data(Object.keys(stations)) .enter("circle.stationcircle").append("circle").attr('class', 'stationcircle').attr('id', d => d) .attr('cx', d => projection([stations[d].lon, stations[d].lat])[0]) .attr('cy', d => projection([stations[d].lon, stations[d].lat])[1]) .attr('r', 0.4) .attr('fill', '#00b').attr('opacity', 0.5); g.selectAll("circle.quakecircle") .data(allquakedata) .enter("circle.quakecircle").append("circle").attr('class', 'quakecircle').attr('id', d => d.id) .attr('cx', d => projection([d.lon, d.lat])[0]) .attr('cy', d => projection([d.lon, d.lat])[1]) .attr('r', d => 0.5 * d.mag) .attr('stroke', "#000") .attr('fill', '#fff') .on('click', (e,d) => { mutable quakeid = d.id; selectid(d.id); }); // svg.call(zoom); svg.call(zoom.transform, d3.zoomIdentity.scale(5).translate(-130,-100)); function zoomed(event) { const {transform} = event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } return svg.node(); } 2e:T68a,makerow = function(sta) { if(sta == 'wait') { return html`Waiting for data`; } let fd = fitdata[sta]; let qd = quakedata; let sd = stations[sta]; let dist = getDistanceFromLatLonInKm(sd.lat, sd.lon, qd.lat, qd.lon); return html` ${sta} ${d3.format('.0f')(dist)} ${simplefmt(fd.fit.e, fd.fit.de)} ${simplefmt(fd.fit.n, fd.fit.dn)} ${simplefmt(fd.fit.v, fd.fit.dv)} `; function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) { // http://stackoverflow.com/questions/27928/calculate-distance-between-two-latitude-longitude-points-haversine-formula var R = 6371; // Radius of the earth in km var dLat = deg2rad(lat2-lat1); // deg2rad below var dLon = deg2rad(lon2-lon1); var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * Math.sin(dLon/2) * Math.sin(dLon/2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); var d = R * c; // Distance in km return d; function deg2rad(deg) { return deg * (Math.PI/180) } } function simplefmt(obs, dobs) { let valcm = obs[2] * 100, errcm = dobs[2] * 100; let valstr = d3.format("+.2f")(valcm) + " ± " + d3.format(".2f")(errcm); return valstr; } }2f:[{"id":"7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","href":"https://static.observableusercontent.com/files/7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","name":"land-50m.json","type":"application/json","lastModified":1686854267643.426,"size":545534}] 2b:{"id":"89b7a28a7031a715","slug":null,"title":"Shakealert map","thumbnail":"78cffea695199657937a9c78e3afc5bbb3040c7340514f26b8ffe9b700171cb6","access_level":"public","create_time":"$D2023-06-15T18:37:47.643Z","update_time":"$D2023-07-28T00:20:46.508Z","view_time":null,"first_public_time":"$D2023-06-15T18:37:47.643Z","has_unpublished_edits":null,"fork":{"id":"19cbc978f7478a7b","slug":"plot-world-map","title":"Plot World Map","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c8b1da6cd6acdc9b","login":"vallis","name":"Michele Vallisneri","avatar_url":"https://avatars-next.observableusercontent.com/660211322212c19297c70227a29cf0c3a0e96996682719b1fc151fe33431ff5c","tier":"starter_2024"},"version":1010,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"12aa872846783c92","login":"vallis","name":"Michele Vallisneri","avatar_url":"https://avatars-next.observableusercontent.com/660211322212c19297c70227a29cf0c3a0e96996682719b1fc151fe33431ff5c","tier":null}],"members":[{"type":"individual","id":"12aa872846783c92","login":"vallis","name":"Michele Vallisneri","avatar_url":"https://avatars-next.observableusercontent.com/660211322212c19297c70227a29cf0c3a0e96996682719b1fc151fe33431ff5c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Shakealert map","cells":[{"id":0,"value":"# Shakealert map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":680,"value":"Get quake database from USGS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":397,"value":"quakes = d3.json('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"Let's see what's in here...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":409,"value":"quakes.features[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"quakes.features[0].properties","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"quakes.features[0].geometry","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"Get station data from shakealert","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":613,"value":"stations = {\n let stas = await d3.json('https://shakealert.gdgps.net:5050/stations');\n \n let ret = {};\n stas.forEach(function(s) {\n ret[s[0]] = ({lon: s[1][0], lat: s[1][1], place: s[2], org: s[3]});\n });\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"Make a list of simplified quake objects (with id, mag, lon, lat). Note that we're filtering in longitude and latitude.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":407,"value":"allquakedata = quakes.features.map(f => ({id: f.id, mag: f.properties.mag,\n lon: f.geometry.coordinates[0], lat: f.geometry.coordinates[1],\n place: f.properties.place,\n time: new Date(f.properties.time).toUTCString(),\n url: f.properties.url})).filter(f => f.lon > -130 && f.lon < -110 && f.lat > 25 && f.lat < 55)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"quakelist = {\n let table = d3.select(document.createElement('table')).attr('id', 'quaketable');\n\n table.append('th').text('Magnitude');\n table.append('th').text('Location');\n table.append('th').text('Time');\n table.append('th').text('Id');\n \n let tr = table.selectAll('tr')\n .data(allquakedata)\n .enter('tr').append('tr')\n .attr('class', 'stadata')\n .attr('id', d => d.id)\n .on('click', function(e,d) {mutable quakeid = d.id;\n selectid(d.id)});\n \n tr.append('td').text(d => d.mag);\n tr.append('td').text(d => d.place);\n tr.append('td').text(d => d.time);\n tr.append('td').html(d => `${d.id}`);\n \n return table.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":693,"value":"The map! It shows quakedata objects, and will update the variable `quakeid` when one is clicked. Note that pan/zoom can be enabled in the code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":973,"value":"stations","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1006,"value":"Modify interactive elements based on chosen quake","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":910,"value":"selectid = function(id) {\n d3.selectAll(`svg#quakeplot g circle.quakecircle`).style('stroke', '#000');\n d3.select(`svg#quakeplot g circle.quakecircle#${id}`).style('stroke', '#f00');\n\n d3.selectAll(`table#quaketable tr`).style('background', '#fff');\n d3.select(`table#quaketable tr#${id}`).style('background', '#fbb');\n\n // when trying to interact with the station dots, there's\n // something wrong here in the interaction of quakeid with fitdata, this function, and the plot\n // so I moved that interactivity to the plotting functions\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"mutable quakeid = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"Select chosen quake data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":601,"value":"quakedata = allquakedata.find(d => d.id == quakeid)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"Request chosen quake fit.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":598,"value":"fitdata = d3.json(`https://shakealert.gdgps.net:5050/quake/${quakeid}`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"Make a table of the fits (using `makerow` below to display each row)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":606,"value":"stationtable = {\n return html`\n \n\n ${Object.keys(fitdata).sort().map(makerow)}\n

Station\n

Distance (km)\n

E (cm)\n

N (cm)\n

V (cm)

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"Plot all the time series and fits (uses `plotsta` below for each station)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":807,"value":"plotstas = {\n d3.selectAll(`svg#quakeplot g circle.stationcircle`).attr('r', 0.4).attr('fill', '#00b');\n let plots = Object.keys(fitdata).sort().map(plotsta);\n return html`${plots}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"plotsta = function(sta) {\n d3.select(`svg#quakeplot g circle.stationcircle#${sta}`).attr('r', 1).attr('fill', '#0b0');\n \n let colors = ({'e': '#c00', 'n': '#0c0', 'v': '#00c'});\n let ps = ['e','n','v'].map(obs => Plot.plot({width: 640, height: 60,\n marginRight: 0, marginTop: 0, marginBottom: obs == 'v' ? 20 : 5,\n x: {type: 'utc', axis: obs == 'v' ? 'bottom' : null},\n marks: [Plot.line(fitdata[sta].data, {x: 't', y: obs, stroke: colors[obs]}),\n Plot.line(fitdata[sta].data, {x: 't', y: `${obs}0`, stroke: '#000'})]}));\n return html`${ps}

${sta}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"Topographic imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"world = d3.json(\"https://unpkg.com/world-atlas@1/world/110m.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"d3geo = require('d3-geo-projection')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"