29:null 2a:["$","title",null,{"children":"Multilateration from your browser | Agustín | Observable"}] 2f:T1289,globe = { // mutable closest_point holds the map center projection.rotate([-closest_point.center[0], -closest_point.center[1]]); // redraw on every new point :( current_point; const circle = d3.geoCircle(), height = width * (9 / 16), // every new paint renders an entirely new svg :( // ...for now svg = d3.create("svg").attr("width", width).attr("height", height); // 16:9 aspect ratio // svg // .append("path") // .datum(land) // .attr("class", "land") // .attr("d", path); const C = constants(); let min = (rtts) => Math.min(...rtts.filter((r) => r > 0.0)); // consider all the measured correction from above // rtt -> corrected rtt // corrected rtt -> one way latency let correct_rtt = (point) => { const def = 0; if (!point.rtts) return def; // perceived RTT by this tool let rtt = min(point.rtts); // this is the time it takes for the browser to // read and write from the network // we need to subtract it once only from the RTT // (send event, as the read event already contemplates parsing time) // if(correction_parsing_time) // rtt -= min(rtts_edge.parsing); if (correction_first_mile_latency) // && rtt > min(rtts_edge.w3c)) // rtt -= min(rtts_edge.w3c); rtt -= 0; // correct for the delay introduced by the w3c timer // in comparison with a TCP handshake if (correction_tcp_time) { rtt -= d3.min(rtts_edge.dirty) - d3.min(rtts_edge.tcp); //rtt -= min(rtts_edge.tcp); // rtt /= Math.min(...rtts_edge.dirty) / Math.min(...rtts_edge.tcp);} } let latency = rtt / 2; return latency; }; svg .append("path") .attr("fill", "#AFBBF2") .attr("stroke", "no-stroke") .attr("opacity", 0.5) .attr( "d", path({ type: "FeatureCollection", features: cities.features.filter( (city) => city.properties.iso_a2 === user.country // countries.includes(city.properties.iso_a2) ) }) ); // if (coordinates) // svg // .append("path") // .attr("class", "circle c") // .attr( // "d", // path({ // type: "Feature", // properties: {}, // geometry: { // type: "Point", // coordinates: [coordinates.longitude, coordinates.latitude] // } // }) // ); svg .selectAll("g") .data( selected_points.filter((p) => p.center).concat(groundTruth), // data holding datums (point) => (point.rtts ? Math.min(point.rtts) : 0.0) // key function ) .join( (enter) => { // console.log('enter:', enter); return enter .append("g") .attr("class", (d) => (d.clientTcpRtt ? "circle b" : "circle a")) .append("path") .attr("d", (r) => { return path( circle .center(r.center) .radius(miliseconds_to_radius(correct_rtt(r)))() // .radius(1)() // for testing ); }) .attr( "opacity", (r) => C.scale(correct_rtt(r)) // r => .2 // random // for testing ); }, (update) => { // console.log('update:', update); return update.attr("fill", "gray"); } ) .attr("clip-path", "url(#landClipPath)"); // clipping to land; // svg // .selectAll("g") // .data( // [groundTruth], // data holding datums // (point) => (point.rtts ? Math.min(point.rtts) : 0.0) // key function // ) // .join( // (enter) => { // // console.log('enter:', enter); // return enter // .append("g") // .attr("class", "circle b") // .append("path") // .attr("d", (r) => { // return path( // circle // .center(r.center) // .radius(miliseconds_to_radius(correct_rtt(r)))() // // .radius(1)() // for testing // ); // }) // .attr( // "opacity", // (r) => C.scale(correct_rtt(r)) // // r => .2 // random // for testing // ); // }, // (update) => { // // console.log('update:', update); // return update.attr("fill", "gray"); // } // ) // .attr("clip-path", "url(#landClipPath)"); // clipping to land; svg .append("path") .datum(land) .attr("class", "outer land") .attr("d", path) .attr("id", "landPath") .style("fill", "none"); svg .append("clipPath") .attr("id", "landClipPath") .append("use") .attr("xlink:href", "#landPath"); return svg.node(); }30:T535,md` ## About first-mile latency First-mile latency might account for a high portion of your end-to-end latency. With this setting we separate your first mile latency from the rest of the latency (core Internet latency). How? By running multiple measurements between you and your closest Cloudflare PoP (${user.country}-${user.colo}). TCP handshake to your closest Cloudflare PoP (${user.country}-${user.colo}): ${Math.min(...rtts_edge.tcp)} ms And additionaly we capture the browser's latency, based on its high resolution timer, which helps us infer the TCP handshake time during subsequent measurements. Browser's high resolution timer: ${Math.min(...rtts_edge.w3c).toFixed(2)} ms These two numbers hold two important meanings: 1. your browser's first-mile latency is ~${Math.min(...rtts_edge.w3c).toFixed(2)} ms, meaning that any latency measurement to the rest of the Internet will be greater than this time. 2. and whatever we measure through the browser's high resolution timer will be around ${ (Math.min(...rtts_edge.w3c) - Math.min(...rtts_edge.tcp)).toFixed(2) }ms slower (${ (Math.min(...rtts_edge.w3c) / Math.min(...rtts_edge.tcp)).toFixed(2) }x) than the actual TCP handshake between your browser network stack and the remote server's. If we're to infer the TCP handshake time we need to take this into account. `31:T671,rtts_edge = { let rtts = []; let parsings = []; let observer = new PerformanceObserver((list, obj) => { let a = list.getEntries()[0]; if (a.name === "https://ip-echo.webmeasurements.net/") { console.log(a); let rtt = a.responseStart - a.requestStart; // no requestEnd available :( let parsing = a.responseEnd - a.responseStart; mutable total_bytes_rx += a.encodedBodySize; rtts.push(rtt); parsings.push(parsing); } else { // all other names (observablehq, etc) } }); observer.observe({ entryTypes: ["resource"] }); // let rtts_tcp = await Promise.all( // [ ...Array(500).keys() ].map( // _ => fetch( // `https://ip-echo.webmeasurements.net/` // ).then( // r => r.json() // ).then( // r => r.clientTcpRtt // ) // ) // ); let dirty_rtts = []; let rtts_tcp = []; let responses = []; for (let i of [...Array(constants().samples).keys()]) { let t0 = new Date(); let rtt_tcp = await fetch(`https://ip-echo.webmeasurements.net/`) .then((r) => { dirty_rtts.push(new Date() - t0); return r.json(); }) .then((r) => { responses.push(r); return r.clientTcpRtt; }); // dirty_rtts.push(new Date() - t0); rtts_tcp.push(rtt_tcp); } // let rtts_tcp = []; // fetch( // `https://ip-echo.webmeasurements.net/` // ).then( // r => r.json() // ).then( // r => r.clientTcpRtt // ) return { tcp: rtts_tcp, w3c: rtts, dirty: dirty_rtts, parsing: parsings, responses }; }32:[{"id":"df0d320ddc1cb022ddec7c1ca74c8e711cdb84b295d6c5da2acc69faf0fe9037ccbaaa3d13fd017f124e2c801012d01c53cecf5d92ac1cef04e0fd27a4db8caf","href":"https://static.observableusercontent.com/files/df0d320ddc1cb022ddec7c1ca74c8e711cdb84b295d6c5da2acc69faf0fe9037ccbaaa3d13fd017f124e2c801012d01c53cecf5d92ac1cef04e0fd27a4db8caf","name":"ne_10m_populated_places_simple.json","type":"application/json","lastModified":1594288205976.472,"size":5562189},{"id":"a7c2c43c42d1f6f070e83c50b4b4ab4bbf8a43dbfd1505306b3d410d4b61979260f67862ea55e1f679937e96cf154ab364b394d4fa54c99f8ae35df3b3c238f5","href":"https://static.observableusercontent.com/files/a7c2c43c42d1f6f070e83c50b4b4ab4bbf8a43dbfd1505306b3d410d4b61979260f67862ea55e1f679937e96cf154ab364b394d4fa54c99f8ae35df3b3c238f5","name":"contour.png","type":"image/png","lastModified":1595400843832.021,"size":93904}] 2d:{"id":"ea1b1711f6494d1d","slug":"multilateration-from-your-browser","title":"Multilateration from your browser","thumbnail":"ebe29fd48826882f62eb9e9176eabcb5d0ff9b94cc56bf67aa01664244695cdb","access_level":"public","create_time":"$D2020-06-24T07:31:43.065Z","update_time":"$D2024-01-05T21:06:05.026Z","view_time":null,"first_public_time":"$D2020-07-05T15:07:32.548Z","has_unpublished_edits":null,"fork":{"id":"5a0e2033daa9a00c","slug":"two-point-equidistant","title":"Two point equidistant","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"010c865511f6456b","login":"aguformoso","name":"Agustín","avatar_url":"https://avatars-next.observableusercontent.com/53cf33361eaefc9362737a393fb7bd266ef237b7ea7a4e377a830bb5f0c263ca","tier":"starter_2024"},"version":5005,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"de0d99ff05bbda21","login":"aguformoso","name":"Agustín","avatar_url":"https://avatars-next.observableusercontent.com/53cf33361eaefc9362737a393fb7bd266ef237b7ea7a4e377a830bb5f0c263ca","tier":null}],"members":[{"type":"individual","id":"de0d99ff05bbda21","login":"aguformoso","name":"Agustín","avatar_url":"https://avatars-next.observableusercontent.com/53cf33361eaefc9362737a393fb7bd266ef237b7ea7a4e377a830bb5f0c263ca","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"8c98fbe9c83b5fe7","slug":"browser-apis","title":"Browser APIs","owner":{"id":"010c865511f6456b","login":"aguformoso","name":"Agustín"}},"type":"notebook","body":{"title":"Multilateration from your browser","cells":[{"id":4722,"value":"md`# Multilateration from your browser`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2473,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4946,"value":"viewof button = html`

${Object.assign(\n html`

Map zoom