31:T57c,viewof object = multi_form(html`

Select probes through one of the following:

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

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

`)32:T574,/* The actual connect chart being displayed at the top! */ connectsChart = plot.plot({ // dark line on top height: 200, width: size.width - 59, marginLeft: margin.left, xLabel: "Date / time (UTC)", yLabel: "Connected RIPE Atlas probes", y: { tickFormat: "d", ticks: d3.max(relativeTimeline, (rt) => rt.value) > 5 ? 5 : d3.max(relativeTimeline, (rt) => rt.value) }, grid: true, marks: [ plot.lineY(relativeTimeline, { x: (d) => new Date(d.timestamp * 1000), y: (d) => d.value, title: (d) => `${d.value} connected probes \n(${new Date(d.timestamp * 1000) .toUTCString() .replace("GMT", "UTC")})`, curve: d3.curveStepAfter }), Plot.ruleY([0]), showControllers ? Plot.lineY( controllerOk, Plot.windowY({ k: maxProbes, // 50, x: (c) => new Date(c.timestamp * 1000), y: (c) => (c.event === "disconnect" ? 1 : -1), // reduce: "sum", // reduce: (ds) => (Math.abs(d3.sum(ds, (d) => d)) / 50) * maxProbes, // let's display the value relative to relativeTimeline reduce: (ds) => Math.abs(d3.sum(ds, (d) => d)), curve: d3.curveStepAfter, stroke: (c) => c.controller //interpolator(controllerScale(c.controller)) }) ) : Plot.ruleY([0]) ] })33:T61d,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 _; let data = statuses .flat() .filter((s) => s.status === state_to_show) .filter((p) => showFirstConnected ? probesFirstConnectedIds.includes(p.id) : true ) .sort((sort) => sortBy.function); // if (sortByReversed === "yes") data.reverse() svg .append("g") .attr("stroke-width", 10) .attr("pointer-events", "all") .selectAll("rect") .data(data) .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(radioInputs.colorBy.function(d)); }) .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:T79f,// a wrapper around d3.reduce reduceConnections = (_connections, startingValue = 0) => { _; // force to re-generate the timeline as new statuses are known if (_connections.length <= 1) return _connections; let reducedTimeline = d3 .sort(_connections, (conn) => conn.timestamp) .reduce( (accumulator, conn, index, array) => { const next = array[index + 1]; const previous = array[index - 1]; let value, valueAccumulated = accumulator[accumulator.length - 1]; if (previous === undefined) return accumulator; if (conn.event === "disconnect") value = valueAccumulated.value - 1; else if (conn.event === "connect") value = valueAccumulated.value + 1; else value = valueAccumulated.value; let datum = { timestamp: conn.timestamp, value: value }; // if (next) datum.timestampUntil = next.timestamp; // else datum.timestampUntil = maxStatus; //////////////// // we keep only one datum for the same second // if (next && datum.timestamp === next.timestamp) { // accumulator.pop(); // // console.log("same timestamp:", datum, next); // } accumulator.push(datum); return accumulator; }, // reduction starts with a 1-item array [ { timestamp: _start.getTime() / 1000, //d3.min(_connections, (conn) => conn.timestamp), value: startingValue // timestampUntil: d3.sort(_connections, (conn) => conn.timestamp)[1] // .timestamp } ] ); // let's fake the last timeline point until $stop or until $latest_7000, whichever happens first // reducedTimeline.push({ // timestamp: d3.min([latest_7000, _stop.getTime() / 1000]), // value: d3.sort(reducedTimeline, (r) => r.timestamp)[ // reducedTimeline.length - 1 // ].value // }); return reducedTimeline; }35:T1056,// 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.id))).length > 1) // sorts.push({ // name: "Disconnect", // ids: ["disconnect"], // function: (p1, p2) => { // let o1 = overlapsOfInterest.filter((o) => o.prb_id == p1.prb_id); // let o2 = overlapsOfInterest.filter((o) => o.prb_id == p2.prb_id); // if (o1.length && o2.length) { // console.log( // ">>>", // p1, // p2, // o1[0], // o2[0], // o2[0].positiveOverlap - o1[0].positiveOverlap // ); // return o2[0].positiveOverlap - o1[0].positiveOverlap; // } // return 0; // } // }); 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.asn_v6))).length > 1) sorts.push({ name: "ASN (v6)", ids: ["asn6"], function: (s1, s2) => s1.asn_v6 - s2.asn_v6 }); 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 }); /* 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; } }); if (Array.from(new Set(probe_objects.map((p) => p.id))).length > 1) sorts.push({ name: "Disconnect", ids: ["disconnect"], function: (p1, p2) => { // console.log(p1.asn_v4 - p2.asn_v4); // let ret = 0; // if (p1.asn_v4 > p2.asn_v4) ret = 1; // else if (p2.asn_v4 > p1.asn_v4) ret = -1; // return ret; let has1 = probesDisconnectedOnMomentOfInterest.has( parseInt(p1.prb_id) ); let has2 = probesDisconnectedOnMomentOfInterest.has( parseInt(p2.prb_id) ); let ret = 0; if (has1 && !has2) ret = 1; else if (!has1 && has2) ret = -1; return ret; // let o1 = overlapsOfInterest.filter((o) => o.prb_id == p1.prb_id); // let o2 = overlapsOfInterest.filter((o) => o.prb_id == p2.prb_id); // if (o1.length && o2.length) { // console.log( // ">>>", // p1, // p2, // o1[0], // o2[0], // o2[0].positiveOverlap - o1[0].positiveOverlap // ); // return o2[0].positiveOverlap - o1[0].positiveOverlap; // } // return 0; } }); // sorts.push({ // name: "Prefix size", // ids: ["pfx_size"], // function: (s1, s2) => s1.prefix_v4_size - s2.prefix_v4_size // }); return sorts; }36:T4b9,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 there's more than one asn_v4 to choose from... // if ([...new Set(probe_objects.map((p) => p.asn_v4))].length > 1) colors.push({ name: "ASN (v4)", ids: ["asn4"], function: (p) => p.asn_v4 }); // if there's more than one asn_v6 to choose from... // if ([...new Set(probe_objects.map((p) => p.asn_v6))].length > 1) // colors.push({ // name: "ASN (v6)", // ids: ["asn6"], // function: (p) => p.asn_v6 //asn6Scale(p.asn_v6) // }); // if there's more than one country code to choose from... // if ([...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) }); // colors.push({ // name: "Prefix size", // ids: ["pfx_size"], // function: (s1, s2) => s1.prefix_v4_size - s2.prefix_v4_size // }); return colors; }37:T65f,// crawls the RIPE Atlas paginated API endpoints // it walks the pages through the `next` pointer async function paginated_fetch( url = "", previousResponse = [], parallel = false ) { // walk the pages in serially // recursive implementation if (parallel === false) return fetch(url) .then((response) => response.json()) .then((newResponse) => { const response = [...previousResponse, ...newResponse["results"]]; // Combine the two arrays if (newResponse["next"]) { url = newResponse["next"]; mutable description = `Fetching page ${new URLSearchParams( url.split("?")[1] ).get("page")}`; return paginated_fetch(url, response); } return response; }); // walk the pages in parallel let theURL = new URL(url); let firstResponse = await d3.json(url); if (firstResponse.next === null) { return firstResponse.results; } else { // console.log( // firstResponse, // firstResponse.results, // firstResponse.results.length // ); let totalPages = firstResponse.count / firstResponse.results.length; // including the first page (current) let subsequentPromises = d3.range(2, totalPages + 1).map((pageNumber) => { let params = new URLSearchParams(theURL.search); params.set("page", pageNumber); return d3 .json(`${theURL.href}?${params.toString()}`) .then((r) => r.results); // we already unpack the results attribute }); let subsequentResponses = await Promise.all(subsequentPromises); return subsequentResponses.flat(); } }38:Tabb,probe_objects = { let urlParams; let chosen_input = object["last-used"]; let probes = []; let dayBeforeStart = structuredClone(_start); dayBeforeStart.setDate(dayBeforeStart.getDate() - 1); let allProbes = probeArchive; if (chosen_input === "location" || chosen_input === "radius") { // Fetch the coordinates from OpenStreetMap Nominatim service // if that's not possible, get them from the map let loc = location_nominatim.replace(" ", "+"); mutable description = `Looking the coordinates for ${loc}`; let coordinates = await fetch( `https://nominatim.openstreetmap.org/search.php?q=${loc}&format=json` ) .then((response) => response.json()) // .then((json) => json[0]) .then( (json) => { let cities = json.filter((j) => j.type === "city"); let administrative = json.filter((j) => j.type === "administrative"); if (cities.length > 0) { mutable nominatim_warning = ""; return cities; } else if (administrative.length > 0) { mutable nominatim_warning = "administrative region"; return administrative; } else { mutable nominatim_warning = "No results!"; return [{}]; } } //["administrative", "city"].includes(j.type)) ) .then((json) => { let res = json[0]; mutable nominatimObject = res; return res; }) .then((j) => [j.lon, j.lat]) .catch((error) => { // Nominatim might be down // flalback to pin-on-the-map selection // mutable nominatim_down = true; // return _coordinates; }); mutable description = `Fetching probes within ${object.radius} km around ${object.location}`; urlParams = new URLSearchParams({ radius: `${coordinates[1]},${coordinates[0]}:${object.radius}` }); urlParams.append("page_size", 500); probes = await paginated_fetch( `https://atlas.ripe.net:443/api/v2/probes/?${urlParams.toString()}`, [], true // parallel ); probes = probes.map((p) => p.id); probes = allProbes.filter((p) => probes.includes(p.id)); } else if (chosen_input == "asn") { mutable description = `Filtering probes in AS${object.asn}`; probes = allProbes.filter( (p) => p.asn_v4 === object.asn || p.asn_v6 === object.asn ); } else if (chosen_input == "country") { let allProbes = probeArchive; mutable description = `Filtering probes in ${object.country}`; probes = allProbes.filter((p) => object.country.split(",").includes(p.country_code) ); // urlParams = new URLSearchParams({ country_code__in: `${object.country}` }); } return probes; }39:T96b,mutable statuses = Object.entries(groupBy(connections, "prb_id")).map( ([prb_id, conn_result]) => { // mutable description = `Recreating connection states for prb=${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 $latest_7000, whichever happens first let fakeStop = d3 .min([new Date(_stop.getTime()), new Date(latest_7000 * 1000)]) .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; // mutable description = "Done."; return res; } )3a:T698,// 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]; if (name === "radius") { label.innerHTML = `${value} km`; } else if (name === "asn_v4") { } console.log(event); // prevent default? 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; // 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; console.log(last_used); }); }); // submit the form straight away if the query uses any of the fields if (query.usesFields) form.dispatchEvent(new CustomEvent("submit", { cancelable: true })); return container; }3b:[{"id":"4334143e361ba9ceed6d5125b5d09bb7a5b1374874da8b7a6503832bc0b7f08883eb9af2ec33552aa16ab168c537c1730220c45820febd08b16cb924a248c101","href":"https://static.observableusercontent.com/files/4334143e361ba9ceed6d5125b5d09bb7a5b1374874da8b7a6503832bc0b7f08883eb9af2ec33552aa16ab168c537c1730220c45820febd08b16cb924a248c101","name":"Events data - RIPE meeting & MAT training.csv","type":"text/csv","lastModified":1666603565051.058,"size":4740}] 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`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4268,"value":"$31","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":7726,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1367,"value":"md`\nYou can share your search using [this link](${choices})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2105,"value":"`${description}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7206,"value":"viewof radioInputs = Inputs.form({\n showOtherTabs: Radio([\"yes\", \"no\"], {\n label: \"Show all probe tags\",\n value: \"no\"\n }),\n 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 }),\n 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 })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6474,"value":"viewof showControllers = Radio([true, false], {\n label: \"Overlay Atlas infrastructure connectivity (requires more data)\",\n value: defaults.overlayInfrastructure //true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7207,"value":"viewof _selectedTags = Inputs.form({\n tagsSystem: Checkbox(\n tags.filter((t) => t.startsWith(\"system-\")),\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 ),\n tagsNoSystem:\n radioInputs.showOtherTabs === \"yes\"\n ? Checkbox(\n tags.filter((t) => !t.startsWith(\"system-\")),\n {\n label: \"\"\n }\n )\n : Checkbox([])\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8090,"value":"connectionsPercontroller = Array.from(\n d3.group(controllerOk, (c) => c.controller).entries()\n)\n .map(([controller, connects]) => {\n let conns = reduceConnections(connects);\n // we just add the controller to each datapoint\n conns.map((c) => {\n c.controller = controller;\n return c;\n });\n return conns;\n })\n .flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":8028,"value":"maxProbes = d3.max(relativeTimeline, (r) => r.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7199,"value":" `${asnsTagged.filter(obj => obj.true).length} ASNs (${ (100.0*asnsTagged.filter(obj => obj.true).length / asnsTagged.length).toFixed(2)}%) are only tagged, ${asnsTagged.filter(obj => obj.false).length} (${ (100.0*asnsTagged.filter(obj => obj.false).length / asnsTagged.length).toFixed(2)}%) ASNs are not tagged at all, ${asnsTagged.filter(obj => obj.both).length} (${ (100.0*asnsTagged.filter(obj => obj.both).length / asnsTagged.length).toFixed(2)}%) are both tagged and not tagged`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7198,"value":"{\n\n let total = probe_objects;\n\n return `Tagged probes: ${probesTagged.length} (${(\n (100.0 * probesTagged.length) /\n total.length\n ).toFixed(2)}% out of ${probe_objects.length})`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7197,"value":"`Probes first connected in this time window: ${\n probesFirstConnected.length\n} ${new Set(probesFirstConnected.map((p) => p.asn_v4))}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7803,"value":"nominatimObject","pinned":false,"hidden":false,"mode":"ojs"},{"id":7670,"value":"objectQuery = {\n let lastUsed = object[\"last-used\"];\n if (lastUsed === \"location\" || lastUsed == \"radius\")\n // kms from input, but city from nominatim\n return `within ${object[\"radius\"]}km of ${nominatimObject.display_name}`;//${nominatim_warning != '' ? `(${nominatim_warning})` : ''}`;//${object[\"location\"]}`;\n else if (lastUsed === \"country\") return `in ${object[\"country\"]}`;\n else if (lastUsed == \"asn\") return `in ${object[\"asn\"]}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7201,"value":"viewof showFirstConnected = Radio([true, false], {\n label: \"Select first-connected probes only\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7196,"value":"defaultQueryFilter = Object.keys(query).filter((q) => fields.includes(q))[0] ||\n defaults.queryFilter","pinned":false,"hidden":false,"mode":"ojs"},{"id":7195,"value":"eventsDataRipeMeetingMatTraining = {\n let csv = await FileAttachment(\n \"Events data - RIPE meeting & MAT training.csv\"\n ).csv({ typed: true });\n\n return csv\n .map((e) => {\n e.date = new Date(\n e.Date.split(\"/\")[2] && e.Date.split(\"/\")[2].length === 4\n ? `${e.Date.split(\"/\")[2]}-${e.Date.split(\"/\")[1]}-${\n e.Date.split(\"/\")[0]\n }`\n : `${e.Date}`\n );\n return e;\n })\n .filter((e) => _start < e.date && e.date < _stop);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7194,"value":"probesFirstConnected = probeArchiveStop.filter((p) =>\n showFirstConnected\n ? new Date(p.first_connected * 1000).getTime() > _start.getTime()\n : true\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7193,"value":"probesFirstConnectedIds = probesFirstConnected.map((p) => p.id)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7192,"value":"asnsFirstConnectedAt = [...d3.group(probe_objects, (p) => p.asn_v4)].map(\n ([asn, probes]) => {\n return {\n asn: asn,\n first_connected: d3.min(probes, (p) => p.first_connected)\n };\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7191,"value":"asnsFirstConnected = asnsFirstConnectedAt.filter(\n ({ asn, first_connected }) => first_connected > _start.getTime() / 1000\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7189,"value":"probesSet = new Set(probes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7188,"value":"relevantControllers = new Set(\n d3\n .group(\n controllerOk.filter((c) => probesSet.has(c.prb_id)),\n (c) => c.controller\n )\n .keys()\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7187,"value":"controllerTimelines = Array.from(\n d3\n .group(\n controllerOk.filter((c) => relevantControllers.has(c.controller)),\n (c) => c.controller\n )\n .entries()\n)\n .map(([controller, controllerConnections]) => {\n let controllerTimeline = reduceConnections(controllerConnections);\n controllerTimeline.map((d) => (d.controller = controller));\n return controllerTimeline;\n })\n .flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1682,"value":"sortBy = radioInputs.sortBy","pinned":false,"hidden":false,"mode":"ojs"},{"id":7184,"value":"connectionsTagged = connections.filter((conn) =>\n new Set(probesTagged.map((p) => p.id)).has(conn.prb_id)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7183,"value":"connectionsNotTagged = connections.filter(\n (conn) => !new Set(probesTagged.map((p) => p.id)).has(conn.prb_id)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7182,"value":"relativeTimelineWithTags = [\n ...reduceConnections(\n connectionsTagged,\n new Set(connectionsTagged.map((c) => c.prb_id)).size\n ).map((conn) => {\n conn.tagged = true;\n return conn;\n }),\n ...reduceConnections(\n connectionsNotTagged,\n new Set(connectionsNotTagged.map((c) => c.prb_id)).size\n ).map((conn) => {\n conn.tagged = false;\n return conn;\n })\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":7181,"value":"probesTagged = probe_objects.filter((p) => {\n let probeTags = p.tags.map((tag) => tag.slug);\n return (\n new Set([...probeTags].filter((x) => new Set(selected_tags).has(x))).size >\n 0\n );\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7180,"value":"_asnsTagged = new Array(\n ...d3.group(probe_objects, (p) => p.asn_v4).entries()\n).map(([asn, asnProbeArray]) => {\n // a mapping asn --> [hasTag, hasTag, hasTag]\n let isTaggedArray = asnProbeArray.map((p) => {\n let asnTags = p.tags.map((tag) => tag.slug);\n return (\n new Set([...asnTags].filter((x) => new Set(selected_tags).has(x))).size >\n 0\n );\n });\n\n return { asn: asn, isTaggedArray: isTaggedArray };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7179,"value":"asnsTagged = _asnsTagged.reduce((prev, curr, i, array) => {\n let isTagged = curr[\"isTaggedArray\"];\n let asn = curr[\"asn\"];\n return prev.concat([\n {\n asn: asn,\n true: !isTagged.includes(false),\n false: !isTagged.includes(true),\n both: isTagged.includes(true) && isTagged.includes(false)\n }\n ]);\n}, [])","pinned":false,"hidden":false,"mode":"ojs"},{"id":7178,"value":"Plot.plot({\n height: 200, //selected_tags.length ? 0 : 200, // making room for larger tooltips when using tags\n width: size.width - 59,\n marginLeft: margin.left + 5,\n grid: true,\n color: { legend: true },\n marks: [\n Plot.line(\n controllerTimelines,\n Plot.windowY({\n k: 1,\n x: (c) => new Date(c.timestamp * 1000),\n y: (c) => c.value,\n reduce: \"sum\", //\"sum\",\n curve: \"step\", //\"step\",\n stroke: (c) => c.controller\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7174,"value":"selected_tags = [..._selectedTags.tagsSystem, ..._selectedTags.tagsNoSystem]","pinned":false,"hidden":false,"mode":"ojs"},{"id":7173,"value":"// utcTickInterval = d3.utcTickInterval(_start, _stop, bins)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7172,"value":"mutable momentOfInterest = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":7169,"value":"_durationSeconds = (_stop - _start) / 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":8197,"value":"cleanConnections = (connections) =>\n [...d3.group(connections, (d) => d.prb_id)]\n .map(([_id, conns]) => conns)\n .map((conns) => conns.sort((d) => d.timestamp))\n .map((conns) => {\n return conns.reduce((acc, conn, index, array) => {\n const previous = array[index - 1];\n if (previous == undefined) return [conn];\n\n // Atlas might be missing disconnect events\n if (previous.event != conn.event) acc.push(conn);\n\n return acc;\n }, []);\n })\n .flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":6583,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":7167,"value":"relativeTimeline = reduceConnections(\n // connections\n cleanConnections(connections)\n .filter((c) => new Date(c.timestamp * 1000).valueOf() !== _start.valueOf())\n .filter((c) =>\n showFirstConnected ? probesFirstConnectedIds.includes(c.prb_id) : true\n ),\n showFirstConnected ? 0 : startConnected.length\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7166,"value":"// startConnected = statuses\n// .map((t) =>\n// t.filter(\n// (s) =>\n// s.start !== s.end &&\n// new Date(s.start * 1000).valueOf() === _start.valueOf() &&\n// s.status === \"up\"\n// )\n// )\n// .flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":8314,"value":"startConnected = probeArchiveStart.filter(\n (p) => probes.includes(p.id) && p.status.id === 1\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\nincorporate \"Inputs: Form\" from https://observablehq.com/@observablehq/input-form
\n\ndistance from places (e.g. cities)
\n\nmore probe selectors (country, bounding box, network-related)
\n\n aggregate on ASN / country / pfx
\n\n toggle bewteen state (up/down) and event (connected/disconnected)
\n\n color by country (deterministic in a range of 1-?)
\n`","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":7163,"value":"// overlapsOfInterest = statuses.map((probeStatuses) => {\n// let positiveOverlap = probeStatuses\n// .filter((probeStatus) => probeStatus.status === \"down\")\n// .map((probeStatus) => {\n// const t1 = d3.max([\n// momentOfInterest[0].getTime() / 1000,\n// probeStatus.start\n// ]);\n// const t2 = d3.min([\n// momentOfInterest[1].getTime() / 1000,\n// probeStatus.end\n// ]);\n// return t2 - t1;\n// })\n// .filter((overlap) => overlap > 0);\n\n// positiveOverlap = d3.sum(positiveOverlap);\n// probeStatuses[0].prb_id;\n// return { prb_id: probeStatuses[0].prb_id, positiveOverlap };\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":7162,"value":"probesDisconnectedOnMomentOfInterest = new Set(\n connections\n .filter(\n (conn) =>\n conn.event === \"disconnect\" &&\n new Date(conn.timestamp * 1000) >= momentOfInterest[0] &&\n new Date(conn.timestamp * 1000) <= momentOfInterest[1]\n )\n .map((conn) => conn.prb_id)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1683,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":5831,"value":"$36","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 // keep track if the query uses any of the fields\n queryObject.usesFields =\n Object.keys(queryObject).map((k) => fields.includes(k)).length > 0;\n\n return queryObject;\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":260,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":7158,"value":"probeArchiveStart = {\n mutable description = `Fetching all probes`;\n\n let dayBefore = structuredClone(_start);\n dayBefore.setDate(dayBefore.getDate() - 1);\n\n return d3\n .json(\n `https://atlas.ripe.net/api/v2/probes/archive/?format=json&date=${\n dayBefore.toISOString().split(\"T\")[0]\n }&status=1,2`\n )\n .then((r) => r.results);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7157,"value":"probeArchiveStop = {\n mutable description = `Fetching all probes`;\n\n let dayBefore = structuredClone(_stop);\n dayBefore.setDate(dayBefore.getDate() - 1);\n\n return d3\n .json(\n `https://atlas.ripe.net/api/v2/probes/archive/?format=json&date=${\n dayBefore.toISOString().split(\"T\")[0]\n }&status=1,2`\n )\n .then((r) => r.results);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7156,"value":"probeArchive = {\n let probeArchiveIds = probeArchiveStart.map((p) => p.id);\n\n let probeArchiveBoth = probeArchiveStart.concat(\n probeArchiveStop.filter((p) => !probeArchiveIds.includes(p.id))\n );\n return probeArchiveBoth;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7793,"value":"mutable nominatimObject = {\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":7749,"value":"mutable nominatim_warning = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"probes = probe_objects\n .filter((p) => p.status.name !== \"Abandoned\")\n .map((p) => p.id)","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"/*\nconnections come from two sources:\n1. Probe status as reported by the probe-archive on the day before `start`\n2. Connect/disconnect events as reported by measurement ID 7000\n*/\nconnections = {\n let probeChunks = chunks(probes, 500);\n\n let promises = probeChunks.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 let probeArchiveConns = probe_objects.map((p) => {\n // fake the status reported by msm 7000 at :00:00 of _start\n return {\n prb_id: p.id,\n event: p.status.name === \"Connected\" ? \"connect\" : \"disconnect\",\n timestamp: _start.getTime() / 1000, //p.status.since,\n asn: p.asn_v4 || p.asn_v6,\n prefix: p.prefix_v4 || p.prefix_v6\n };\n });\n return probeArchiveConns.concat(conns.flat());\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7275,"value":"/*\nKeep track of the latest timestamp for msm ID 7000 (all probes) \n*/\nlatest_7000 = {\n let latest_subset = d3.max(connections, (conn) => conn.timestamp);\n let latest_all;\n\n if (new Date(stop) > nowFixed) {\n latest_all = await d3.json(\n `https://atlas.ripe.net:443/api/v2/measurements/7000/results/?start=${latest_subset}`\n ); // no `stop`, all probes\n latest_all = d3.max(latest_all, (l) => l.timestamp);\n } else {\n latest_all = new Date(stop).getTime() / 1000;\n }\n return latest_all;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6393,"value":"usedControllers = Array.from(d3.group(connections, (c) => c.controller).keys())","pinned":false,"hidden":false,"mode":"ojs"},{"id":6307,"value":"controllerOk = {\n let res = [];\n if (showControllers) {\n mutable description = \"Fetching Atlas infrastructure data...\";\n res = 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 }\n\n mutable description = \"Done.\";\n\n return res;\n}","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":581,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":1328,"value":"mutable _ = 0","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":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":1237,"value":"palette = d3.interpolateSinebow","pinned":false,"hidden":false,"mode":"ojs"},{"id":1192,"value":"interpolator = d3.scaleSequential(palette).domain([1, 64 * 1024])","pinned":false,"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":false,"hidden":false,"mode":"ojs"},{"id":7147,"value":"asn6Scale = d3\n .scaleBand()\n .domain([...new Set(probe_objects.map((p) => p.asn_v6))])\n .range([1, 64 * 1024])\n .padding(0.1)\n .round(true)","pinned":false,"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":false,"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).sort()","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":"// we're exceeding the sessionStorage quota :(\n// cached_fetch = async (url) => {\n// let cached = localStorage.getItem(url);\n// if (cached) {\n// console.log(`cache hit ${url} ${cached}`);\n// return JSON.parse(cached);\n// }\n\n// console.log(`cache miss ${url}`);\n// let r = await d3.json(url);\n\n// \n// // localStorage.setItem(url, JSON.stringify(r));\n// return r;\n// }","pinned":true,"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":7233,"value":"fields = [\"asn\", \"location\", \"radius\", \"country\"]","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 queryFilter: \"country\", // default field to query for\n dim: false,\n state: \"up\",\n show_zero: true,\n overlayInfrastructure: false\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":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":7140,"value":"import { on } from \"@fil/plot-onclick-experimental-plugin@255\"","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 as plot, addTooltips } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7524,"value":"import { LineChart } from \"@d3/line-with-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8165,"value":"import { event, pixel } from \"@ripencc/matomo-tracking\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8138,"value":"{\n // let's emit events only when the chart changes\n chart;\n\n event({\n action: \"Input\",\n name: `country=${object.country} asn=${object.asn} location=${object.location} radius=${object.radius}`\n });\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}