31:T575,viewof object = multi_form(html`

Select probes through one of the following:

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

Location and radius around	${query.radius \|\| defaults.radius} km
ASN
Country code(s)

`)32:Td99,Plot.plot({ height: selected_tags.length ? 300 : 200, // making room for larger tooltips when using tags width: size.width - 59, marginLeft: margin.left + 5, x: { label: "Date/Time (UTC)", grid: true }, y: { grid: true, label: "Connected RIPE Atlas probes", domain: [ 0, selected_tags.length ? maxTaggedUntaggedCombined * 1.1 : Math.floor(probe_objects.length * 1.1) ] }, color: { legend: showControllers && !selected_tags.length ? false : true, range: selected_tags.length ? [hi_color, lo_color] : ["rgba(245, 40, 145, 0.36)"] }, marks: selected_tags.length ? [ Plot.ruleY([0]), // TODO let the user choose the 0-value? // areaY holds only the tooltip Plot.areaY( taggedUntaggedCombined, Plot.windowY({ x: (d) => new Date(d.date * 1000), y1: (d) => Math.max(d.tagged, d.untagged), y2: (d) => 0, //d.untagged, fill: "white", k: 1, title: (d) => `Connected probes \n${new Date(d.date * 1000) .toUTCString() .replace("GMT", "UTC")} \n Selected tags: ${selected_tags.join( "," )} \nTagged: ${d.tagged} \nUntagged:${ d.untagged } \nDifference: ${Math.abs( d.tagged - d.untagged )} \nPercentage (tagged/untagged): ${( (100.0 * d.tagged) / d.untagged ).toFixed(1)}% \nPercentage (tagged/total): ${( (100.0 * d.tagged) / (d.tagged + d.untagged) ).toFixed(1)}%` // each diff area will have stroke and fill // stroke: "#CFD7F2", // fill: "red" }) ), Plot.line( timeline.filter( (tl) => tl.tags === "tagged" || tl.tags === "untagged" ), { x: (d) => new Date(d.date * 1000), y: (d) => d.value, // z: (d) => (d.tags === "untagged" ? 0 : 1), stroke: "tags" } ) ] : [ Plot.areaY( timeline.filter((tl) => tl.tags === ""), { x: (d) => new Date(d.date * 1000), y: (d) => d.value, title: (d) => `${d.value} connected probes\n${new Date(d.date * 1000) .toUTCString() .replace("GMT", "UTC")}`, // each diff area will have stroke and fill stroke: "rgba(207,215,242,0.08)", fill: "rgba(207,215,242,0.08)" } ), Plot.lineY( timeline.filter((tl) => tl.tags === ""), { x: (d) => new Date(d.date * 1000), y: (d) => d.value, stroke: "#131F48" } ), // controller info showControllers ? Plot.line( controllerOk, Plot.windowY({ k: 50, x: (c) => new Date(c.timestamp * 1000), y: (c) => (c.event === "disconnect" ? 1 : -1), reduce: "sum", curve: "step", stroke: (c) => interpolator(controllerScale(c.controller)) }) ) : Plot.ruleY([0]) // TODO: non-0 baseline ], tooltip: { fill: "red", stroke: "red" } // Plot.ruleY([0]) // let's mark the x axis })33:T5e5,chart = { const svg = d3.select(DOM.svg(size.width, size.height)); // hook on the mutable object // this way we're able to paint on every change on _ // using statuses alone is not enough _; svg .append("g") .attr("stroke-width", 10) .attr("pointer-events", "all") .selectAll("rect") .data( statuses .flat() .filter((s) => s.status === state_to_show) .sort(sortBy.function) ) .join("rect") .attr("fill", (d) => { if (selected_tags.length && d.tags) { if ( d.tags.find((t) => selected_tags.find((selected_t) => selected_t === t) ) ) { return highlight; } else if (lowlight) { return "lightgray"; } } return interpolator(colorBy.function(d)); // return interpolator(countryScale(d.country_code)); // return interpolator(parseInt(d.asn_v4)); }) .attr("x", (d) => xScale(d.start)) .attr("y", (d) => yScale(d.prb_id) + 2) .attr("width", (d) => { return xScale(d.end) - xScale(d.start); }) .attr("height", 6); // x-axis is defined in timeline chart (right below) // svg // .append('g') // .attr('transform', `translate(0, ${size.height - margin.bottom})`) // .call(xAxis) // .selectAll("text") // .attr("transform", t => "rotate(-45)") // .attr("dx", "-3.5em"); svg.append("g").attr("transform", `translate(${margin.left}, 0)`).call(yAxis); return svg.node(); }34:T8d5,// The different options for sorting that'll be available for the user sorts = { let sorts = []; /* Conditional sorting - they only show up in the UI if certain conditions are met e.g. offer to sort by country if more than 1 country comes in the results */ // TODO sort by tag // if (selected_tags) // sorts.push({ // name: "Tagged", // ids: ["tagged"], // function: (s1, s2) => { // console.log(s1); // return s1.tags === "tagged" || s2.tags === "tagged" ? 1 : 0; // } // }); // TODO sort by proximity to chosen event // e.g. event=2022-02-27T12:00 if (Array.from(new Set(probe_objects.map((p) => p.asn_v4))).length > 1) sorts.push({ name: "ASN (v4)", ids: ["asn4"], function: (s1, s2) => s1.asn_v4 - s2.asn_v4 }); if (Array.from(new Set(probe_objects.map((p) => p.id))).length > 1) sorts.push({ name: "Probe ID", ids: ["probeid", "probe", "id"], function: (s1, s2) => parseInt(s1.id) - parseInt(s2.id) }); if (Array.from(new Set(probe_objects.map((p) => p.country_code))).length > 1) sorts.push({ 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 }); if (Array.from(new Set(probe_objects.map((p) => p.asn_v6))).length > 1) sorts.push({ name: "ASN (v6)", ids: ["asn6"], function: (s1, s2) => s1.asn_v6 - s2.asn_v6 }); /* Permanent sorting - we always show these ones */ sorts.push({ name: "Uptime", ids: ["uptime"], function: (p1, p2) => { // _; const uptime1 = uptimes.filter((u) => u.prb_id == p1.id); const uptime2 = uptimes.filter((u) => u.prb_id == p2.id); if (uptime1.length && uptime2.length) return uptime1[0].uptime_percentage - uptime2[0].uptime_percentage; if (uptime1.length) return +1; if (uptime2.length) return -1; return 0; } }); // sorts.push({ // name: "Prefix size", // ids: ["pfx_size"], // function: (s1, s2) => s1.prefix_v4_size - s2.prefix_v4_size // }); return sorts; }35:T42d,colors = { let colors = []; // if (Array.from(new Set(probe_objects.map((p) => p.id))).length > 1) // colors.push({ // name: "Probe ID", // ids: ["probeid", "probe", "id"], // function: a=>a//(s1, s2) => parseInt(s1.id) - parseInt(s2.id) // }); if (Array.from(new Set(probe_objects.map((p) => p.asn_v4))).length > 1) colors.push({ name: "ASN (v4)", ids: ["asn4"], function: (p) => p.asn_v4 }); if (Array.from(new Set(probe_objects.map((p) => p.country_code))).length > 1) colors.push({ name: "Country code", ids: ["country", "countrycode", "cc"], function: (p) => countryScale(p.country_code) }); // if (Array.from(new Set(probe_objects.map((p) => p.asn_v6))).length > 1) // colors.push({ // name: "ASN (v6)", // ids: ["asn6"], // function: (s1, s2) => s1.asn_v6 - s2.asn_v6 // }); // colors.push({ // name: "Prefix size", // ids: ["pfx_size"], // function: (s1, s2) => s1.prefix_v4_size - s2.prefix_v4_size // }); return colors; }36:T641,probe_objects = { let urlParams; let chosen_input = object["last-used"]; if (chosen_input === "location" || chosen_input === "radius") { mutable description = `Fetching probes within ${object.radius} km around ${object.location}`; urlParams = new URLSearchParams({ radius: `${coordinates[1]},${coordinates[0]}:${object.radius}` }); } else if (chosen_input == "asn_v4") { mutable description = `Fetching probes in AS${object.asn_v4}`; urlParams = new URLSearchParams({ asn: `${object.asn_v4}` }); } else if (chosen_input == "country") { mutable description = `Fetching probes in ${object.country}`; urlParams = new URLSearchParams({ country_code__in: `${object.country}` }); } let probes = await paginated_fetch( `https://atlas.ripe.net:443/api/v2/probes/?${urlParams.toString()}` ); let abandoned = await Promise.all( chunks(probes, 20).map((probeChunk) => paginated_fetch( `https://atlas.ripe.net:443/api/v2/probes/?id__in=${probeChunk .map((p) => p.id) .join(",")}` ) ) ).then((a) => a.flat()); // 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)) || // never connected status.status.name === "Never Connected" || // first connected after time window new Date(status.first_connected * 1000) > new Date(stop) ) ) ); }37:T45d,// the blue timeline timeline = range( _start.getTime() / 1000, d3.min([_stop, nowFixed]).getTime() / 1000 - 10, // $until -10 seconds, otherwise there's always a drop to 0 on $now - ε resolution ) .map(ts => { // we trigger this with the _ mutable counter; _; // we simply... count! let filtered = statuses .flat() .filter( status => status.start <= ts && ts <= status.end && status.status === state_to_show ); let tagged = filtered.filter(status => status.tags.find(tag => selected_tags.find(selected_tag => selected_tag === tag) ) ); let untagged = filtered.filter( status => !status.tags.find(tag => selected_tags.find(selected_tag => selected_tag === tag) ) ); return [ { date: ts, value: filtered.length, tags: "" }, { date: ts, value: tagged.length, tags: "tagged" }, { date: ts, value: untagged.length, tags: "untagged" } ]; }) .flat()38:T905,mutable statuses = Object.entries(groupBy(connections, 'prb_id')).map( ([prb_id, conn_result]) => { mutable description = `Recreating connection states for ${prb_id}`; let probe = probe_objects.filter(p => p.id === parseInt(prb_id))[0]; let conns_sorted = conn_result.sort(sortByTimestamp); // sequential pass over timestamps // and interpolating connection state let state = (event1, event2) => event1 === "connect" && event2 === "disconnect" ? "up" : "down"; let flip = event => (event === "connect" ? "disconnect" : "connect"); let prefix_v4_size = probe.prefix_v4 ? 2 ** (32 - parseInt(probe.prefix_v4.split('/')[1])) : 0; let res = []; // let's fake the first status let r = { start: _start.getTime() / 1000, //Math.min(...timestamps), end: conns_sorted[0].timestamp, status: state(flip(conns_sorted[0].event), conns_sorted[0].event), prb_id: prb_id, asn_v4: probe.asn_v4, prefix_v4: probe.prefix_v4, prefix_v4_size: prefix_v4_size, country_code: probe.country_code, tags: probe.tags.map(t => t.slug) }; res.push(r); for (let i = 0; i < conns_sorted.length; i++) { let start = conns_sorted[i]; let end = conns_sorted[i + 1]; if (!start || !end) continue; let status = { start: start.timestamp, end: end.timestamp, status: state(start.event, end.event), prb_id: prb_id, asn_v4: probe.asn_v4, prefix_v4: probe.prefix_v4, prefix_v4_size: prefix_v4_size, country_code: probe.country_code, tags: probe.tags.map(t => t.slug) }; res.push(status); } // let's fake the last status until $stop or until $now, whichever happens first let fakeStop = d3.min([new Date(_stop.getTime()), nowFixed]).getTime() / 1000; const last = conns_sorted[conns_sorted.length - 1]; let s = { start: last.timestamp, end: fakeStop, status: state(last.event, flip(last.event)), prb_id: prb_id, asn_v4: probe.asn_v4, prefix_v4: probe.prefix_v4, prefix_v4_size: prefix_v4_size, country_code: probe.country_code, tags: probe.tags.map(t => t.slug) }; res.push(s); mutable _ += 1; return res; } )39:T84a,// IMPORTANT CELL // for those probes having no connection events, we'll have // to determine whether it's 100% uptime or 100% downtime // for the selected time interval { let out_of_scope = probe_objects.filter( (p) => !statuses .flat() .map((s) => parseInt(s.prb_id)) .includes(p.id) ); // look for connection logs up to 10 weeks back in time let current_batch = out_of_scope; // let next_batch = []; let t1 = new Date(start).getTime(); let t2 = new Date(stop).getTime(); let dt = t2 - t1; for (let num_weeks = 1; num_weeks <= periods; num_weeks++) { mutable description = `Calculating connection state for ${current_batch.length} probes (looking ${num_weeks} periods back)`; let next_batch = []; // chunks(current_batch,5) let promises = current_batch.map(async (p) => { let t0 = new Date(t1 - num_weeks * dt); let url = `https://atlas.ripe.net:443/api/v2/measurements/7000/results/?start=${ t0.toISOString().split("T")[0] }T00:00&stop=${ new Date(t2).toISOString().split("T")[0] }T00:00&probe_ids=${p.id}`; let conns = await cached_fetch(url); console.log(url); conns = conns.sort(sortByTimestamp); let s; if (conns.length > 0) { let c = conns[conns.length - 1]; let prefix_v4_size = p.prefix_v4 ? 2 ** (32 - parseInt(p.prefix_v4.split("/")[1])) : 0; let s = { start: _start.getTime() / 1000, //Math.min(...timestamps), end: d3.min([nowFixed, _stop]).getTime() / 1000, //Math.max(...timestamps), status: event2state(c.event), prb_id: `${p.id}`, asn_v4: p.asn_v4, prefix_v4: p.prefix_v4, prefix_v4_size: prefix_v4_size, country_code: p.country_code, tags: p.tags.map((t) => t.slug) }; mutable statuses.push([s]); mutable _ += 1; } else { next_batch.push(p); } return s; }); await Promise.all(promises); current_batch = [...next_batch]; } mutable description = `Done.`; }3a:T677,// This is a soft fork from // @forresto/form-input-with-submit and // @mbostock/form-input function multi_form(form) { const container = html`

${form}`; form.addEventListener("submit", (event) => { event.preventDefault(); container.value = formValue(form); container.dispatchEvent(new CustomEvent("input")); }); form.addEventListener("input", (event) => { /// // console.log(event, event.srcElement); let name = event.srcElement.name; let value = event.srcElement.value; // fix here let label = event.path[1].getElementsByTagName("label")[0]; // we store in a hidden input element // the name of the last used input // let last_used = Object.values(form) // .filter((element) => element.tagName === "INPUT") // .filter((input) => input.name === "last-used")[0]; // last_used.value = name; if (name === "radius") { label.innerHTML = `${value} km`; } else if (name === "asn_v4") { } event.preventDefault(); // Need this, because otherwise the viewof Generator catches bubbling input events event.stopPropagation(); }); Object.values(form) .filter((element) => element.tagName === "INPUT") .filter((input) => input.name != "last-used" && input.name != "") .map((e) => { e.addEventListener("focus", (event) => { let name = event.srcElement.name; let last_used = Object.values(form) .filter((element) => element.tagName === "INPUT") .filter((input) => input.name === "last-used")[0]; last_used.value = name; console.log(last_used); }); }); return container; }3b:[] 2f:{"title":"Internet outages as seen by RIPE Atlas","cells":[{"id":0,"value":"md`# Internet outages as seen by RIPE Atlas\nThis is a work in progress, inspired by the [Probe Connects](https://github.com/emileaben/resource-gnuplotter) tool.\n[RIPE Atlas](https://atlas.ripe.net/) has many measurement nodes worldwide that are connected to the Internet, and submit measurement results to our back-end servers. In this visualisation we show what the connectivity between these measurement nodes (RIPE Atlas probes) and our back-end servers can tell us about the connectivity of parts of the Internet to the rest of the Internet.\n\nSee [here](https://observablehq.com/@emileaben/ripe-atlas-controllers-status) to try to figure out if any signal you see might have been caused by maintenance/outages on the RIPE Atlas controller infrastructure.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4268,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4686,"value":"description","pinned":false,"hidden":false,"mode":"ojs"},{"id":3846,"value":"html`

Start and stop date

\n${bind(html``, viewof _start)}\n${bind(html``, viewof _stop)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1887,"value":"viewof selected_tags = Checkbox(\n tags.sort((t1, t2) => (t1.startsWith(\"system-\") ? -1 : 1)),\n {\n label:\n \"Probes to highlight (highlighted probes have at least 1 of the selected tags)\",\n value: (query[\"tags\"] && query[\"tags\"].split(\",\")) || []\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1682,"value":"viewof sortBy = Radio(sorts, {\n label: \"Sort by\",\n format: x => x.name,\n value: query['sort']\n ? sorts.filter(s => s.ids.indexOf(query['sort']) >= 0)[0]\n : sorts[0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5829,"value":"viewof colorBy = Radio(colors, {\n label: \"Color by\",\n format: x => x.name,\n value: query['color']\n ? colors.filter(s => s.ids.indexOf(query['color']) >= 0)[0]\n : colors[0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1367,"value":"md`\nYou can share your search using [this link ${await icon(\n 'share-alt'\n)}](${choices})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2105,"value":"`${description}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5369,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":6474,"value":"viewof showControllers = Radio([true, false], {\n label: \"Overlay Atlas infrastructure connectivity\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2587,"value":"viewof resolution = Range([1, 86400], {\n label: \"Sampling resolution (in seconds)\",\n step: 30,\n value:\n query['resolution'] || (d3.max(timestamps) - d3.min(timestamps)) / 10000\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5585,"value":"## Other settings","pinned":false,"hidden":false,"mode":"md"},{"id":2464,"value":"viewof state_to_show = Radio([\"up\", \"down\"], {\n label: \"State to display\",\n value: query['state'] ? query['state'] : defaults.state\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1932,"value":"viewof lowlight = Radio([true, false], {\n label: \"Dim other probes when highlighting\",\n value: query[\"dim\"] ? query[\"dim\"] === \"true\" : true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5966,"value":"viewof reverseSort = Radio([true, false], {\n label: \"Reverse sort\",\n value: false //(query[\"tags\"] && query[\"tags\"].split(\",\")) || []\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5748,"value":"// viewof show_zero = Radio([true, false], {\n// label: \"Show 0 (in y axis)\",\n// value: query[\"show_zero\"] ? query[\"show_zero\"] : defaults.show_zero\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2100,"value":"md`## TODOs\n\nmore probe selectors (country, bounding box, network-related)
\n\n color by country (deterministic in a range of 1-?)
\n\n aggregate on ASN / country / pfx
\n\n toggle bewteen state (up/down) and event (connected/disconnected)
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1419,"value":"viewof periods = Range([0, 50], {\n title: \"Periods\",\n step: 1,\n value: 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6277,"value":"viewof hi_color = colorPicker(\"purple\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6279,"value":"viewof lo_color = colorPicker(\"orange\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1881,"value":"viewof highlight = colorPicker(\"red\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6324,"value":"Plot.plot({\n height: 200,\n width: size.width - 59,\n marginLeft: margin.left + 5,\n marks: [\n Plot.line(\n controllerOk,\n Plot.windowY({\n k: 50,\n x: (c) => new Date(c.timestamp * 1000),\n y: (c) => (c.event === \"disconnect\" ? 1 : -1),\n reduce: \"sum\",\n curve: \"step\",\n stroke: (c) => interpolator(controllerScale(c.controller))\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6513,"value":"maxTaggedUntaggedCombined = taggedUntaggedCombined.reduce((accumulator, currentValue) => {\n if (currentValue.tagged > accumulator) accumulator = currentValue.tagged;\n if (currentValue.untagged > accumulator) accumulator = currentValue.untagged;\n return accumulator;\n}, 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5855,"value":"uptimes = mutable statuses\n .map((ss) =>\n // per-probe series\n ss.reduce(\n (accumulator, s) => {\n const duration = s.end - s.start;\n if (s.status === \"up\") accumulator[\"uptime\"] += duration;\n if (s.status === \"down\") accumulator[\"downtime\"] += duration;\n if (accumulator.prb_id === \"\") accumulator[\"prb_id\"] = s.prb_id;\n\n return accumulator;\n },\n { uptime: 0, downtime: 0, prb_id: \"\" }\n )\n )\n // add uptime percentage per probe\n .map((a) => {\n _;\n\n a[\"uptime_percentage\"] =\n (100.0 * a[\"uptime\"]) / (a[\"uptime\"] + a[\"downtime\"]);\n return a;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1683,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":5831,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1022,"value":"query = {\n let params = new URLSearchParams(window.location.search);\n let queryObject = {};\n for (let p of params) {\n queryObject[p[0]] = p[1];\n }\n\n return queryObject;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"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"},{"id":29,"value":"size = ({\n width: Math.min(window.innerWidth, 1900),\n height: margin.bottom + probe_objects.length * 10 + 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"margin = ({ top: 12, right: 80, bottom: 80, left: 6 * longest_label })","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"dataLength = connections.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"function paginated_fetch(url = \"\", previousResponse = []) {\n return fetch(url)\n .then(response => response.json())\n .then(newResponse => {\n const response = [...previousResponse, ...newResponse['results']]; // Combine the two arrays\n if (newResponse['next']) {\n url = newResponse['next'];\n mutable description = `Fetching page ${new URLSearchParams(\n url.split('?')[1]\n ).get('page')}`;\n return paginated_fetch(url, response);\n }\n return response;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"probes = probe_objects.filter(p => p.status.name !== \"Abandoned\").map(p => p.id)","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"connections = {\n let connections = [];\n const page_size = 50;\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/7000/results/?start=${start}T00:00&stop=${stop}T00:00&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"},{"id":6393,"value":"usedControllers = Array.from(d3.group(connections, (c) => c.controller).keys())","pinned":true,"hidden":false,"mode":"ojs"},{"id":6397,"value":"usedControllers.includes(\"ctr-nue15\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":6307,"value":"controllerOk = d3\n .json(\n `https://atlas.ripe.net:443/api/v2/measurements/7000/results/?start=${start}T00:00&stop=${stop}T00:00`\n )\n .then((a) =>\n Array.from(a).filter((c) => usedControllers.includes(c.controller))\n )\n// .filter((c) => usedControllers.includes(c.controller))","pinned":false,"hidden":false,"mode":"ojs"},{"id":6357,"value":"allControllers = Array.from(d3.group(controllerOk, (c) => c.controller)).map(\n ([controller, values]) => controller\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"groupBy = (items, key) =>\n items.reduce(\n (result, item) => ({\n ...result,\n [item[key]]: [...(result[item[key]] || []), item]\n }),\n {}\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"sortByTimestamp = (a, b) => {\n if (a.timestamp < b.timestamp) {\n return -1;\n }\n if (a.timestamp > b.timestamp) {\n return 1;\n }\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2224,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":6096,"value":"taggedUntaggedCombined = Array.from(\n d3.group(\n timeline.filter((tl) => tl.tags === \"tagged\" || tl.tags === \"untagged\"),\n (t) => t.date\n )\n).map(([date, [one, theOther]]) => {\n let tagged = one.tags === \"tagged\" ? one.value : theOther.value;\n let untagged = one.tags === \"untagged\" ? one.value : theOther.value;\n return { date: date, tagged: tagged, untagged: untagged };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1328,"value":"mutable _ = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1316,"value":"// assuming we're walking backwards in time\nevent2state = event => (event === \"connect\" ? \"up\" : \"down\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1262,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"data = connections.map((c, i) => {\n return { x: c.timestamp, y: probes.indexOf(c.prb_id) + 1, event: c.event };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"timestamps = connections.map(c => c.timestamp)","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"xScale = d3\n .scaleLinear()\n .domain([_start.getTime() / 1000, d3.min([_stop, nowFixed]).getTime() / 1000]) // we paint the timelines until _stop\n .range([margin.left, size.width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"yScale = d3\n .scaleBand()\n .domain(probe_objects.sort(sortBy.function).map(p => p.id))\n .range([size.height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"xAxis = d3.axisBottom(xScale).tickFormat(x => {\n let t0 = new Date(start);\n let t1 = new Date(stop);\n let d = 86400 * 1000;\n let w = 7 * d;\n\n let value = new Date(x * 1000);\n if (t1 - t0 > d) return value.toLocaleDateString();\n return `${\n value\n .toISOString()\n .split('T')[1]\n .split('.')[0]\n } UTC`;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"yAxis = d3.axisLeft(yScale).tickFormat(i => {\n let probe = probe_objects.filter(p => p.id === i)[0];\n\n let labels = [];\n\n labels.push(`#${probe.id}`);\n\n if (probe.asn_v4) labels.push(`AS${probe.asn_v4}`);\n if (probe.asn_v6 && probe.asn_v6 !== probe.asn_v4)\n labels.push(`AS${probe.asn_v6} (v6)`);\n\n labels.push(`${probe.country_code}`);\n\n // let's keep track of the longest label\n // so we can set the appropiate plot margin\n\n let label = labels.join(' | ');\n if (label.length > longest_label) mutable longest_label = label.length;\n return label;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1981,"value":"mutable longest_label = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"function formatValue(value) {\n return value;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1237,"value":"palette = d3.interpolateSinebow","pinned":false,"hidden":false,"mode":"ojs"},{"id":1192,"value":"interpolator = d3.scaleSequential(palette).domain([1, 64 * 1024])","pinned":true,"hidden":false,"mode":"ojs"},{"id":5794,"value":"countryScale = d3\n .scaleBand()\n .domain(countries)\n .range([1, 64 * 1024])\n .padding(0.1)\n .round(true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6368,"value":"controllerScale = d3\n .scaleBand()\n .domain(allControllers)\n .range([1, 64 * 1024])\n .padding(0.1)\n .round(true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5885,"value":"blahScale = d3\n .scaleLinear()\n .domain([0, 100])\n .range([1, 64 * 1024])","pinned":true,"hidden":false,"mode":"ojs"},{"id":5807,"value":"countries = Array.from(new Set(probe_objects.map((p) => p.country_code)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1829,"value":"tags = new Array(\n ...new Set(probe_objects.map(p => p.tags.map(t => t.slug)).flat())\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1084,"value":"mutable nominatim_down = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":1364,"value":"mutable description = ''","pinned":false,"hidden":false,"mode":"ojs"},{"id":1508,"value":"cached_fetch = async url => {\n let cached = sessionStorage.getItem(url);\n if (cached) return JSON.parse(cached);\n let r = await fetch(url).then(r => r.json());\n sessionStorage.setItem(url, JSON.stringify(r));\n return r;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2222,"value":"range = (start, stop, step = 1) =>\n Array(Math.ceil((stop - start) / step))\n .fill(start)\n .map((x, y) => x + y * step)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3796,"value":"// used for the timeseries tooltip\n\nbisect = {\n const bisect = d3.bisector(d => d.date).left;\n return (x, mx) => {\n const date = x.invert(mx);\n const index = bisect(timeline, date, 1);\n const a = timeline[index - 1];\n const b = timeline[index];\n return b && date - a.date > b.date - date ? b : a;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1442,"value":"chunks = (arr, chunk_size = 2) => {\n let ended = false;\n let i = 0;\n let chunk;\n let chunks = [];\n while (!ended) {\n chunk = arr.slice(i, i + chunk_size);\n chunks.push(chunk);\n\n i += chunk_size;\n ended = i >= arr.length;\n }\n return chunks;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3811,"value":"md`### User input machinery`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5177,"value":"// a simple Date generated onload\nnowFixed = new Date()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4575,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":4968,"value":"defaults = {\n return {\n asn: 3333,\n country: \"NL,BE\",\n location: \"Amsterdam, The Netherlands\",\n radius: 50, // km\n dim: false,\n state: \"up\",\n show_zero: true\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2071,"value":"// These are the choices the user has clicked in the notebook\n\nmutable choices = {\n let _object = {\n start: start,\n stop: stop,\n sort: sortBy.ids[0],\n dim: lowlight\n };\n\n if (location_nominatim !== defaults.location)\n _object.location = location_nominatim;\n if (object.radius !== defaults.radius) _object.radius = object.radius;\n if (object.asn_v4 !== defaults.asn) _object.asn = object.asn_v4;\n if (object.country !== defaults.country) _object.country = object.country;\n if (selected_tags.length !== 0) _object.tags = selected_tags;\n if (lowlight !== defaults.dim) _object.dim = lowlight;\n\n let params = new URLSearchParams(_object).toString();\n return `${document.baseURI.split('?')[0]}?${params}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3997,"value":"viewof _start = new Input(\n new Date(\n (() => {\n if (query['start']) return query['start'];\n let a = new Date();\n a.setDate(a.getDate() - 7);\n return a.toISOString().split(\"T\")[0];\n })()\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4005,"value":"start = _start.toISOString().split(\"T\")[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4001,"value":"viewof _stop = new Input(\n new Date(\n (() => {\n if (query['stop']) return query['stop'];\n let a = new Date();\n a.setDate(a.getDate() + 1);\n return a.toISOString().split(\"T\")[0];\n })()\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4008,"value":"stop = _stop.toISOString().split(\"T\")[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4337,"value":"location_nominatim = object.location","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"import {\n Radio,\n Range,\n Text,\n Input,\n Checkbox,\n Toggle,\n bind\n} from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1879,"value":"import { colorPicker } from \"@shaunlebron/color-picker\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2149,"value":"import { icon } from '@severo/fork-awesome-icons'","pinned":false,"hidden":false,"mode":"ojs"},{"id":3363,"value":"import { what_is } from \"@aguformoso/ripe-atlas-texts\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4577,"value":"import { formValue } from '@mbostock/form-input'","pinned":false,"hidden":false,"mode":"ojs"},{"id":5331,"value":"import { LineChart } from \"@d3/line-with-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"// sometimes the OpenStreetMap Nominatim API is down\n// net::ERR_ADDRESS_UNREACHABLE?\n// fallback to selecting a place on the map by hand\n// viewof _coordinates = worldMapCoordinates({\n// value: nominatim_down ? [-122.27, 37.87] : [0, 0]\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":5697,"value":"import { Plot } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}