2b:null 2c:["$","title",null,{"children":"Plug and Plot: Reusable visualizations for AS-hegemony data | Internet Health Report | Observable"}] 31:T9af,/** * Creates a plotly.js timeseries plot showing the hegemony value each network the selected AS depends on, for the selected time range. * @function dependencyTimeseries * @param {String} startDate The starting date of time range e.g. "2022-05-03". * @param {String} endDate The ending date of time range e.g. "2022-05-03". * @param {String} ASN The ASN of the network to be examined e.g. "1241". * @return {Object} A DOM object with the generated plot. */ async function dependencyTimeseries(startDate, endDate, ASN) { if (!startDate) { return "No start date provided"; } else if (!endDate) { return "No end date provided"; } else if (!ASN) { return "No ASN provided"; } else if (!validateDate(startDate)) { return "Invalid start date format, e.g. 2022-05-03"; } else if (!validateDate(endDate)) { return "Invalid end date format, e.g. 2022-05-03"; } else if (!validateASN(ASN)) { return "Invalid ASN"; } const rawQuery = await fetch(`https://ihr.iijlab.net/ihr/api/hegemony/?originasn=${ASN}&af=4&timebin__gte=${startDate}T00:00:00.000Z&timebin__lte=${endDate}T00:00:00.000Z&ordering=timebin&format=json`); const query = await rawQuery.json(); let traces = []; let ASArray = []; if (!query) { return "API error or no data"; } query.results.forEach((element) => { if (ASArray.includes(element.asn)) { for (let i = 0; i < traces.length; i++) { if (traces[i].asn == element.asn) { traces[i].y.push(element.hege * 100); traces[i].x.push(element.timebin); } } } else { traces.push({ x: [element.timebin], y: [element.hege * 100], yaxis: "y2", name: "AS" + element.asn + " " + element.asn_name, asn: element.asn, mode: "lines" }); ASArray.push(element.asn); } }); if (traces.length == 0) { return "No results for this network"; } const layout = { width: 1000, height: 700, hovermode: "closest", margin: { t: 10, b: 10, l: 80, r: 80 }, showlegend: true, legend: { x: 0, y: 1.2, orientation: "h", }, yaxis: { automargin: true, }, xaxis: { autorange: true, automargin: true, }, yaxis: { title: "", }, yaxis2: { autorange: true, }, }; const div = DOM.element("div"); Plotly.newPlot(div, traces, layout); return div; }32:Tc54,/** * Creates a plotly.js timeseries plot showing the hegemony value each network the selected AS depends on, for the selected time range, grouped by the origin country. * @function dependencyTimeseriesByCountry * @param {String} startDate The starting date of time range e.g. "2022-05-03". * @param {String} endDate The ending date of time range e.g. "2022-05-03". * @param {String} ASN The ASN of the network to be examined e.g. "1241". * @return {Object} A DOM object with the generated plot. */ async function dependencyTimeseriesByCountry(startDate, endDate, ASN) { if (!startDate) { return "No start date provided"; } else if (!endDate) { return "No end date provided"; } else if (!ASN) { return "No ASN provided"; } else if (!validateDate(startDate)) { return "Invalid start date format, e.g. 2022-05-03"; } else if (!validateDate(endDate)) { return "Invalid end date format, e.g. 2022-05-03"; } else if (!validateASN(ASN)) { return "Invalid ASN"; } const rawQuery = await fetch(`https://ihr.iijlab.net/ihr/api/hegemony/?originasn=${ASN}&af=4&timebin__gte=${startDate}T10:00:00.000Z&timebin__lte=${endDate}T11:00:00.000Z&ordering=timebin&format=json`); const query = await rawQuery.json(); let traces = []; let countryArray = []; if (!query) { return "API error or no data"; } query.results.forEach((element) => { let countryCode = element.asn_name.split(" ")[element.asn_name.split(" ").length - 1]; if (countryArray.includes(countryCode)) { for (let i = 0; i < traces.length; i++) { if (traces[i].countryCode == countryCode) { if (traces[i].x.includes(element.timebin)) { for (let j = 0; j < traces[i].x.length; j++) { if (traces[i].x[j] == element.timebin) { traces[i].y[j].push(element.hege * 100); break; } } } else { traces[i].y.push([element.hege * 100]); traces[i].x.push(element.timebin); } } } } else { traces.push({ x: [element.timebin], y: [[element.hege * 100]], yaxis: "y2", name: countryCode, countryCode: countryCode, mode: "lines" }); countryArray.push(countryCode); } }); for (let i = 0; i < traces.length; ++i) { for (let j = 0; j < traces[i].x.length; ++j) { const total = traces[i].y[j].reduce((acc, c) => acc + c, 0); traces[i].y[j] = total / traces[i].y[j].length; } } if (traces.length == 0) { return "No results"; } const layout = { width: 1000, height: 700, hovermode: "closest", margin: { t: 10, b: 10, l: 80, r: 80 }, showlegend: true, legend: { x: 0, y: 1.2, orientation: "h", }, yaxis: { automargin: true, }, xaxis: { autorange: true, automargin: true, }, yaxis: { title: "", }, yaxis2: { autorange: true, }, }; const div = DOM.element("div"); Plotly.newPlot(div, traces, layout); return div; }33:T8b1,/** * Creates a plotly.js timeseries plot showing the hegemony value of each network that depends on the selected AS, for the selected time range. * @function dependentTimeseries * @param {String} startDate The starting date of time range e.g. "2022-05-03". * @param {String} endDate The starting date of time range e.g. "2022-05-03". * @param {String} ASN The ASN of the network to be examined e.g. "1241". * @return {Object} A DOM object with the generated plot. */ async function dependentTimeseries(startDate, endDate, ASN) { if (!startDate) { return "No start date provided"; } else if (!endDate) { return "No end date provided"; } else if (!ASN) { return "No ASN provided"; } else if (!validateDate(startDate)) { return "Invalid start date format, e.g. 2022-05-03"; } else if (!validateDate(endDate)) { return "Invalid end date format, e.g. 2022-05-03"; } else if (!validateASN(ASN)) { return "Invalid ASN"; } const rawQuery = await fetch(`https://ihr.iijlab.net/ihr/api/hegemony/cones?asn=${ASN}&af=4&timebin__gte=${startDate}T00:00:00.000Z&timebin__lte=${endDate}T00:00:00.000Z&ordering=timebin&format=json`); const query = await rawQuery.json(); let traces = [{ x: [], y: [], yaxis: "y2", name: "Number of dependent networks", mode: "lines" }]; if (!query) { return "API error or no data"; } query.results.forEach((element) => { if (element.conesize == 0) { return } traces[0].x.push(element.timebin); traces[0].y.push(element.conesize); }) if (traces.length == 0 || traces[0].x.length == 0) { return "No results"; } console.log(traces) const layout = { width: 1000, height: 700, hovermode: "closest", margin: { t: 10, b: 10, l: 80, r: 80 }, showlegend: true, legend: { x: 0, y: 1.2, orientation: "h", }, yaxis: { automargin: true, }, xaxis: { autorange: true, automargin: true, }, yaxis: { title: "", }, yaxis2: { autorange: true, }, }; const div = DOM.element("div"); Plotly.newPlot(div, traces, layout); return div; }34:Tbcb,/** * Creates a plotly.js timeseries plot showing the hegemony value of each network that depends on the selected AS, for the selected time range, grouped by country. * @function dependentTimeseriesByCountry * @param {String} startDate The starting date of time range e.g. "2022-05-03". * @param {String} endDate The ending date of time range e.g. "2022-05-03". * @param {String} ASN The ASN of the network to be examined e.g. "1241". * @return {Object} A DOM object with the generated plot. */ async function dependentTimeseriesByCountry(startDate, endDate, ASN) { if (!startDate) { return "No start date provided"; } else if (!endDate) { return "No end date provided"; } else if (!ASN) { return "No ASN provided"; } else if (!validateDate(startDate)) { return "Invalid start date format, e.g. 2022-05-03"; } else if (!validateDate(endDate)) { return "Invalid end date format, e.g. 2022-05-03"; } else if (!validateASN(ASN)) { return "Invalid ASN"; } const rawQuery = await fetch(`https://ihr.iijlab.net/ihr/api/hegemony/?asn=${ASN}&af=4&timebin__gte=${startDate}T00:00:00.000Z&timebin__lte=${endDate}T00:00:00.000Z&ordering=timebin&format=json`); const query = await rawQuery.json(); let traces = []; let countryArray = []; if (!query) { return "API error or no data"; } query.results.forEach((element) => { let countryCode = element.originasn_name.split(" ")[element.originasn_name.split(" ").length - 1]; if (element.asn == element.originasn) { return } if (element.originasn == 0) { return } if (countryArray.includes(countryCode)) { for (let i = 0; i < traces.length; i++) { if (traces[i].countryCode == countryCode) { if (traces[i].x.includes(element.timebin)) { for (let j = 0; j < traces[i].x.length; j++) { if (traces[i].x[j] == element.timebin) { traces[i].y[j] = traces[i].y[j] + 1; break; } } } else { traces[i].y.push(1); traces[i].x.push(element.timebin); } } } } else { traces.push({ x: [element.timebin], y: [1], yaxis: "y2", name: countryCode, countryCode: countryCode, mode: "lines" }); countryArray.push(countryCode); } }); if (traces.length == 0) { return "No results"; } const layout = { width: 1000, height: 700, hovermode: "closest", margin: { t: 10, b: 10, l: 80, r: 80 }, showlegend: true, legend: { x: 0, y: 1.2, orientation: "h", }, yaxis: { automargin: true, }, xaxis: { autorange: true, automargin: true, }, yaxis: { title: "", }, yaxis2: { autorange: true, }, }; const div = DOM.element("div"); Plotly.newPlot(div, traces, layout); return div; }35:Tce3,/** * Creates a plotly.js timeseries plot showing the hegemony value of each network that depends on the selected AS, for the selected time range, grouped by the selected field. * @function dependentTimeseriesByType * @param {String} startDate The starting date of time range e.g. "2022-05-03". * @param {String} endDate The ending date of time range e.g. "2022-05-03". * @param {String} ASN The ASN of the network to be examined e.g. "1241". * @param {String} groupingType The group type of the fetched networks to be sorted by. can be "Continent" or "Net. Type". * @return {Object} A DOM object with the generated plot. */ async function dependentTimeseriesByType(startDate, endDate, ASN, groupingType) { if (!startDate) { return "No start date provided"; } else if (!endDate) { return "No end date provided"; } else if (!ASN) { return "No ASN provided"; } else if (!validateDate(startDate)) { return "Invalid start date format, e.g. 2022-05-03"; } else if (!validateDate(endDate)) { return "Invalid end date format, e.g. 2022-05-03"; } else if (!validateASN(ASN)) { return "Invalid ASN"; } const rawQuery = await fetch(`https://ihr.iijlab.net/ihr/api/hegemony/?asn=${ASN}&af=4&timebin__gte=${startDate}T00:00:00.000Z&timebin__lte=${endDate}T00:00:00.000Z&ordering=timebin&format=json`); const query = await rawQuery.json(); let traces = []; let groupArray = []; if (!query) { return "API error or no data"; } query.results.forEach((element, i) => { query.results[i].grouping = formatted_asn_characteristics[element.originasn]; }) query.results.forEach((element) => { let group; if (element.grouping) { group = element.grouping[groupingType]; } else { return } if (element.asn == element.originasn) { return } if (element.originasn == 0) { return } if (groupArray.includes(group)) { for (let i = 0; i < traces.length; i++) { if (traces[i].grouping == group) { if (traces[i].x.includes(element.timebin)) { for (let j = 0; j < traces[i].x.length; j++) { if (traces[i].x[j] == element.timebin) { traces[i].y[j] = traces[i].y[j] + 1; break; } } } else { traces[i].y.push(1); traces[i].x.push(element.timebin); } } } } else { traces.push({ x: [element.timebin], y: [1], yaxis: "y2", grouping: group, name: group == "" ? "No Value" : group, mode: "lines" }); groupArray.push(group); } }); if (traces.length == 0) { return "No results"; } const layout = { width: 1000, height: 700, hovermode: "closest", margin: { t: 10, b: 10, l: 80, r: 80 }, showlegend: true, legend: { x: 0, y: 1.2, orientation: "h", }, yaxis: { automargin: true, }, xaxis: { autorange: true, automargin: true, }, yaxis: { title: "", }, yaxis2: { autorange: true, }, }; const div = DOM.element("div"); Plotly.newPlot(div, traces, layout); return div; }36:Taa2,/** * Creates an html table showing the difference in hegemony value of each network that depends on the selected AS, for the selected time range. * @function dependencyDifferenceTable * @param {String} startDate The starting date of time range e.g. "2022-05-03". * @param {String} endDate The ending date of time range e.g. "2022-05-03". * @param {String} ASN The ASN of the network to be examined e.g. "1241". * @return {Object} An observable Input object with the generated table. */ async function dependencyDifferenceTable(startDate, endDate, ASN) { if (!startDate) { return "No start date provided"; } else if (!endDate) { return "No end date provided"; } else if (!ASN) { return "No ASN provided"; } else if (!validateDate(startDate)) { return "Invalid start date format, e.g. 2022-05-03"; } else if (!validateDate(endDate)) { return "Invalid end date format, e.g. 2022-05-03"; } else if (!validateASN(ASN)) { return "Invalid ASN"; } const rawQuery = await fetch(`https://ihr.iijlab.net/ihr/api/hegemony/?originasn=${ASN}&af=4&timebin__gte=${startDate}T10:00:00.000Z&timebin__lte=${endDate}T11:00:00.000Z&ordering=timebin&format=json`); const query = await rawQuery.json(); let ASArray = []; const startArray = []; const endArray = []; if (!query) { return "API error or no data"; } query.results.forEach((element) => { const formattedTimebin = element.timebin.substring(0, 10); if (formattedTimebin == startDate) { startArray.push(element); } else if (formattedTimebin == endDate) { endArray.push(element); } ASArray.push(element.asn); }); ASArray = ASArray.filter((item, pos) => { return ASArray.indexOf(item) == pos; }); const tableArray = []; ASArray.forEach((asn) => { let startHegemony = ""; let endHegemony = ""; let asnName = ""; for (let i = 0; i < startArray.length; ++i) { const element = startArray[i]; if (asn == element.asn) { asnName = "AS" + element.asn_name; startHegemony = element.hege * 100; break; } } for (let i = 0; i < endArray.length; ++i) { const element = endArray[i]; if (asn == element.asn) { endHegemony = element.hege * 100; break; } } tableArray.push({ "ASN": asn, "Start Hege": startHegemony, "End Hege": endHegemony, "Amount": startHegemony - endHegemony }); }); return Inputs.table(tableArray, {align: {"ASN": "left", "Start hege": "left", "End hege": "left", "Amount": "left"}, format: {"ASN": x => "AS"+x.toString()}, header: {"number": "ASN"}})}37:Tcb4,/** * Creates an bar plot showing the difference in hegemony value of each network that depends on the selected AS, for the selected time range. * @function dependencyDifferenceBar * @param {String} startDate The starting date of time range e.g. "2022-05-03". * @param {String} endDate The ending date of time range e.g. "2022-05-03". * @param {String} ASN The ASN of the network to be examined e.g. "1241". * @return {Object} A DOM object with the generated plot. */ async function dependencyDifferenceBar(startDate, endDate, ASN) { if (!startDate) { return "No start date provided"; } else if (!endDate) { return "No end date provided"; } else if (!ASN) { return "No ASN provided"; } else if (!validateDate(startDate)) { return "Invalid start date format, e.g. 2022-05-03"; } else if (!validateDate(endDate)) { return "Invalid end date format, e.g. 2022-05-03"; } else if (!validateASN(ASN)) { return "Invalid ASN"; } const rawQuery = await fetch(`https://ihr.iijlab.net/ihr/api/hegemony/?originasn=${ASN}&af=4&timebin__gte=${startDate}T10:00:00.000Z&timebin__lte=${endDate}T11:00:00.000Z&ordering=timebin&format=json`); const query = await rawQuery.json(); let ASArray = []; const startArray = []; const endArray = []; if (!query) { return "API error or no data"; } query.results.forEach((element) => { const formattedTimebin = element.timebin.substring(0, 10); if (formattedTimebin == startDate) { startArray.push(element); } else if (formattedTimebin == endDate) { endArray.push(element); } ASArray.push(element.asn); }); ASArray = ASArray.filter((item, pos) => { return ASArray.indexOf(item) == pos; }); let traces = [{ x: [], y: [], name: "Start Hege", type: "bar" }, { x: [], y: [], name: "End Hege", type: "bar" }]; ASArray.forEach((asn) => { let startHegemony = ""; let endHegemony = ""; let asnName = ""; for (let i = 0; i < startArray.length; ++i) { const element = startArray[i]; if (asn == element.asn) { asnName = "AS" + element.asn_name; startHegemony = element.hege * 100; break; } } for (let i = 0; i < endArray.length; ++i) { const element = endArray[i]; if (asn == element.asn) { endHegemony = element.hege * 100; break; } } traces[0].x.push(asnName); traces[0].y.push(startHegemony); traces[1].x.push(asnName); traces[1].y.push(endHegemony); }); if (traces.length == 0 || traces[0].x.length == 0) { return "No results"; } const layout = { barmode: "group", width: 1000, height: 700, hovermode: "closest", margin: { t: 10, b: 10, l: 80, r: 80 }, showlegend: true, legend: { x: 0, y: 1.2, orientation: "h", }, yaxis: { automargin: true, }, xaxis: { autorange: true, automargin: true, }, yaxis: { title: "", }, yaxis2: { autorange: true, }, }; const div = DOM.element("div"); Plotly.newPlot(div, traces, layout); return div; }38:Td4d,/** * Creates a plotly.js timeseries plot showing the hegemony value each network the selected AS depends on, for the selected time range using sampling method (this allows the bypass of the 7-day range API limit). * @function dependencyTimeseriesSampling * @param {String} startDate The starting date of a time range e.g. "2022-05-03". * @param {String} endDate The ending date of a time range e.g. "2022-05-03". * @param {String} ASN The ASN of the network to be examined e.g. "1241". * @param {Integer} chunks The amount of chunks the time range will be split to. * @return {Object} An observable Input object with the generated table. */ async function dependencyTimeseriesSampling(startDate, endDate, ASN, chunks) { if (!startDate) { return "No start date provided"; } else if (!endDate) { return "No end date provided"; } else if (!ASN) { return "No ASN provided"; } else if (!chunks) { return "No chunks probided" } else if (!validateDate(startDate)) { return "Invalid start date format, e.g. 2022-05-03"; } else if (!validateDate(endDate)) { return "Invalid end date format, e.g. 2022-05-03"; } else if (!validateASN(ASN)) { return "Invalid ASN"; } else if (!Number.isInteger(chunks)) { return "Chunks must be an integer" } const unixStartDate = Math.floor(new Date(startDate) / 1000); const unixEndDate = Math.floor(new Date(endDate) / 1000); const dif = unixEndDate - unixStartDate; const steps = parseInt(dif / (chunks - 1)); let responseArr = []; for (let i = 0; i < chunks; ++i) { const reqDate = unixStartDate + steps * i; const formattedReqDate = new Date(reqDate * 1000).toLocaleString("en-GB", {year: "numeric", month: "2-digit", day: "2-digit"}).split(",")[0].split("/"); console.log(new Date(reqDate * 1000)); const stepQuery = await fetch(`https://ihr.iijlab.net/ihr/api/hegemony/?af=4&format=json&ordering=timebin&originasn=${ASN}&timebin=${formattedReqDate[2]}-${formattedReqDate[1]}-${formattedReqDate[0]}T00:00:00.000Z`) const rbody = await stepQuery.json(); if (stepQuery.ok) { responseArr = [...responseArr, ...rbody.results]; } } let traces = []; let ASArray = []; responseArr.forEach((element) => { if (ASArray.includes(element.asn)) { for (let i = 0; i < traces.length; i++) { if (traces[i].asn == element.asn) { traces[i].y.push(element.hege * 100); traces[i].x.push(element.timebin); } } } else { traces.push({ x: [element.timebin], y: [element.hege * 100], yaxis: "y2", name: "AS" + element.asn + " " + element.asn_name, asn: element.asn, mode: "lines" }) ASArray.push(element.asn); } }); if (traces.length <= 0) { return "No results"; } const layout = { width: 1000, height: 700, hovermode: "closest", margin: { t: 10, b: 10, l: 80, r: 80 }, showlegend: true, legend: { x: 0, y: 1.2, orientation: "h", }, yaxis: { automargin: true, }, xaxis: { autorange: true, automargin: true, }, yaxis: { title: "", }, yaxis2: { autorange: true, }, }; const div = DOM.element("div"); Plotly.newPlot(div, traces, layout); return div; }39:T1ca0,/** * Creates a plotly.js sankey plot showing the way the selected AS is connected to reach the internet, on the specified date. * @function dependencySankey * @param {String} startDate The date of the data snapshot e.g. "2022-05-03". * @param {String} ASN The ASN of the network to be examined e.g. "1241". * @return {Object} A DOM object with the generated plot. */ async function dependencySankey(startDate, ASN) { if (!startDate) { return "No start date provided"; } else if (!ASN) { return "No ASN provided"; } else if (!validateDate(startDate)) { return "Invalid start date format, e.g. 2022-05-03"; } else if (!validateASN(ASN)) { return "Invalid ASN"; } const arrayDependencies = []; const arrayHegemony = []; const arrayNeighbours = []; const results = await fetch(`https://ihr.iijlab.net/ihr/api/hegemony/?originasn=${ASN}&af=4&timebin=${startDate}T10:00:00.000Z&ordering=timebin`); const rBody = await results.json(); for (let i = 0; i < rBody.results.length; ++i) { const element = rBody.results[i]; if (element.asn == element.originasn) { continue; } if (element.originasn == 0) { continue; } arrayDependencies.push(element.asn); arrayHegemony.push({ "asn": element.asn, "hege": element.hege }); } const neighbour = await fetch(`https://stat.ripe.net/data/asn-neighbours/data.json?resource=${ASN}&`); const nBody = await neighbour.json(); for (let i = 0; i < nBody.data.neighbours.length; ++i) { const element = nBody.data.neighbours[i]; arrayNeighbours.push(element.asn); } const arrayDepNeigh = arrayDependencies.filter(v => arrayNeighbours.indexOf(v) > -1); const chunkedArray = []; for (let i = 0; i < arrayDepNeigh.length; i += 10) { chunkedArray.push(arrayDepNeigh.slice(i, i + 10)); } const taskPromise = (chunk) => { return new Promise(async (resolve, reject) => { const finalArray = []; for (let i = 0; i < chunk.length; ++i) { const element = chunk[i]; const subResults = await fetch(`https://ihr.iijlab.net/ihr/api/hegemony/?originasn=${element}&af=4&timebin=${startDate}T10:00:00.000Z&ordering=timebin`); const subResultsBody = await subResults.json(); finalArray.push({ "asn": element, "deps": subResultsBody.results, }); } resolve(finalArray); }); } let arrayDependenciesOfNeighbourY = []; for (let i = 0; i < chunkedArray.length; ++i) { const chunk = chunkedArray[i]; const chunkResults = await taskPromise(chunk); arrayDependenciesOfNeighbourY = [...arrayDependenciesOfNeighbourY, ...chunkResults]; } const arrayDependenciesOfNeighbourYASN = [...new Set(arrayDependenciesOfNeighbourY.map(e => e.deps.map(ee => ee.asn)).reduce((acc, e) => {return [...acc, ...e]}))]; const commonNeighbours = []; for (let i = 0; i < arrayDependencies.length; ++i) { const element = arrayDependencies[i]; if (arrayNeighbours.includes(element)) { continue; } if (!arrayDependenciesOfNeighbourYASN.includes(element)) { continue; } commonNeighbours.push(element); } const nonCommonNeighbours = []; for (let i = 0; i < arrayDependencies.length; ++i) { const element = arrayDependencies[i]; if (arrayNeighbours.includes(element)) { continue; } if (arrayDependenciesOfNeighbourYASN.includes(element)) { continue; } nonCommonNeighbours.push(element); } const depthLevelOne = []; if (arrayNeighbours.filter(e => !arrayDependencies.includes(e)).length > 0) { depthLevelOne.push({ "source": parseInt(ASN), "target": "No dependencies", "value": 1, "color": "rgba(44, 160, 44, 0.5)" }); } for (let i = 0; i < arrayDepNeigh.length; ++i) { const element = arrayDepNeigh[i]; const dependencyArray = arrayDependenciesOfNeighbourY.filter(e => e.asn == element)[0].deps; depthLevelOne.push({ "source": parseInt(ASN), "target": element, "value": arrayHegemony.filter(e => e.asn == element)[0].hege * 100, "color": "rgba(255, 0, 0, 0.5)" }); const depsArray = []; for (let j = 0; j < dependencyArray.length; ++j) { const dep = dependencyArray[j]; depsArray.push(dep.asn); } if (depsArray.filter(e => !commonNeighbours.includes(e)).length > 0) { depthLevelOne.push({ "source": element, "target": "Internet", "value": 1, "color": "rgba(44, 160, 44, 0.5)" }); } } const depthLevelTwo = []; for (let i = 0; i < arrayDepNeigh.length; ++i) { const dep = arrayDepNeigh[i]; for (let j = 0; j < commonNeighbours.length; ++j) { const commonNeighbour = commonNeighbours[j]; const dep_dep2j = arrayDependenciesOfNeighbourY.filter(e => e.asn == dep)[0].deps.filter(e => e.asn == commonNeighbour); if (dep_dep2j.length > 0) { depthLevelTwo.push({ "source": dep, "target": commonNeighbour, "value": dep_dep2j[0].hege * 100, "color": "rgba(255, 0, 0, 0.5)" }); } } } const depthLevelThree = []; for (let i = 0; i < commonNeighbours.length; ++i) { const element = commonNeighbours[i]; depthLevelThree.push({ "source": element, "target": "Internet", "value": 1, "color": "rgba(44, 160, 44, 0.5)" }); } for (let i = 0; i < nonCommonNeighbours.length; ++i) { const element = nonCommonNeighbours[i]; depthLevelThree.push({ "source": element, "target": "Internet", "value": 1, "color": "rgba(44, 160, 44, 0.5)" }); } const finalObj = [...depthLevelOne, ...depthLevelTwo, ...depthLevelThree]; let labelArray = []; for (let i = 0; i < finalObj.length; ++i) { const element = finalObj[i]; labelArray.push(element.source); } labelArray = [...new Set(labelArray)]; labelArray = [...labelArray, "Internet", "No dependencies"]; const sourceArray = []; const targetArray = []; const valueArray = []; const colorArray = []; for (let i = 0; i < finalObj.length; ++i) { const element = finalObj[i]; sourceArray.push(labelArray.indexOf(element.source)); targetArray.push(labelArray.indexOf(element.target)); valueArray.push(element.value); colorArray.push(element.color); } for (let i = 0; i < labelArray.length; ++i) { labelArray[i] = labelArray[i].toString(); } let nodeColorArray = []; for (let i = 0; i < labelArray.length; ++i) { nodeColorArray.push("rgba(255, 0, 0, 0.8)"); } nodeColorArray[0] = "rgba(0, 0, 255, 0.8)"; nodeColorArray[nodeColorArray.length - 1] = "rgba(44, 160, 44, 0.7)"; nodeColorArray[nodeColorArray.length - 2] = "rgba(44, 160, 44, 0.7)"; const traces = [{ type: "sankey", node: { label: labelArray, color: nodeColorArray, width: 0 }, link: { source: sourceArray, target: targetArray, value: valueArray, color: colorArray } }]; const layout = { title: "AS Dependency Sankey", font: { size: 10 } } const div = DOM.element("div"); Plotly.newPlot(div, traces, layout); return div; }3a:Te30,async function countryGraph(startDate, countryCode, weightScheme, min) { /** * Creates a plotly.js graph plot showing all the networks a specified country depends on, on the specified date. * @function countryGraph * @param {String} startDate The date of the data snapshot e.g. "2022-05-03". * @param {String} countryCode The ASN of the network to be examined e.g. "1241". * @param {String} weightScheme The ASN of the network to be examined e.g. "1241". * @param {Number} min The minimum amount of hegemony a network must have to be displayed. * @return {Object} A DOM object with the generated plot. */ const normLog = (x) => 15 * Math.log10(100 * x < 1 ? 1 : 100 * x) + 5; if (!startDate) { return "No start date provided"; } else if (!countryCode) { return "No country code provided"; } else if (!weightScheme) { return "No weight scheme provided"; } else if (isNaN(min)) { return "No threshold provided"; } else if (!validateDate(startDate)) { return "Invalid start date format, e.g. 2022-05-03"; } else if (!validateCountryCode(countryCode)) { return "Invalid country code"; } else if (!validateWeightScheme(weightScheme)) { return "Weight scheme can be \"as\" or \"eyeball\""; } const networks = await fetch(`https://ihr.iijlab.net/ihr/api/hegemony/countries/?country=${countryCode}&timebin=${startDate}T00:00&weightscheme=${weightScheme}&ordering=-hege&hege__gte=${min}&transitonly=false&format=json`); let allNetworks = await networks.json(); allNetworks = await allNetworks.results; let allNetworksWithCountry = []; for (let i = 0; i < allNetworks.length; ++i) { const element = allNetworks[i]; const country = element.asn_name.slice(-2); allNetworksWithCountry.push({ country: country, obj: element }); } const allNetworksFilteredByCountry = allNetworksWithCountry.filter(e => e.country == countryCode); let nodes = []; let links = []; for (let i = 0; i < allNetworksFilteredByCountry.length; ++i) { const element = allNetworksFilteredByCountry[i].obj; nodes.push({ name: element.asn_name, hege: element.hege * 100, size: normLog(element.hege), id: element.asn, group: element.country }); } for (let i = 0; i < allNetworksFilteredByCountry.length; ++i) { const element = allNetworksFilteredByCountry[i].obj; const results = await fetch(`https://ihr.iijlab.net/ihr/api/hegemony/?originasn=${element.asn}&af=4&timebin=${startDate}T10:00:00.000Z&ordering=timebin`); const deps = await results.json(); for (let j = 0; j < deps.results.length; ++j) { const as = deps.results[j]; if (allNetworks.map(e => e.asn).includes(as.asn)) { const countryHege = allNetworks.filter(e => e.asn == as.asn)[0].hege; if (!nodes.map(e => e.id).includes(as.asn)) { nodes.push({ name: as.asn_name, hege: countryHege * 100, size: normLog(countryHege), id: as.asn, group: as.asn_name.slice(-2) }); } links.push({source: element.asn, target: as.asn, value: 10}); } } } return ForceGraph({ nodes: nodes, links: links }, { nodeId: d => d.id, nodeGroup: d => d.group, nodeTitle: d => `AS: ${d.id}\nNAME: ${d.name}\nHEGEMONY: ${d.hege}`, hasOpacity: true, linkStrokeWidth: 1, //linkStrength: 0.1, width: nodes.length > 60 ? 1600 : 1000, height: nodes.length > 60 ? 1600 : 1000, linkStrength: 0.1, invalidation }); }3b:T14ed,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/force-directed-graph function ForceGraph({ nodes, // an iterable of node objects (typically [{id}, …]) links // an iterable of link objects (typically [{source, target}, …]) }, { nodeId = d => d.id, // given d in nodes, returns a unique identifier (string) nodeSize = d => d.size, hasOpacity, nodeGroup, // given d in nodes, returns an (ordinal) value for color nodeGroups, // an array of ordinal values representing the node groups nodeTitle, // given d in nodes, a title string nodeFill = "currentColor", // node stroke fill (if not using a group color encoding) nodeStroke = "#fff", // node stroke color nodeStrokeWidth = 1.5, // node stroke width, in pixels nodeStrokeOpacity = 1, // node stroke opacity nodeRadius = 5, // node radius, in pixels nodeStrength, linkSource = ({source}) => source, // given d in links, returns a node identifier string linkTarget = ({target}) => target, // given d in links, returns a node identifier string linkStroke = "#999", // link stroke color linkStrokeOpacity = 0.8, // link stroke opacity linkStrokeWidth = 3, // given d in links, returns a stroke width in pixels linkStrokeLinecap = "round", // link stroke linecap linkStrength, colors = d3.schemeTableau10, // an array of color strings, for the node groups width = 640, // outer width, in pixels height = 400, // outer height, in pixels invalidation // when this promise resolves, stop the simulation } = {}) { // Compute values. const N = d3.map(nodes, nodeId).map(intern); const NSize = d3.map(nodes, nodeSize).map(intern); const LS = d3.map(links, linkSource).map(intern); const LT = d3.map(links, linkTarget).map(intern); if (nodeTitle === undefined) nodeTitle = (_, i) => N[i]; const T = nodeTitle == null ? null : d3.map(nodes, nodeTitle); const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern); const W = typeof linkStrokeWidth !== "function" ? null : d3.map(links, linkStrokeWidth); const L = typeof linkStroke !== "function" ? null : d3.map(links, linkStroke); // Replace the input nodes and links with mutable objects for the simulation. nodes = d3.map(nodes, (_, i) => ({id: N[i]}, {size: NSize[i]})); links = d3.map(links, (_, i) => ({source: LS[i], target: LT[i]})); // Compute default domains. if (G && nodeGroups === undefined) nodeGroups = d3.sort(G); // Construct the scales. const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors); // Construct the forces. const forceNode = d3.forceManyBody(); const forceLink = d3.forceLink(links).id(({index: i}) => N[i]); if (nodeStrength !== undefined) forceNode.strength(nodeStrength); if (linkStrength !== undefined) forceLink.strength(linkStrength); const simulation = d3.forceSimulation(nodes) .force("link", forceLink) .force("charge", forceNode) .force("center", d3.forceCenter()) .on("tick", ticked); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); const link = svg.append("g") .attr("stroke", typeof linkStroke !== "function" ? linkStroke : null) .attr("stroke-opacity", linkStrokeOpacity) .attr("stroke-width", typeof linkStrokeWidth !== "function" ? linkStrokeWidth : null) .attr("stroke-linecap", linkStrokeLinecap) .selectAll("line") .data(links) .join("line"); const node = svg.append("g") .attr("fill", nodeFill) .attr("stroke", nodeStroke) .attr("stroke-opacity", nodeStrokeOpacity) .attr("stroke-width", nodeStrokeWidth) .attr("fill-opacity", hasOpacity ? "0.5" : "1") .selectAll("circle") .data(nodes) .join("circle") .attr("r", nodeRadius) .call(drag(simulation)); if (W) link.attr("stroke-width", ({index: i}) => W[i]); if (L) link.attr("stroke", ({index: i}) => L[i]); if (G) node.attr("fill", ({index: i}) => color(G[i])); node.attr("r", ({index: i}) => nodes[i].size); if (T) node.append("title").text(({index: i}) => T[i]); if (invalidation != null) invalidation.then(() => simulation.stop()); function intern(value) { return value !== null && typeof value === "object" ? value.valueOf() : value; } function ticked() { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("cx", d => d.x) .attr("cy", d => d.y); } function drag(simulation) { function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); } return Object.assign(svg.node(), {scales: {color}}); }3c:[{"id":"2c7d95dd5306f8609b54cd644c4748ba441c178f51967003a062e3ed451ad6c64a6c5d1600341bce674d5a6c8148002a4d6e3751d464d3572d6900b97683b163","href":"https://static.observableusercontent.com/files/2c7d95dd5306f8609b54cd644c4748ba441c178f51967003a062e3ed451ad6c64a6c5d1600341bce674d5a6c8148002a4d6e3751d464d3572d6900b97683b163","name":"example_ASN_characteristics.csv","type":"text/csv","lastModified":1710483852569.292,"size":1964998},{"id":"87b2eb41f37897bb7617ae8c862cb41e75260f85625cf8457da17a199f06b260349723078914ffbd7b01a4a1b07c1b1cc5aae94401b76a4252efbcdbc66319c5","href":"https://static.observableusercontent.com/files/87b2eb41f37897bb7617ae8c862cb41e75260f85625cf8457da17a199f06b260349723078914ffbd7b01a4a1b07c1b1cc5aae94401b76a4252efbcdbc66319c5","name":"4.png","type":"image/png","lastModified":1710483852569.292,"size":22801},{"id":"ca5a980410ba44e62fbefae3f2b3858a53e5666f12893ae44a41eeb42b7f3b882c39aa33326e8a0427403e48d854df6e5e590cae8d7106e22ac416b3dc238668","href":"https://static.observableusercontent.com/files/ca5a980410ba44e62fbefae3f2b3858a53e5666f12893ae44a41eeb42b7f3b882c39aa33326e8a0427403e48d854df6e5e590cae8d7106e22ac416b3dc238668","name":"5.png","type":"image/png","lastModified":1710483852569.292,"size":21434},{"id":"d33b11c4dbb30eb71cf5be3a9b61b31a97887842b6e046f1e5054687966f54c2148385765ed9dad78f9a79836066fb32934c800325693906fa65d3404b150bdb","href":"https://static.observableusercontent.com/files/d33b11c4dbb30eb71cf5be3a9b61b31a97887842b6e046f1e5054687966f54c2148385765ed9dad78f9a79836066fb32934c800325693906fa65d3404b150bdb","name":"7.png","type":"image/png","lastModified":1710483852569.292,"size":26778},{"id":"4a322b2c3570c0679e31c5df9dfd88f34ba7351f5c15ef928c2e1ad1f5ddd3aea4060a95ee7b04b7fbad8131a8865d235e1e35b7fc650cb9c9f47c7d116e54f1","href":"https://static.observableusercontent.com/files/4a322b2c3570c0679e31c5df9dfd88f34ba7351f5c15ef928c2e1ad1f5ddd3aea4060a95ee7b04b7fbad8131a8865d235e1e35b7fc650cb9c9f47c7d116e54f1","name":"Screenshot_20230217_152328.png","type":"image/png","lastModified":1710483852569.292,"size":13011},{"id":"bae187b52c8e41f70995c7ac32cbe440570f326a1f0819976d9909396b0a4b1f8269f3bfa8297c8cc212734713d554abc855ad40e07d3d3ba5fc1ffd04871b5c","href":"https://static.observableusercontent.com/files/bae187b52c8e41f70995c7ac32cbe440570f326a1f0819976d9909396b0a4b1f8269f3bfa8297c8cc212734713d554abc855ad40e07d3d3ba5fc1ffd04871b5c","name":"Screenshot_20230214_051440.png","type":"image/png","lastModified":1710483852569.292,"size":27116},{"id":"ff3cb25ca3419c99f559897cd3fabb457bb6993ac67d579e1643280f86a5d2fb23c29e76cd17e336fdcbdaa2a62dc9a16ec72970d6cb71133ba147a340098400","href":"https://static.observableusercontent.com/files/ff3cb25ca3419c99f559897cd3fabb457bb6993ac67d579e1643280f86a5d2fb23c29e76cd17e336fdcbdaa2a62dc9a16ec72970d6cb71133ba147a340098400","name":"1.png","type":"image/png","lastModified":1710483852569.292,"size":27887},{"id":"4d87e545bc40ec39cda22f819bd04c4fd45d2aee840ffafd5b4b928154af3cec73ab5fbc39204cd1429ae8bfdac2d202f23a6f99bd5fdf1f73a8d890d64044b6","href":"https://static.observableusercontent.com/files/4d87e545bc40ec39cda22f819bd04c4fd45d2aee840ffafd5b4b928154af3cec73ab5fbc39204cd1429ae8bfdac2d202f23a6f99bd5fdf1f73a8d890d64044b6","name":"11.png","type":"image/png","lastModified":1710483852569.292,"size":9740},{"id":"addc58df649e468970e25227cc2b3cf30860e9675329915a640f2bfba680c544a89c26441d589f1bc2df69544735a795af572207bbb2bbd8c2f4334c6b26fc24","href":"https://static.observableusercontent.com/files/addc58df649e468970e25227cc2b3cf30860e9675329915a640f2bfba680c544a89c26441d589f1bc2df69544735a795af572207bbb2bbd8c2f4334c6b26fc24","name":"3.png","type":"image/png","lastModified":1710483852569.292,"size":18174},{"id":"a5c2c32b70b15f77da79cf5f547d39f1b85f51b069e513b9acc618a8ffd4ea86ae1ff2a51227d119a74b01abf6006f90cf88281efedad57ab3c672a9813034ee","href":"https://static.observableusercontent.com/files/a5c2c32b70b15f77da79cf5f547d39f1b85f51b069e513b9acc618a8ffd4ea86ae1ff2a51227d119a74b01abf6006f90cf88281efedad57ab3c672a9813034ee","name":"6.png","type":"image/png","lastModified":1710483852569.292,"size":19676},{"id":"ffadf8f85d6660721dc931b5b27c6961110e2a76d8f6ab8ba10021e922b91fcca3a81268b6569c79ccba562d1ebef3e8c7a97218ecd6c65052d43b356887e297","href":"https://static.observableusercontent.com/files/ffadf8f85d6660721dc931b5b27c6961110e2a76d8f6ab8ba10021e922b91fcca3a81268b6569c79ccba562d1ebef3e8c7a97218ecd6c65052d43b356887e297","name":"9.png","type":"image/png","lastModified":1710483852569.292,"size":30617},{"id":"4abd9fbac272c8d7550b9b3dfd7d9256b080393b32dfb0cfaa7766fca8e24b08b45658f4ba1fe58133932ef07a69edbb578f59cfb76c982c4fd933126feda0b3","href":"https://static.observableusercontent.com/files/4abd9fbac272c8d7550b9b3dfd7d9256b080393b32dfb0cfaa7766fca8e24b08b45658f4ba1fe58133932ef07a69edbb578f59cfb76c982c4fd933126feda0b3","name":"10.png","type":"image/png","lastModified":1710483852569.292,"size":132119}] 2f:{"id":"57d2ee478ddd0170","slug":null,"title":"Plug and Plot: Reusable visualizations for AS-hegemony data","thumbnail":"6ed51b27fabc8a84f382a1d056ec77998dfa3cd6ffa8d52f19365ca466611cd2","access_level":"public","create_time":"$D2024-03-15T06:24:12.569Z","update_time":"$D2024-03-15T06:24:12.569Z","view_time":null,"first_public_time":"$D2024-03-15T06:24:12.569Z","has_unpublished_edits":null,"fork":{"id":"53021bcabab30706","slug":"hegemony","title":"Plug and Plot: Reusable visualizations for AS-hegemony data","owner":{"id":"97988ae008beb73a","login":"tasos","name":"Tasos Meletlidis"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0170430527ed95c4","login":"internethealthreport","name":"Internet Health Report","avatar_url":"https://avatars-next.observableusercontent.com/aa9a3dd911fb6b7a932e22654b625514efbfb7c4ddbc8dfbcbc0eb9a3f0bfb2c","tier":"starter_2024"},"version":3437,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"98e1b86f103598bc","login":"dimitrios","name":"Dimitrios","avatar_url":"https://avatars-next.observableusercontent.com/4d535e04cdb3571d4b8909b07ae53e80f6a25dc4123ac1e851cb381a876b2d0e","tier":null}],"members":[{"type":"individual","id":"98e1b86f103598bc","login":"dimitrios","name":"Dimitrios","avatar_url":"https://avatars-next.observableusercontent.com/4d535e04cdb3571d4b8909b07ae53e80f6a25dc4123ac1e851cb381a876b2d0e","tier":null,"role":"editor"},{"type":"team","id":"0170430527ed95c4","login":"internethealthreport","name":"Internet Health Report","avatar_url":"https://avatars-next.observableusercontent.com/aa9a3dd911fb6b7a932e22654b625514efbfb7c4ddbc8dfbcbc0eb9a3f0bfb2c","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"41cd057c6a5a8e1f","slug":"gsoc-2022-plug-and-plot-with-internet-data","title":"GSoC 2022: Plug and Plot with Internet data","owner":{"id":"0170430527ed95c4","login":"internethealthreport","name":"Internet Health Report"}},"type":"notebook","body":{"titling":"auto","title":"Plug and Plot: Reusable visualizations for AS-hegemony data","cells":[{"id":186,"value":"# Plug and Plot: Reusable visualizations for AS-hegemony data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3425,"value":"#### Overview","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3418,"value":"This notebook contains reusable code blocks for visualizations related to the AS-hegemony data. The code blocks retrieve data from the AS-hegemony API and generate visualizations that extend the visualization on the AS-hegemony webpage.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3423,"value":"The goal of this project is to give researchers an easy way to interact with and embed [Internet Health Report](https://ihr.iijlab.net/) data on their own posts whether those are within the [ObservableHQ](https://observablehq.com/) platform or hosted externally.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":495,"value":"You can (i) directly use the notebook to visualize the queried data with your own customized parameters, and/or (ii) copy the code and use it in your own page/notebook (and you could also then embed the visualizations as iframes). Below, you can find all the visualizations, which are also provided -for your convenience- in separate notebooks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3388,"value":"#### Credits","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3390,"value":"The code has been developed as a part of a Google Summer of Code project [https://summerofcode.withgoogle.com/programs/2022/organizations/internet-health-report](https://summerofcode.withgoogle.com/programs/2022/organizations/internet-health-report), [https://github.com/InternetHealthReport/gsoc](https://github.com/InternetHealthReport/gsoc), which was supported by IIJ ([Internet Initiative Japan](Internet Initiative Japan)) and IHR ([Internet Health Report](https://ihr.iijlab.net/ihr/en-us/)). \n\nThe main developer is [Tasos Meletlidis](https://www.tmeletlidis.tech/), Datalab, AUTh \n\nHis work was under the supervision of: \n- [Romain Fontugne](https://twitter.com/romain_fontugne), IIJ Research Lab\n- [Emile Aben](https://labs.ripe.net/author/emileaben/), RIPE NCC\n- [Pavlos Sermpezis](https://sermpezis.github.io/), Datalab, AUTh \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"# How to use each component","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3401,"value":"Enter the a start/end date range by using the date pickers and fill in the ASN, and any other required input. Hegemony data from the IHR API will be fetched for the specified parameters and date range. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3403,"value":"**screenshot:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3395,"value":"FileAttachment(\"11.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"**There is an 7 day range limit on the API** so expect errors if you select a bigger range. If you want to explore a larger range you can use the sampling component [here](https://observablehq.com/@tasos/dependency-timeseries-sampling?collection=@tasos/reusable-ihr-plots).\n\nIt may take a minute or two to load all the data depending on network size.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":236,"value":"# Visualization components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3252,"value":"#### AS Dependencies (Timeseries)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3265,"value":"Link to component","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3261,"value":"**screenshot:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3257,"value":"FileAttachment(\"1.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2014,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3278,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3345,"value":"#### AS Dependencies for Large Time Windows [with sampling] (Timeseries)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3347,"value":"Link to component","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3349,"value":"**screenshot:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3351,"value":"FileAttachment(\"Screenshot_20230214_051440.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3354,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3367,"value":"#### Country Hegemony Graph (Graph Plot)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3369,"value":"Link to component","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3371,"value":"**screenshot:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3373,"value":"FileAttachment(\"10.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2875,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1373,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1938,"value":"## Imports, external libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1888,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2273,"value":"## Utility functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2277,"value":"### ASN validation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2280,"value":"function validateASN(ASN) {\n const toCheck = parseInt(ASN);\n \n if (!toCheck) {\n return false;\n }\n\n if (toCheck < 1 || toCheck > 4294967295) {\n return false;\n }\n\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2434,"value":"### Country code validation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2436,"value":"async function validateCountryCode(countryCode) {\n if (typeof countryCode != \"string\") {\n return false;\n }\n \n if (countryCode.length != 2) {\n return false;\n }\n \n if (!Boolean(countryCode.match(/[A-Z]/))) {\n return false;\n }\n\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2302,"value":"### Date validation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2296,"value":"function validateDate(date) {\n const dateRegex = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;\n \n if (!dateRegex.test(date)) {\n return false;\n }\n \n return true;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2607,"value":"### Weight scheme validation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2609,"value":"function validateWeightScheme(weightScheme) {\n if (weightScheme == \"as\" || weightScheme == \"eyeball\") {\n return true;\n } else {\n return false;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1987,"value":"## Datasets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":688,"value":"example_asn_characteristics = FileAttachment(\"example_ASN_characteristics.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"formatted_asn_characteristics = {\n const file_keys = Object.keys(example_asn_characteristics[0]);\n \n file_keys.shift();\n const key_array = [];\n \n file_keys.forEach((element) => {\n key_array.push(element)\n });\n \n return example_asn_characteristics.reduce((obj, item) => {\n const key_object = {};\n \n key_array.forEach((element, idx) => {\n key_object[element] = item[element];\n });\n\n return Object.assign(obj, {[item.ASN]: key_object})\n }, {});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1016,"value":"groupFields = {\n const file_keys = Object.keys(example_asn_characteristics[0]);\n file_keys.shift();\n return file_keys;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1"}} 30:"$2f:body"