31:T760,viewof userInput = { const labelOptions = [ { value: "yes", label: "yes" }, { value: "no", label: "no" }, { value: "search", label: "only search results" }, { value: "notCovered", label: "only ASNs not covered" } ]; const asnNameOptions = [ { value: "yes", label: "yes" }, { value: "short", label: "short" }, // this bloated the labels too much // { value: "shortWithAsn", label: "short with ASN" }, { value: "no", label: "no" } ]; return Inputs.form({ columns: Inputs.text({ label: "Columns", type: "number", value: query.columns || 5, // max: countries.length, min: 1 }), spacing: Inputs.text({ label: "Spacing", type: "number", value: query.spacing || 9, min: 1 }), radius: Inputs.text({ label: "Radius", type: "number", value: query.radius || 40, min: 1 }), showLabels: Inputs.radio(labelOptions, { label: "Show labels", format: (label) => label.label, value: labelOptions.filter((l) => l.value === query.labels)[0] || labelOptions.filter((l) => l.value === "no")[0] }), showLabelsN: Inputs.range([0, 100], { label: "Show labels for the top N ASNs", value: 25, step: 1 }), showAsnNames: Inputs.radio(asnNameOptions, { label: "Show ASN names", format: (label) => label.label, value: asnNameOptions.filter((l) => l.value === query.asnnames)[0] || asnNameOptions.filter((l) => l.value === "no")[0] }), showCountryNames: Inputs.radio(["yes", "no"], { label: "Show country names", value: query.countrynames || "yes" }), color: Inputs.color({ label: "Main color", value: "#83dd88" }), labelColors: Inputs.radio(["black", "white"], { label: "Color for labels", value: "black" }) }); }32:Tafd,chartVegaLegend = { // vl.vega.scheme("probeScheme", [secondaryColor, userInput.color]); // color scheme: ASN has a probe --> dark green. secondary color: "#dcede6" // vl.vega.scheme("probeSchemeLegend", ["lightgrey", "grey"]); const localScheme = { domain: [true, false], range: ["#83dd88", "#83dd8855"] }; return ( vl .layer( vl .markArc({ outerRadius: parseInt(userInput.radius), padAngle: 0.03, tooltip: true }) .encode( vl.theta().fieldQ("percentage").stack(true).aggregate("sum"), // `radius2` is also known as `innerRadius` vl.radius2().fieldQ("innerRadius"), vl.order().fieldQ("ranking"), vl.fill().fieldN("hasProbes").scale(localScheme).legend(null), vl.tooltip({ field: "tooltip" }) ), vl .markText({ radius: parseInt(userInput.radius) + 40, dy: -20, color: "#5E6D6E" // align: "left" }) .encode( vl.theta().fieldQ("percentage").stack(true), vl.order().fieldQ("ranking"), vl.text().field("label") // AS1234 ), // vl // .markPoint({ // x: parseInt(userInput.radius) + 10, // shape: "arrow", // angle: 45 // }) // .encode( // vl.theta().fieldQ("percentage").stack(true), // vl.order().fieldQ("ranking") // ), vl .markText({ fontSize: parseInt(userInput.radius) * 0.8, fontWeight: "bold", color: userInput.labelColors }) .encode(vl.text().field("country")), vl .markText({ fontSize: parseInt(userInput.radius) * 0.2, dy: parseInt(userInput.radius) * 0.5, fontWeight: "normal", color: userInput.labelColors }) .encode(vl.text().field("countryName")) ) // set width and height? // (we need to have them otherwise facet.header.labels move away from the center) .width(5) .height(5) .facet( vl .facet({ header: { // more info on options in: // https://vega.github.io/vega-lite/docs/header.html labelFontSize: 0 } }) // facets per `country` .fieldN("country") .title(null) ) .spacing(0) .columns(1) .data(chartDataLegend) .config({ background: "#f0f8ff" // encoding: { // theta: { field: "percentage", type: "quantitative", stack: true } // } }) ); // in case we need chart-wide configs }33:T1122,chartVega = { vl.vega.scheme("probeScheme", [secondaryColor, userInput.color]); // color scheme: ASN has a probe --> dark green. secondary color: "#dcede6" vl.vega.scheme("searchScheme", ["transparent", "red"]); vl.vega.scheme("searchSchemeLabels", [userInput.labelColors, "red"]); const localScheme = { domain: [true, false], // range: ["green", "yellow"] // range: [userInput.color, secondaryColor] range: [ userInput.color, `rgba(${secondaryColor.r}, ${secondaryColor.g}, ${secondaryColor.b}, ${secondaryColor.opacity})` ] }; return ( vl .layer( vl .markArc({ outerRadius: parseInt(userInput.radius), padAngle: 0.03, tooltip: true }) .encode( vl.theta().fieldQ("percentage").stack(true).aggregate("sum"), // `radius2` is also known as `innerRadius` vl.radius2().fieldQ("innerRadius"), vl.order().fieldQ("ranking"), vl .fill() .fieldN("hasProbes") .scale( localScheme // { scheme: "probeScheme" } ) .legend({ orient: "top", direction: "vertical", title: "", // padding: 0, labelColor: userInput.labelColors, labelFontSize: 10, // labelFontWeight: "regular", labelExpr: `{'true': 'ASN has at least ${form.minProbes} probe${ form.minProbes === 1 ? "" : "s" }', 'false': 'ASN is not covered'}[datum.label]` }), vl .stroke() .fieldN("inSearchResults") .scale({ scheme: "searchScheme" }) .legend(false), vl.tooltip({ field: "tooltip" }) ), userInput.showLabels.value != "no" ? vl .markText({ radius: parseInt(userInput.radius) + 25 // + parseFloat(form.labelPadding) }) .encode( vl.theta().fieldQ("percentage").stack(true), vl.order().fieldQ("ranking"), vl.text().field("label"), // AS1234 vl .color() .fieldN("inSearchResults") .scale({ scheme: ["yes", "notCovered"].includes( userInput.showLabels.value ) ? "searchSchemeLabels" : "searchScheme" }) .legend(false) ) : [], vl .markText({ fontSize: parseInt(userInput.radius) * 0.8, fontWeight: "bold", color: userInput.labelColors }) .encode(vl.text().field("country")), userInput.showCountryNames === "yes" ? vl .markText({ fontSize: parseInt(userInput.radius) * 0.2, dy: parseInt(userInput.radius) * 0.5, fontWeight: "normal", color: userInput.labelColors }) .encode(vl.text().field("countryName")) : [] ) // set width and height? // (we need to have them otherwise facet.header.labels move away from the center) .width(5) .height(5) .facet( vl .facet({ header: { // more info on options in: // https://vega.github.io/vega-lite/docs/header.html labelFontSize: 0 } }) // facets per `country` .fieldN("country") .title(false) ) // .title({ // text: "RIPE Atlas probe coverage", // subtitle: `Showing ASNs covering at least ${form.threshold}% of the country's population (${dateWithData})`, // color: userInput.labelColors, // subtitleColor: userInput.labelColors // }) .spacing(parseFloat(userInput.spacing)) .columns(parseInt(userInput.columns)) .data(chartData) .config({ background: "transparent" // encoding: { // theta: { field: "percentage", type: "quantitative", stack: true } // } }) ); // in case we need chart-wide configs }34:T978,chartData = aspopData_ .map((apd) => apd.bigAsns) .flat() .map((asn) => { const inSearchResults = searchCombinedResults.filter((a) => a[9] === asn[9]).length === 1; // as number const hasProbes = asnsWithProbes__.filter((a) => a === parseInt(asn[1].replace("AS", ""))) .length >= form.minProbes; const isOthers = asn[1].indexOf("XXX") > 0; let label; if (isOthers) label = ""; else if (userInput.showAsnNames.value === "no") // AS1234 label = asn[1]; else if (userInput.showAsnNames.value === "yes") label = `${asn[2]}`; else if (userInput.showAsnNames.value === "short") label = `${asn[2].split(" ")[0]}`; // else if (userInput.showAsnNames.value === "shortWithAsn") // label = `${asn[2].split(" ")[0]} (${asn[1]})`; const countryPop = aspopData_.filter((a) => a.country === asn[3])[0] .population; const vizPop = d3.max(aspopData_.map((a) => a.population)); const ratioPop = countryPop / vizPop; let country = getCountry(asn[3]); let countryName = regions2Countries(asn[3])[0] .Country.split(" ") .map((str) => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()) .join(" ") || country?.name; if (countryName.length > 10) countryName = `${countryName.substring(0, 10)}...`; // the ranking of that ASN in that country return { country: asn[3], asn: asn[9], // integer as: asn[1], // AS1234 percentage: asn[5], ranking: asn[0], hasProbes: hasProbes, inSearchResults: inSearchResults, innerRadius: parseInt(userInput.radius) * (isOthers ? 0.95 : 0.8), // * ratioPop, radius: parseInt(userInput.radius) * ratioPop, label: label, //isOthers ? "" : asn[1], countryName: countryName, tooltip: `${asn[1]} \n ${asn[5].toFixed( 1 )}% of users in ${countryName} (${asn[3]})` // label: inSearchResults ? asn[1] : "" }; }) .map((a) => { // transform labels according to // userInput.showLabels.value // change only if it doesn't have probes and the option is set if (userInput.showLabels.value === "notCovered" && a.hasProbes) a.label = ""; return a; }) .map((a) => { if (a.ranking > userInput.showLabelsN) a.label = ""; return a; }) // no need of sorting the data beforehand // .sort((a, b) => b.percentage - a.percentage)35:T4fd,chartDataLegend = [ { country: "CC", asn: 65536, as: "AS65536", percentage: 40, ranking: 1, hasProbes: true, inSearchResults: false, innerRadius: 32, radius: 40, markTextRadius: 120, label: ["A single ASN with probes", "painted in dark color."], //, "⇙"], countryName: "Country Code", tooltip: "AS65537 40% of users in Country Code (CC)" }, { country: "CC", asn: 65537, as: "AS65537", percentage: 35, ranking: 2, hasProbes: false, inSearchResults: false, innerRadius: 32, radius: 40, markTextRadius: 100, label: [ "A single ASN without probes", "painted in light color." // "Please apply for a probe!" ], countryName: "Country Code", tooltip: "AS65537 35% of users in Country Code (CC)" }, { country: "CC", asn: 65538, as: "AS65538", percentage: 25, ranking: 2, hasProbes: false, inSearchResults: false, innerRadius: 38, radius: 40, markTextRadius: 100, label: [ "Multiple ASNs, each covering less", `than ${threshold}% of CC's population,`, "grouped under a thin arc." ], countryName: "Country Code", tooltip: ["AS65538", "10% of users in Country Code (CC)"] } ]36:T507,dataRipencc = { let date = new Date(input.date); mutable dateWithData = date.toISOString().split("T")[0]; let fetched = false; let attempts = 0; let response; while (!fetched && attempts < 7) { attempts += 1; let [day, month, year] = [ `${date.getDate()}`.padStart(2, "0"), `${date.getMonth() + 1}`.padStart(2, "0"), `${date.getFullYear()}` //.padStart(4, "0") ]; let ddmmyyyy = `${day}${month}${year}`; let url = `https://sg-pub.ripe.net/petros/population_coverage/data_sources/data${ddmmyyyy}_0000.json`; response = await fetch(url) .then((r) => { let j; try { j = r.json(); } catch { return Promise.reject(new Error("failed to parse json")); } fetched = true; return j; }) .catch((err) => { date.setDate(date.getDate() - 1); mutable dateWithData = date.toISOString().split("T")[0]; mutable notifications = `Data was unavailable for ${ input.date.toISOString().split("T")[0] }. Date was set to ${date.toISOString().split("T")[0]}`; fetched = false; }); await new Promise((resolve) => { setTimeout(() => { resolve(); }, 1000); }); } return response; }37:T44a,aspopData_ = aspop_.map((o) => { const country = o.country; const aspop = o.aspoptext; const smallAsns = aspop.filter((l) => l[5] <= threshold); const smallAsnsShare = d3.sum(smallAsns, (s) => s[5]); let bigAsns = aspop.filter((l) => l[5] > threshold); bigAsns = bigAsns.sort((d) => d[5]).reverse(); let bigAsnsProperties = { percentage: d3.sum(bigAsns, (s) => s[5]) }; let smallAsnsProperties = { percentage: d3.sum(smallAsns, (s) => s[5]) }; let missingAsnsProperties = { percentage: 100 - smallAsnsProperties.percentage - bigAsnsProperties.percentage }; const smallAsnsCombined = [ bigAsns.length + 1, "ASXXX", "Others", country, d3.sum(smallAsns, (s) => s[4]), smallAsnsProperties.percentage + missingAsnsProperties.percentage, d3.sum(smallAsns, (s) => s[6]), d3.sum(smallAsns, (s) => s[7]) ]; bigAsns.push(smallAsnsCombined); const population = d3.sum(bigAsns, (a) => a[4]); // bigAsns = bigAsns.map((a) => { // a.push(totalPop); // return a; // }); return { country, population, bigAsns }; })38:[{"id":"4ab1c79d90aa1d6897f44fdacfa688363e5226fcfb353cbcfde833636893e1b4ab48021c4ac5d68466f3bb5f84c48f078866667ac8fbf34257f41691c6f84540","href":"https://static.observableusercontent.com/files/4ab1c79d90aa1d6897f44fdacfa688363e5226fcfb353cbcfde833636893e1b4ab48021c4ac5d68466f3bb5f84c48f078866667ac8fbf34257f41691c6f84540","name":"ipmap-worlds.json","type":"application/json","lastModified":1716540676686.055,"size":22781759}] 2f:{"title":"RIPE Atlas network coverage","cells":[{"id":1028,"value":"# RIPE Atlas network coverage\n\n${banner}\n\n${what_is}\n\nIn this visualisation each ring is a country, split into the ASNs operating in that country. The size of each ASN represents its estimated market share (data from APNIC).","pinned":false,"hidden":false,"mode":"md"},{"id":2904,"value":"viewof input = {\n return Inputs.form({\n country: Inputs.text({\n label: \"Countries\",\n type: \"text\",\n value: query.country || \"NL,AE\",\n submit: true\n }),\n search: Inputs.text({\n placeholder: \"ASN or network's name\",\n label: \"Search \",\n value: query.search || \"\",\n submit: true\n }),\n date: Inputs.date({\n label: \"Date\",\n value: query.date || new Date()\n })\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3552,"value":"$${notifications!=''?bannerGenerator('Note
' + notifications, '#F5F5F5'):''}","pinned":false,"hidden":false,"mode":"md"},{"id":2382,"value":"chartVega\n .title({\n text: \"RIPE Atlas probe coverage\",\n subtitle: `Showing ASNs covering at least ${form.threshold}% of the country's population (${dateWithData})`,\n color: userInput.labelColors,\n subtitleColor: userInput.labelColors\n })\n .render({ renderer: \"svg\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3587,"value":"{\n let svg = await chartVegaLegend\n .title({\n text: \"LEGEND\",\n color: \"#5d8aa8\",\n subtitle: \"About this chart\",\n subtitleColor: \"#5d8aa8\"\n })\n .render({ renderer: \"svg\" });\n // await rough.svg(svg);\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2858,"value":"## Adapt this visualisation!\n\nWith the inputs below you can customise the visualisation above to fit your needs...","pinned":false,"hidden":false,"mode":"md"},{"id":2692,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3160,"value":"### Advanced control panel","pinned":false,"hidden":false,"mode":"md"},{"id":3155,"value":"viewof form = {\n\n \n return Inputs.form({\n threshold: Inputs.range([0, 5], {\n label: \"Show ASNs above the following percentage:\",\n value: 1.0,\n step: 0.5\n }),\n minProbes: Inputs.range([1, 5], {\n label: 'Min. probes to consider an ASN \"covered\"',\n value: 1,\n step: 1\n }),\n labelMaxChars: Inputs.range([0, 100], {\n label: \"Label max. chars\",\n value: 50,\n step: 1\n }),\n labelPadding: Inputs.range([0, 100], {\n label: \"Label padding\",\n value: 25,\n step: 1\n })\n})}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3585,"value":"## Development zone ↓\n\nDo NOT include any of the following on your work\n\nYou've been warned!","pinned":false,"hidden":false,"mode":"md"},{"id":3584,"value":"

\n \n

\n ${await chartVega.title({\n text: \"RIPE Atlas probe coverage\",\n subtitle: `Showing ASNs covering at least ${form.threshold}% of the country's population (${dateWithData})`,\n color: userInput.labelColors,\n subtitleColor: userInput.labelColors\n }).render({ renderer: \"svg\" })}\n

\n\n

\n ${await chartVegaLegend.title({text:'LEGEND', color:'#5d8aa8', subtitle:'About this chart', subtitleColor:'#5d8aa8'}).render({ renderer: \"svg\" })}\n

","pinned":false,"hidden":false,"mode":"html"},{"id":3583,"value":"chartConcat.render({ renderer: \"svg\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3582,"value":"

\n \n

\n ${await chartVegaLegend.title({text:'LEGEND', color:'#5d8aa8', subtitle:'About this chart', subtitleColor:'#5d8aa8'}).render({ renderer: \"svg\" })}\n

","pinned":false,"hidden":false,"mode":"html"},{"id":3581,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3580,"value":"chartConcat = vl\n .vconcat(chartVega, chartVegaLegend)\n .config({ concat: { spacing: 40 } })\n .title({\n text: \"RIPE Atlas probe coverage\",\n subtitle: `Showing ASNs covering at least ${form.threshold}% of the country's population (${dateWithData})`,\n color: userInput.labelColors,\n subtitleColor: userInput.labelColors\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3108,"value":"mdPlus`\n## TO DOs\n\n- [ ] show ASNs _partially_ covered by probes (covered by 1, 2 probes only)\n- [ ] explore with ring size proportional to population (or other country-level metrics)\n- [ ] diff (before / after). Consider starting a separate project (different use-cases)?\n- [ ] include regions as input parameters, e.g. SEE\n- [ ] higher resolution PNG\n- [ ] _YOUR_ idea here?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3347,"value":"mdPlus`\n## DONEs\n\n- [X] handle network names better (they can overflow quite a lot)\n- [X] option to choose colors\n- [X] expose all parameters as query parameters through URL\n- [X] better tooltip\n- [X] independent cells for query and styling\n- [X] push \"other networks\" to the end of the ring (they're currently mixed with those >1%)\n- [X] \"other networks\" visibly different than the rest\n- [X] better labels: labels in the middle of rings (_theta_ not being captured)\n- [X] max. number of labels input\n- [X] toggle for labels on uncovered ASNs\n- [X] country codes are being pushed downwards bu thinner arc\n- [X] handle days with missing data (in case the backend hasn't run that day yet?)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1968,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":3578,"value":"JSON.stringify(chartConcat.toObject())","pinned":false,"hidden":false,"mode":"ojs"},{"id":2489,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3575,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":3542,"value":"secondaryColor = {\n let c = d3.color(userInput.color);\n c.opacity = 1 / 3;\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"The following are large ASNs (>${threshold}% market share) which are _not covered_ by RIPE Atlas.","pinned":false,"hidden":false,"mode":"md"},{"id":851,"value":"viewof table = Inputs.table(\n searchCombinedResults.filter((s) => s[1] != \"ASXXX\"),\n {\n columns: [1, 2, 3, 5],\n header: {\n 1: \"ASN\",\n 2: \"Network name\",\n 3: \"Country\",\n 5: \"Population covered (in that country)\"\n },\n format: { 5: (d) => `${d.toFixed(1)}%` }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1170,"value":"threshold = form.threshold //1.0 // percent","pinned":false,"hidden":false,"mode":"ojs"},{"id":1781,"value":"viewof message = Inputs.text({\n label: \"Message\",\n value: query.message || \"We need RIPE Atlas probes in the following networks:\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1489,"value":"searchCombinedTexts = {\n const asnStringMaxLength = d3.max(\n searchCombinedResults.map((a) => a[1].length)\n );\n\n let arr = searchCombinedResults.map(\n (i) =>\n ` - ${i[1].padEnd(asnStringMaxLength, \" \")} ${i[2]} ${\n countries.length > 1 ? `(${i[3]})` : \"\"\n }`\n );\n arr.unshift(\"\");\n arr.unshift(message);\n arr.unshift(\"\");\n arr.unshift(\"RIPE Atlas probe coverage\");\n return arr.join(\"\\n\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1264,"value":"searchCombined = (input.search || \"\").replace(\" \", \"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1250,"value":"// we perform two searches:\n// - free-text search on all fields except the ASN integer\n// - exact-match on the ASN integer\n\nsearchCombinedResults = {\n if (searchCombined === \"\") return [];\n\n return bigAsns.filter((a) =>\n searchCombined\n .split(\",\")\n .map(\n (s) =>\n a[9] === parseInt(s) ||\n a[2].toUpperCase().indexOf(s.toUpperCase()) >= 0\n )\n .flat()\n .some((a) => a === true)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":874,"value":"asnsWithoutProbes = bigAsns.filter(\n (l) => !probeIds.includes(parseInt(l[1].replace(\"AS\", \"\")))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1041,"value":"bigAsns = aspopData_.map((a) => a.bigAsns).flat()\n// .filter((l) => l[1] != \"ASXXX\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1222,"value":"// adding some fields in order to improve the search capabilities\n\nbigAsnsExtended = bigAsns.map((asn) => {\n asn.push(parseInt(asn[1].replace(\"AS\", \"\")));\n return asn;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"country = input.country //\"BA,HR,SI,RS,ME,AL,MK\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"countries = regions2Countries(\n country.split(\",\").map((cc) => cc.toUpperCase())\n).map((c) => c.iso2) // country.split(\",\").map((cc) => cc.toUpperCase())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1927,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":3550,"value":"mutable notifications = ''","pinned":false,"hidden":false,"mode":"ojs"},{"id":3557,"value":"mutable dateWithData = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3549,"value":"mutable notificationsList = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":3548,"value":"mutable notificationSwitch = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1934,"value":"aspop_ = countries\n .map((country) => {\n let dataCc = dataRipencc.countries[country.toUpperCase()].apnic;\n\n if (dataCc === false) {\n return {};\n }\n\n let aspoptext = dataCc.map((asn, i) => {\n let label = asn[\"autnum\"];\n label = getName(parseInt(asn[\"as\"]))[0].name; // TODO select naming strategy?\n // if (asn[\"as-descr\"]) label = `${label} ${asn[\"as-descr\"]}`;\n if (label.length >= form.labelMaxChars) {\n label = label.substring(0, form.labelMaxChars - 3);\n label = `${label}...`;\n }\n\n return [\n i + 1,\n `AS${asn.as}`,\n label,\n country,\n asn.samples,\n asn.percent,\n 0,\n 0,\n 0\n ];\n });\n\n return { country, aspoptext };\n })\n .filter((res) => \"country\" in res)","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"probes_ = {\n let promises = countries.map(async (country) => {\n let connected = await paginated_fetch(\n `https://atlas.ripe.net/api/v2/probes?country_code=${country}&format=json&status=1&fields=id,asn_v4,asn_v6`\n );\n\n let disconnected = await paginated_fetch(\n `https://atlas.ripe.net/api/v2/probes?country_code=${country}&format=json&status=2&fields=id,asn_v4,asn_v6`\n );\n\n return {\n country,\n probes: [\n ...connected,\n ...disconnected.filter(\n (p) => !connected.map((p) => p.id).includes(p.id)\n )\n ]\n };\n });\n\n return Promise.all(promises);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":939,"value":"probeIds = Array.from(\n new Set(\n probes_\n .map((p) => p.probes)\n .flat()\n .map((p) => [p.asn_v4, p.asn_v6])\n .flat()\n .filter((asn) => asn != null)\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3220,"value":"asnsWithProbes__ = probes_\n .map((ps) => ps.probes)\n .flat()\n .map((p) => [p.asn_v4, p.asn_v6])\n .flat()\n .filter((a) => a != null)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3370,"value":"## External dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":3367,"value":"// isocountries = {\n// const response = await d3.json(\n// \"https://rd-www-1.ripe.net/aformoso/libs/110m_countries.geojson\"\n// // they've removed the cors-header :()\n// // \"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_countries.geojson\"\n// );\n// return response.features.map((r) => r.properties);\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":3382,"value":"// getCountry = (cc) => isocountries.filter((iso) => iso.iso_a2 === cc)[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3570,"value":"// Visionscarto doesn't list countries by iso2 (it does by iso3)\n\ngetCountry = (cc) =>\n ipmapLocations.locations.filter((l) => l.countryCodeAlpha2 === cc)[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3569,"value":"// from https://ipmap.ripe.net/api/v1/worlds/all/\nipmapLocations = FileAttachment(\"ipmap-worlds.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"import { paginated_fetch } from \"@aguformoso/internet-outages-as-seen-by-ripe-atlas\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1011,"value":"import { query } from \"@aguformoso/internet-outages-as-seen-by-ripe-atlas\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3120,"value":"import { mdPlus } from \"@tmcw/bonus-markdown-flavor\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3547,"value":"import { banner, bannerGenerator } from \"@aguformoso/ripencc-texts\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3546,"value":"import { what_is } from \"@aguformoso/ripe-atlas-texts\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3568,"value":"import {\n regions2Countries\n // countries__,\n // countries___\n} from \"@aguformoso/utils-geo\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3567,"value":"rough = require(\"roughjs@3.0.0/dist/rough.js\").catch(() => window.rough)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3562,"value":"import { getName } from \"@aguformoso/as-names\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3669,"value":"import { event, pixel } from \"@ripencc/matomo-tracking\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3668,"value":"pixel({ url: new URL(document.location.href).origin })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3667,"value":"{\n // let's emit events only when the chart changes\n chartVega;\n\n event({ action: \"Input\", name: `country=${input.country}` });\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}