31:T4e1,html`

${legendBox}

${viewof focusedCell}

`32:T758,/* The pointer transform emits an input event whenever the focused points changes, and sets the value of the plot element to the focused data. This allows you to use a plot as an Observable view (viewof), or to register an input event listener to react to pointing. https://observablehq.com/plot/interactions/pointer */ viewof focusedCell = Plot.plot({ width, x: { tickRotate: -45 }, marginBottom: 60, marginLeft: 60, style: "overflow: visible;", marks: [ Plot.cell(cellsFiltered, { // tipe: true, x: (d) => `AS${getAsnVersion(d.col)}`, y: (d) => `AS${getAsnVersion(d.row)}`, fill: (d) => colors(d.data.via_ixp, d.data.in_country), fillOpacity: (d) => (searchResults.indexOf(d) > -1 ? 1.0 : 0.1) // fillOpacity: (d) => // filters.rttHighlight ? d3.min(d.data.dst_rtts) : 1.0, // inset: 0 // no borders? }), Plot.tip( cellsFiltered, Plot.pointer({ x: (d) => `AS${getAsnVersion(d.col)}`, y: (d) => `AS${getAsnVersion(d.row)}`, title: (d) => { let [src, dst] = [getAsnVersion(d.row), getAsnVersion(d.col)]; let [srcName, dstName] = [ getName(src)[0]?.name, getName(dst)[0]?.name ]; return `AS${src} (${srcName})\nAS${dst} (${dstName}) \nixp=${d.data.via_ixp} in-country=${d.data.in_country}`; } // [ // (`AS${getAsnVersion(d.col)} (${ // // getName(getAsnVersion(d.col))[0]?.name // getAsnVersion(d.col) // })`, // `AS${getAsnVersion(d.row)} (${ // // getName(getAsnVersion(d.row))[0].name // getAsnVersion(d.row) // })`, // // `${d3.min(d.data.dst_rtts)?.toFixed(1)} ms`, // `ixp=${d.data.via_ixp} in-country=${d.data.in_country}`) // ].join("\n") }) ) ] })33:T44b,/* This is a "soft fork" of: https://observablehq.com/@observablehq/plot-bivariate-choropleth-explained The notebook had no option to parametrize the legend grid (originally 3x3) */ legend = () => Plot.plot({ color: { range: scheme, transform: ([a, b]) => 3 * a + b, unknown: "#ccc" // See Valdez-Cordova, Alaska }, axis: null, inset: 46, width: 126, height: 126, style: "overflow: visible;", // for the tip marks: [ Plot.dot(d3.cross([0, 1], [0, 1]), { x: ([a, b]) => b - a, y: ([a, b]) => b + a, symbol: "square", rotate: 45, r: 14, fill: (d) => d, title: ([a, b]) => `through ixp=${a === 1} \nout of country=${b !== 0}`, tip: true }), Plot.text(["no yes \nOut of country"], { frameAnchor: "right", fontWeight: "bold", rotate: -45, dy: 0 }), Plot.text([" yes no \n Through IXP"], { frameAnchor: "left", fontWeight: "bold", rotate: 45, dy: 0 }) ] })34:T499,// Plot.plot({ // y: { grid: true }, // color: { legend: true }, // marks: [ // Plot.rectY( // cells, // Plot.binX( // { y2: "count" }, // { // x: (cell) => d3.min(cell.data.dst_rtts), // fill: filters.fill.f, // // fy: filters.fill.f, // // fill: (cell) => // // cell.ixpcountry.data.via_ixp && cell.ixpcountry.data.in_country, // fy: (cell) => // cell.ixpcountry?.data.via_ixp ? "Via IXP" : "Not via IXP", // fx: (cell) => // cell.ixpcountry?.data.in_country ? "In-country" : "Out of country" // } // ) // ), // Plot.ruleY([0]) // // Plot.ruleX( // // cells, // // Plot.groupX( // // { // // x: (ds) => { // // console.log(ds); // // return 50; //d3.max(ds); // // } // // }, // // { // // x: (cell) => { // // console.log(">", cell); // // return cell.data.dst_rtts; // // }, // // fy: (cell) => cell.ixpcountry?.data.via_ixp // // } // // ) // // ) // ] // })35:[] 2f:{"title":"Jedi (IXP Country)","cells":[{"id":0,"value":"# Jedi (IXP Country)\n\n[IXP Country Jedi](https://github.com/emileaben/ixp-country-jedi) provides visualisations of Internet traffic paths (traceroutes) between RIPE Atlas probes located in the same country to show whether those paths take out of country detours, and what IXPs they pass through.","pinned":false,"hidden":false,"mode":"md"},{"id":185,"value":"viewof country = jediCountryInput()","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"viewof date = jediDateInput(country)","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"viewof filters = Inputs.form({\n // country: Inputs.text({ label: \"Country\", value: \"NL\", submit: true }),\n // rtt: Inputs.range([0, 1000], { label: \"RTT\", step: 1 }),\n // rttHighlight: Inputs.radio([true, false], {\n // label: \"Opacity based on RTT\",\n // value: true\n // }),\n af: afInput(),\n // fill: Inputs.select(\n // [\n // { format: \"Via IXP\", f: (cell) => cell.ixpcountry?.data.via_ixp },\n // { format: \"In-country\", f: (cell) => cell.ixpcountry?.data.in_country }\n // ],\n // { format: (v) => v.format, label: \"Fill\" }\n // )\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"viewof searchInput = Inputs.text({\n label: \"Search (JS regex)\",\n value: \"\",\n placeholder: 'e.g. \"3333|delft\"',\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":903,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":806,"value":"legendBox = legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"{\n if (focusedCell === null)\n return \"Hover (and click) on a cell to get more information about it\";\n let info = await fetchInfo(focusedCell.col.id, focusedCell.row.id, date);\n return info.tracetxt; //.split(\"||\").join(\"\\n\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"viewof asnFilter = Inputs.checkbox(\n new Set(\n cells\n .map((cell) =>\n [cell.col, cell.row]\n .map((colRow) => [colRow.asn_v4, colRow.asn_v6])\n .flat()\n )\n .flat()\n ),\n { format: (asn) => `AS${asn}` }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"searchResults = cells.filter((cell) => {\n let regex = new RegExp(searchInput, \"i\");\n\n return regex.test(JSON.stringify(cell));\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"// either a row or col that holds `asn_v4` or `asn_v6`\ngetAsnVersion = (rowCol) =>\n filters.af === \"IPv4\" ? rowCol.asn_v4 : rowCol.asn_v6","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"cells = {\n let cols = ixpcountry.cols;\n let rows = ixpcountry.rows;\n let cells = ixpcountry.cells;\n return cells\n .filter((cell) => cell)\n .map((cell) => {\n // let col = cols.filter((col) => col.id === cell.col)[0];\n // let row = rows.filter((row) => row.id === cell.row)[0];\n\n let col = lookups.id2col.get(cell.col)[0];\n let row = lookups.id2row.get(cell.row)[0];\n let asns = [\n ...new Set(\n [col.asn_v4, col.asn_v6, row.asn_v4, row.asn_v6].filter((asn) => asn)\n )\n ];\n let asnNames = {\n src: getName(getAsnVersion(col))[0]?.name,\n dst: getName(getAsnVersion(row))[0]?.name\n };\n\n if (typeof col === \"undefined\" || typeof row === \"undefined\")\n return { ...cell };\n // let ixpcountry = cells.filter(\n // (cell) => col.id === cell.col && row.id === cell.row\n // )[0];\n\n return {\n ...cell,\n col,\n row,\n asns,\n asnNames\n // ixpcountry\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"cellsFiltered = {\n let asnFilterSet = new Set(asnFilter);\n return cells.filter(\n (cell) =>\n (asnFilter.length > 0 &&\n d3.intersection(asnFilterSet, new Set(cell.asns)).size) ||\n asnFilter.length === 0\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"lookups = {\n let id2col = d3.group(ixpcountry.cols, (i) => i.id);\n let id2row = d3.group(ixpcountry.rows, (i) => i.id);\n return {\n id2col,\n id2row\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"fetchInfo = (prbSrc, prbDst, date = date, af = filters.af.replace(\"IP\", \"\")) =>\n d3\n .json(\n `https://jedi.ripe.net/history/${date}/NL/common/details/${af}/${prbSrc}/${prbDst}/latest.json`\n )\n .catch((err) => new Error(\"Foo\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":809,"value":"scheme = [\"#80cdc1\", \"#dfc27d\", \"#018571\", \"#a6611a\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"colors = (via_ixp, in_country) => {\n if (via_ixp && in_country) return scheme[0];\n if (!via_ixp && in_country) return scheme[2];//lightgreen\n if (via_ixp && !in_country) return scheme[3];//darkbrown\n else return scheme[1];//lightbrown\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"import {\n jediDateInput,\n jediCountryInput,\n afInput,\n ixpcountry,\n timelines\n} with { country as country, date as date } from \"@aguformoso/jedi-tools\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"import { getName } from \"@aguformoso/as-names\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}