29:null 2a:["$","title",null,{"children":"Latency Horizon Chart | Agustín | Observable"}] 2f:T581,viewof object = multi_form(html`

Select probes through one of the following:

The last input you "focus" on is the one that gets submitted.

Point and radius

50 km

ASN

Country

`)30:T4a9,chart = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("font", "10px sans-serif"); const g = svg .append("g") .selectAll("g") .data( data.series.sort(sortBy.function).map(d => Object.assign( { clipId: DOM.uid("clip"), pathId: DOM.uid("path") }, d ) ) ) .join("g") .attr("transform", (d, i) => `translate(0,${i * (step + 1) + margin.top})`); g.append("clipPath") .attr("id", d => d.clipId.id) .append("rect") .attr("width", width) .attr("height", step); g.append("defs") .append("path") .attr("id", d => d.pathId.id) .attr("d", d => area(d.values)); g.append("g") .attr("clip-path", d => d.clipId) .selectAll("use") .data(d => new Array(overlap).fill(d)) .join("use") .attr("fill", (d, i) => color(i)) .attr("transform", (d, i) => `translate(0,${(i + 1) * step})`) .attr("xlink:href", d => d.pathId.href); g.append("text") .attr("x", 4) .attr("y", step / 2) .attr("dy", "0.35em") .text(d => d.name); svg.append("g").call(xAxis); return svg.node(); }31:T615,// // The different options for sorting that'll be available for the user // sorts = { // let sorts = [ // { // name: "Probe ID", // ids: ["probeid", "probe", "id"], // function: (s1, s2) => parseInt(s1.prb_id) - parseInt(s2.prb_id) // }, // { // name: "ASN (v4)", // ids: ["asn4"], // function: (s1, s2) => s1.asn_v4 - s2.asn_v4 // }, // { // name: "ASN (v4 preferred)", // ids: ["asn46"], // function: (s1, s2) => // (s1.asn_v4 ? s1.asn_v4 : s1.asn_v6) - // (s2.asn_v4 ? s2.asn_v4 : s2.asn_v6) // }, // { // name: "ASN (v6 preferred)", // ids: ["asn64"], // function: (s1, s2) => // (s1.asn_v6 ? s1.asn_v6 : s1.asn_v4) - // (s2.asn_v6 ? s2.asn_v6 : s2.asn_v4) // }, // { // name: "ASN (v6)", // ids: ["asn6"], // function: (s1, s2) => s1.asn_v6 - s2.asn_v6 // }, // { // name: "Country code", // ids: ["country", "countrycode", "cc"], // function: (s1, s2) => // s1.country_code !== undefined && s2.country_code !== undefined // ? s1.country_code.localeCompare(s2.country_code) // : 0 // }, // { // name: "Prefix size", // ids: ["pfx_size"], // function: (s1, s2) => s1.prefix_v4_size - s2.prefix_v4_size // } // ]; // //link asn --> asn46 // sorts.push({ // name: "ASN", // ids: ["asn"], // function: sorts.filter(s => s.ids.indexOf('asn46') >= 0)[0].function // }); // return sorts; // }32:T655,probe_objects = { let probes, url; let chosen_input = object['last-used']; if (chosen_input === 'location' || chosen_input === 'radius') { mutable description = `Fetching probes in ${object.radius} km around ${object.location}`; url = `https://atlas.ripe.net:443/api/v2/probes/?radius=${coordinates[1]},${coordinates[0]}:${object.radius}`; } else if (chosen_input == 'asn_v4') { mutable description = `Fetching probes in AS${object.asn_v4}`; url = `https://atlas.ripe.net:443/api/v2/probes/?asn=${object.asn_v4}`; } else if (chosen_input == 'country') { mutable description = `Fetching probes in ${object.country}`; url = `https://atlas.ripe.net:443/api/v2/probes/?country_code__in=${object.country}`; } probes = await paginated_fetch(url); console.log(probes); let abandoned = []; for (let chunk of chunks(probes, 5)) { let probes_info = await Promise.all( chunk.map(p => fetch(`https://atlas.ripe.net:443/api/v2/probes/${p.id}`).then(r => r.json() ) ) ); // .concat fails :( abandoned.push(...probes_info); } // we drop probes that don't apply for this time window return abandoned.filter( status => !( // abandoned before time window ( (status.status.name === "Abandoned" && new Date(status.status.since) < new Date(start * 1000)) || // never connected status.status.name === "Never Connected" || // first connected after time window new Date(status.first_connected * 1000) > new Date(stop * 1000) ) ) ); }33:[{"id":"4ea24221b4db5e916702f2056cc385f5a14a80a44c7c304af89957c5cb6c5707cf64372ab0c4ecd9858375af251ce70e9eb397da832f22afc57faf2f54eec9f9","href":"https://static.observableusercontent.com/files/4ea24221b4db5e916702f2056cc385f5a14a80a44c7c304af89957c5cb6c5707cf64372ab0c4ecd9858375af251ce70e9eb397da832f22afc57faf2f54eec9f9","name":"traffic.csv","type":"text/csv","lastModified":1623784190016.379,"size":185565}] 2d:{"id":"ea3e4665b7382241","slug":"latency-horizon-chart","title":"Latency Horizon Chart","thumbnail":"622c5c0e3b11c0f139ad96f1e570885de259103dfc878e4bde82a7caec9a8ed5","access_level":"public","create_time":"$D2021-06-15T19:09:50.016Z","update_time":"$D2021-07-22T17:41:46.450Z","view_time":null,"first_public_time":"$D2021-06-17T12:56:41.098Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"010c865511f6456b","login":"aguformoso","name":"Agustín","avatar_url":"https://avatars-next.observableusercontent.com/53cf33361eaefc9362737a393fb7bd266ef237b7ea7a4e377a830bb5f0c263ca","tier":"starter_2024"},"version":934,"publish_version":934,"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":0,"collection":{"id":"c4ac57fca16f9eea","slug":"ripe-atlas","title":"RIPE Atlas","owner":{"id":"010c865511f6456b","login":"aguformoso","name":"Agustín"}},"type":"notebook","body":{"title":"Latency Horizon Chart","cells":[{"id":791,"value":"md`# Latency Horizon Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"description","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"viewof max_rtt = Inputs.range([0, 10.0], {\n value: 3.0,\n step: 0.25,\n label: 'Max. RTT to paint'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"viewof sortBy = Inputs.radio(sorts, {\n label: \"Sort by\",\n format: x => x.name,\n value: sorts[0]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"msm_id = Inputs.radio(['1', '2'], { value: '1' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"days = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"viewof step = {\n const form = html`\n`;\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"viewof overlap = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber} band${form.i.valueAsNumber === 1 ? \"\" : \"s\"}`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"probes = probe_objects.map(p => p.id) //[1, 3, 33123, 1002406] //","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"_results = {\n let connections = [];\n const page_size = 10;\n let ended = false;\n let i = 0;\n let chunk;\n let chunks = [];\n while (!ended) {\n chunk = probes.slice(i, i + page_size);\n chunks.push(chunk);\n\n i += page_size;\n ended = i >= probes.length;\n }\n\n let promises = chunks.map(chunk =>\n fetch(\n `https://atlas.ripe.net:443/api/v2/measurements/1/results/?start=${start}&stop=${stop}&probe_ids=${chunk.join(\n ','\n )}`\n ).then(r => r.json())\n );\n\n let conns = await Promise.all(promises);\n\n return conns.flat();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"results = fetch(\n `https://atlas.ripe.net/api/v2/measurements/${\n msm_id.value\n }/results/?probe_ids=${probes.join(\n ','\n )}&start=${start}&stop=${stop}&format=json`\n).then(r => r.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"results.map(r => r.max).filter(r => parseFloat(r))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"_data = results.map(r => {\n let d = new Date(r.timestamp * 1000);\n\n // truncate to the hour\n d.setMilliseconds(0);\n d.setSeconds(0);\n d.setMinutes(0);\n\n return {\n min: r.min,\n avg: r.avg,\n max: r.max,\n prb_id: r.prb_id,\n timestamp: d.valueOf()\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"__data = Array.from(d3.group(_data, d => d.timestamp).values())\n .map(\n arr =>\n Array.from(d3.group(arr, r => r.prb_id).values())\n .map(rs => {\n // function is not aware of .prb_id\n // ...but it can pick it from the first element\n let prb_id = rs[0].prb_id;\n let timestamp = rs[0].timestamp;\n let rtts = rs\n .map(r => [r.min, r.avg, r.max])\n .flat()\n .filter(rtt => rtt <= max_rtt);\n\n return {\n prb_id: prb_id,\n timestamp: timestamp,\n rtts: rtts,\n\n // we're computing .min .avg .max for this aggregated bucket\n min: d3.min(rtts),\n avg: d3.sum(rtts) / rtts.length,\n max: d3.max(rtts)\n };\n })\n .flat() // all the probes sharing that timestamp\n )\n .flat() // everything on the top-level","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"// `date` and `series` are added to the data structure\n// through .reduce\ndata = __data.reduce(\n (acc, r) => {\n // .dates should hold only unique timestamps\n // remember timestamps might be truncated to arbitraty precission\n if (!acc.dates.includes(r.timestamp)) acc.dates.push(r.timestamp);\n\n // add .min, either pushing to existing array or creating one\n if (acc.series.filter(s => s.name === r.prb_id).length) {\n acc.series.filter(s => s.name === r.prb_id)[0].values.push(r.min);\n } else {\n const probe = probe_objects.filter(p => p.id === r.prb_id)[0];\n acc.series.push({\n // some info comes from the msm results\n name: r.prb_id,\n prb_id: r.prb_id,\n values: [r.min],\n\n // some other from probe_objects\n asn_v4: probe.asn_v4,\n asn_v6: probe.asn_v6,\n country_code: probe.country_code\n });\n }\n return acc;\n },\n\n // initially empty arrays\n { dates: [], series: [] }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"stop = Math.floor(new Date().getTime() / 1000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"start = {\n let a = new Date();\n a.setDate(a.getDate() - days);\n return Math.floor(a / 1000);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"dataz","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"viewof scheme = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"height = data.series.length * (step + 1) + margin.top + margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"margin = ({ top: 30, right: 10, bottom: 0, left: 100 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"color = i => d3[scheme][Math.max(3, overlap)][i + Math.max(0, 3 - overlap)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data.dates))\n .range([0, width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data.series, d => d3.max(d.values))])\n .range([0, -overlap * step])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(width / 80).tickSizeOuter(0))\n .call(g => g.selectAll(\".tick\").filter(d => x(d) < margin.left || x(d) >= width - margin.right).remove())\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"area = d3.area()\n .curve(d3.curveBasis)\n .defined(d => !isNaN(d))\n .x((d, i) => x(data.dates[i]))\n .y0(0)\n .y1(d => y(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"dataz = {\n const data = d3.csvParse(\n await FileAttachment(\"traffic.csv\").text(),\n d3.autoType\n );\n const dates = Array.from(d3.group(data, d => +d.date).keys()).sort(\n d3.ascending\n );\n return {\n dates: dates.map(d => new Date(d)),\n series: d3\n .groups(data, d => d.name)\n .map(([name, values]) => {\n const value = new Map(values.map(d => [+d.date, d.value]));\n return { name, values: dates.map(d => value.get(d)) };\n })\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"mutable description = ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"// Fetch the coordinates from OpenStreetMap Nominatim service\n// if that's not possible, get them from the map\ncoordinates = {\n mutable description = \"Looking the coordinates for your location\";\n return await fetch(\n `https://nominatim.openstreetmap.org/search.php?q=${location_nominatim.replace(\n ' ',\n '+'\n )}&format=json`\n )\n .then(response => response.json())\n .then(json => json[0])\n .then(j => [j.lon, j.lat])\n .catch(error => {\n // Nominatim might be down\n // flalback to pin-on-the-map selection\n // mutable nominatim_down = true;\n // return _coordinates;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"location_nominatim = object.location","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"import {\n chunks,\n multi_form,\n paginated_fetch,\n sorts\n} from '@aguformoso/internet-outages-as-seen-by-ripe-atlas'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"