2f:T1140,chart = { // define parameters const width = 900; const height = 500; const margin = 30; const radius = (height-(margin*2)) / 2; const dotRadius = 4; const axisCircles = 4; const axisLabelFactor = 1.12; const wrapWidth = 60; const radarLine = d3.lineRadial() .curve(d3["curveLinearClosed"]) .radius(d => rScale(d)) .angle((d, i) => -angleSlice*i); const rScale = d3.scaleLinear() .domain([0, maxValue]) .range([0, radius]) const svg = d3.select(DOM.svg(width, height+(margin*2))) .style('preserveAspectRatio', "xMinYMin met"); const containerWidth = width-(margin*2); const containerHeight = height-(margin*2); const container = svg.append('g') .attr("width", containerWidth) .attr("height", containerHeight) .attr('transform', `translate(${(width/3)+margin}, ${(height/2)+margin})`); // draw the grid var axisGrid = container.append("g") .attr("class", "axisWrapper"); axisGrid.selectAll(".levels") .data(d3.range(1,(axisCircles+1)).reverse()) .enter() .append("circle") .attr("class", "gridCircle") .attr("r", (d, i) => radius/axisCircles*d) .style("fill", "#CDCDCD") .style("stroke", "#CDCDCD") .style("fill-opacity", 0.1); // draw scale at circles var gridGraduation = container.append("g") .attr("class", "gridGraduation"); gridGraduation.selectAll(".levels") .data(d3.range(1,(axisCircles+1)).reverse()) .enter() .append("text") .attr("class", "graduation") .style("font-size", "11px") .attr("text-anchor", "middle") .attr("font-family", "monospace") .attr("fill","gray") .attr("dy", "0.35em") .attr("x", (d, i) => 0) .attr("y", (d, i) => 0 - radius/axisCircles*d) .text(d => String(Math.round(d*maxValue/axisCircles*10)/10)); // draw the axes and labels const axis = axisGrid.selectAll(".axis") .data(axesDomain) .enter() .append("g") .attr("class", "axis"); axis.append("line") .attr("x1", 0) .attr("y1", 0) .attr("x2", (d, i) => rScale(maxValue) * Math.cos(-angleSlice*i - Math.PI/2)) .attr("y2", (d, i) => rScale(maxValue) * Math.sin(-angleSlice*i - Math.PI/2)) .attr("class", "line") .style("stroke", "#CDCDCD") .style("stroke-width", "2px"); axis.append("text") .attr("class", "legend") .style("font-size", "11px") .attr("text-anchor", "middle") .attr("font-family", "monospace") .attr("dy", "0.35em") .attr("x", (d, i) => rScale(maxValue * axisLabelFactor) * Math.cos(-angleSlice*i - Math.PI/2)) .attr("y", (d, i) => rScale(maxValue * axisLabelFactor) * Math.sin(-angleSlice*i - Math.PI/2)) .text(d => bias_dimension_labels_to_show[d]); // draw the lines const plots = container.append('g') .selectAll('g') .data(formattedData) .join('g') // .attr("data-name", (d, i) => type(i)) // .attr("fill", "none") // .attr("stroke", "steelblue"); plots.append('path') .attr("d", d => radarLine(d.map(v => v.value))) .attr("fill", (d, i) => color(i)) .attr("fill-opacity", 0.1) .attr("stroke", (d, i) => color(i)) .attr("stroke-width", 2); // plots.selectAll("circle") // .data(d => d) // .join("circle") // .attr("r", dotRadius) // .attr("cx", (d,i) => rScale(d.value) * Math.cos(-angleSlice*(i)-Math.PI/2)) // .attr("cy", (d,i) => rScale(d.value) * Math.sin(-angleSlice*(i)-Math.PI/2)) // .style("fill-opacity", 0.8); //legend const labels = selected_monitor_sets const maxword = d3.max(labels, d =>d.length) const r = width/110 const x = width/2.3 - 8*r - 4*maxword; const y = -height/2 +4*r ;//cfg.h / 2 + 100; var legend = container.selectAll("mydots") .data(labels) .enter() .append("circle") .attr("cx", x) .attr("cy", function(d,i){ return y + i*25}) // 100 is where the first dot appears. 25 is the distance between dots .attr("r", r) .style("fill", (d,i) => color(i)) // .style("filter", "url(#glow)"); container.selectAll("mydots") .data(labels) .enter() .append("text") .attr("x", x + 15) .attr("y", function(d,i){ return y + i*25}) // 100 is where the first dot appears. 25 is the distance between dots .style("fill", (d,i) => color(i)) .style("font-size", "11px") .text(d => d) .attr("text-anchor", "left") .style("alignment-baseline", "middle"); return svg.node(); }30:T50a,dist_plot = { let data_to_plot = data_fetched_joined.filter(e=>e.xlabel == bias_dimension_labels_new[bias_dimensions_selection])[0]; if (data_to_plot["bars"] !== undefined) { return Plot.plot({ width: 1200, x: {axis: null}, y: {tickFormat: "s"}, color: {range: ["#5e569b","#EDC951","#CC333F","#00A0B0","#ab3da9","#a6d75b", "#115f9a"], legend: true}, marks: [ Plot.barY(dist_plot_data_formatted, { x: "AS", y: "value", fill: "AS", fx: d => d[bias_dimensions_selection], sort: {x: null, color: null, fx: "y", order: "descending", reduce: "max"} }), Plot.axisX({ tickFormat: d => d[bias_dimensions_selection], // tickRotate: -45, label: bias_dimensions_selection, }), Plot.ruleY([0]), ] }) } else { return Plot.plot({ width: 1200, color: {range: ["#5e569b","#EDC951","#CC333F","#00A0B0","#ab3da9","#a6d75b", "#115f9a"], legend: true}, x: { type: "log", }, y: { grid: true, label: `↑ ${data_to_plot['ylabel']}` }, marks: [ Plot.ruleY([0]), Plot.lineY(dist_plot_data_formatted, {x: data_to_plot['xlabel'], y: data_to_plot['ylabel'], z: "AS", stroke: "AS"}) ] }) } }31:T649,dist_plot_data_formatted = { let data_to_plot = data_fetched_joined.filter(e=>e.xlabel == bias_dimension_labels_new[bias_dimensions_selection])[0]; let dataArr = []; if (data_to_plot["bars"] !== undefined) { let data_to_plot_bars = data_to_plot['bars']; for (let j=0; j response.json());\n const dataRIS = await fetch(\"https://ai4netmon.csd.auth.gr/api/bias/RIS\").then((response) => response.json());\n const dataRouteViews = await fetch(\"https://ai4netmon.csd.auth.gr/api/bias/RouteViews\").then((response) => response.json());\n let dataNew = [];\n for (let i=0; i (data_custom_new.filter(e => bias_dimensions.includes(e.tag)).map(e => ({axis:e.tag, value:e[m]}))))","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"data_custom_new = {\n let x = JSON.parse(JSON.stringify(data_fetched));\n if (custom_set_formatted.length > 0) {\n for (var i = 0; i < data_fetched.length; i++) {\n let tt = data_fetched[i][\"tag\"];\n let tk = bias_dimension_labels_new[tt];\n let bias_dict;\n bias_dict = custom_set_query[\"bias\"]\n x[i][\"My 1st Custom Set\"] = bias_dict[tk]\n }\n }\n if (custom_set_formatted1.length > 0) {\n for (var i = 0; i < data_fetched.length; i++) {\n let tt = data_fetched[i][\"tag\"]\n let tk = bias_dimension_labels_new[tt]\n let bias_dict\n bias_dict = custom_set_query1[\"bias\"]\n x[i][\"My 2nd Custom Set\"] = bias_dict[tk]\n }\n }\n if (custom_set_formatted2.length > 0) {\n for (var i = 0; i < data_fetched.length; i++) {\n let tt = data_fetched[i][\"tag\"]\n let tk = bias_dimension_labels_new[tt]\n let bias_dict\n bias_dict = custom_set_query2[\"bias\"]\n x[i][\"My 3rd Custom Set\"] = bias_dict[tk]\n }\n }\n return x\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1284,"value":"##### Monitor Sets","pinned":false,"hidden":false,"mode":"md"},{"id":454,"value":"monitor_sets = [\"RIPE RIS\", \"RIPE Atlas\", \"RouteViews\", \"My 1st Custom Set\", \"My 2nd Custom Set\", \"My 3rd Custom Set\"]//data.columns.slice(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"selected_monitor_sets = monitor_sets.filter(e => checkboxes_monitor_sets.includes(e))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1261,"value":"##### Bias dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":957,"value":"bias_dimensions = data_fetched.map(o=>o.tag).filter(e => checkboxes_bias_dimensions.includes(bias_dimension_labels_to_show[e]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":932,"value":"bias_dimension_labels_to_show = ({\n \"RIR region\": \"RIR region\",\n \"Country\": \"Country\",\n \"Continent\": \"Continent\",\n \"Customer cone (#ASNs)\": \"Customer cone (#ASNs)\",\n \"Customer cone (#pfxs)\": \"Customer cone (#pfxs)\",\n \"Customer cone (#addresses)\": \"Customer cone (#addresses)\",\n \"AS Hegemony\": \"AS Hegemony\",\n \"CTI origin\": \"CTI origin\",\n \"CTI top\": \"CTI top\",\n \"#neighbors (total)\": \"#neighbors (total)\",\n \"#peers\": \"#peers\",\n \"#customers\": \"#customers\",\n \"#providers\": \"#providers\",\n \"#IXPs\": \"#IXPs\",\n \"#facilities\": \"#facilities\",\n \"Peering policy\": \"Peering policy\",\n \"ASDB C1L1\": \"ASDB C1L1\",\n \"ASDB C1L2\": \"ASDB C1L2\",\n \"Net. type\": \"Net. type\",\n \"Traffic ratio\": \"Traffic ratio\",\n \"Traffic volume\": \"Traffic volume\",\n \"Scope\": \"Scope\",\n \"Personal ASN\": \"Personal ASN\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":851,"value":"bias_dimension_labels_new = ({\n \"RIR region\": \"RIR region\",\n \"Country\": \"Location (country)\",\n \"Continent\": \"Location (continent)\",\n \"Customer cone (#ASNs)\": \"Customer cone (#ASNs)\",\n \"Customer cone (#pfxs)\": \"Customer cone (#prefixes)\",\n \"Customer cone (#addresses)\": \"Customer cone (#addresses)\",\n \"AS Hegemony\": \"AS hegemony\",\n \"CTI origin\": \"Country influence (CTI origin)\",\n \"CTI top\": \"Country influence (CTI top)\",\n \"#neighbors (total)\": \"#neighbors (total)\",\n \"#peers\": \"#neighbors (peers)\",\n \"#customers\": \"#neighbors (customers)\",\n \"#providers\": \"#neighbors (providers)\",\n \"#IXPs\": \"#IXPs (PeeringDB)\",\n \"#facilities\": \"#facilities (PeeringDB)\",\n \"Peering policy\": \"Peering policy (PeeringDB)\",\n \"ASDB C1L1\": \"ASDB C1L1\",\n \"ASDB C1L2\": \"ASDB C1L2\",\n \"Net. type\": \"Network type (PeeringDB)\",\n \"Traffic ratio\": \"Traffic ratio (PeeringDB)\",\n \"Traffic volume\": \"Traffic volume (PeeringDB)\",\n \"Scope\": \"Scope (PeeringDB)\",\n \"Personal ASN\": \"Personal ASN\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"bias_dimension_labels_chart = {\n const bias_dimension_labels_chart = {};\n for (let i=0; i Math.max(...Object.values(o).filter(v => typeof v === 'number'))))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1234,"value":"##### Custom sets","pinned":false,"hidden":false,"mode":"md"},{"id":627,"value":"custom_set_query = {\n let custom_data;\n if (set_numbers_type === \"ASNs\") {\n custom_data = await fetch(\"https://ai4netmon.csd.auth.gr/api/bias/asn/?asn=\"+custom_set_formatted+\".json\").then((response) => response.json());\n } else {\n custom_data = await fetch(\"https://ai4netmon.csd.auth.gr/api/bias/probe?probe=\"+custom_set_formatted+\".json\").then((response) => response.json());\n }\n return custom_data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"custom_set_formatted = {\n let custom_set_data;\n if (set_numbers_type === \"ASNs\") {\n custom_set_data = custom_set.replaceAll(\",\",\"&asn=\");\n } else {\n custom_set_data = custom_set.replaceAll(\",\",\"&probe=\");\n }\n return custom_set_data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"custom_set_query1 = {\n let custom_data;\n if (set_numbers_type === \"ASNs\") {\n custom_data = await fetch(\"https://ai4netmon.csd.auth.gr/api/bias/asn/?asn=\"+custom_set_formatted1+\".json\").then((response) => response.json());\n } else {\n custom_data = await fetch(\"https://ai4netmon.csd.auth.gr/api/bias/probe?probe=\"+custom_set_formatted1+\".json\").then((response) => response.json());\n }\n return custom_data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"custom_set_formatted1 = {\n let custom_set_data;\n if (set_numbers_type === \"ASNs\") {\n custom_set_data = custom_set1.replaceAll(\",\",\"&asn=\");\n } else {\n custom_set_data = custom_set1.replaceAll(\",\",\"&probe=\");\n }\n return custom_set_data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1242,"value":"custom_set_query2 = {\n let custom_data;\n if (set_numbers_type === \"ASNs\") {\n custom_data = await fetch(\"https://ai4netmon.csd.auth.gr/api/bias/asn/?asn=\"+custom_set_formatted2+\".json\").then((response) => response.json());\n } else {\n custom_data = await fetch(\"https://ai4netmon.csd.auth.gr/api/bias/probe?probe=\"+custom_set_formatted2+\".json\").then((response) => response.json());\n }\n return custom_data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1244,"value":"custom_set_formatted2 = {\n let custom_set_data;\n if (set_numbers_type === \"ASNs\") {\n custom_set_data = custom_set2.replaceAll(\",\",\"&asn=\");\n } else {\n custom_set_data = custom_set2.replaceAll(\",\",\"&probe=\");\n }\n return custom_set_data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"### Plotting","pinned":false,"hidden":false,"mode":"md"},{"id":270,"value":"##### Plotting functions","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"color = d3.scaleOrdinal()\n .range([\"#EDC951\",\"#CC333F\",\"#00A0B0\",\"#ab3da9\",\"#a6d75b\", \"#115f9a\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"// radarLine = d3.lineRadial()\n// .curve(d3[\"curveLinear\"])\n// .radius(d => rScale(d))\n// .angle((d, i) => -angleSlice*i)","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"// rScale = d3.scaleLinear()\n// .domain([0, maxValue])\n// .range([0, radius])","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"##### Plotting parameters","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"axesDomain = bias_dimensions","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"angleSlice = 2*Math.PI/bias_dimensions.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"axesLength = bias_dimensions.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"axisCircles = maxValue*10","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"\nmaxValue = Math.ceil(max_bias*10)/10 \n","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"// axisLabelFactor = 1.12","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"// wrapWidth = 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"// dotRadius = 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"// radius = (height-(margin*2)) / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"// height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"// margin = 30","pinned":true,"hidden":false,"mode":"ojs"},{"id":1378,"value":"### Distribution Plots","pinned":false,"hidden":false,"mode":"md"},{"id":1382,"value":"viewof bias_dimensions_selection = {\n // delete Country from bias dimensions list\n const biasArr = Object.keys(bias_dimension_labels_new);\n biasArr.splice(biasArr.findIndex(e => e === \"Country\"),1);\n biasArr.splice(biasArr.findIndex(e => e === \"ASDB C1L2\"),1);\n const select = Inputs.select(biasArr, {label: \"Bias dimensions\", value: biasArr});\n\n select.style.width = \"100%\";\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1388,"value":"#### Plots","pinned":false,"hidden":false,"mode":"md"},{"id":1962,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":1380,"value":"#### Data","pinned":false,"hidden":false,"mode":"md"},{"id":1521,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":2196,"value":"data_to_plot = data_fetched_joined.filter(e=>e.xlabel == bias_dimension_labels_new[bias_dimensions_selection])[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2220,"value":"data_to_plot_curves = data_to_plot[\"curves\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1429,"value":"##### All Data","pinned":false,"hidden":false,"mode":"md"},{"id":1613,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1394,"value":"dist_plots_fetched_data_ATLAS = {\n \n const data = await fetch(\"https://ai4netmon.csd.auth.gr/api/distributions/Atlas\").then((response) => response.json());\n const data_returned = data[0];\n return data_returned;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1400,"value":"dist_plots_fetched_data_RIS = {\n const data = await fetch(\"https://ai4netmon.csd.auth.gr/api/distributions/RIS\").then((response) => response.json());\n const data_returned = data[0];\n return data_returned;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1525,"value":"dist_plots_fetched_data_RouteViews = {\n const data = await fetch(\"https://ai4netmon.csd.auth.gr/api/distributions/RouteViews\").then((response) => response.json());\n const data_returned = data[0];\n return data_returned;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1404,"value":"dist_plots_fetched_data_custom = {\n if (custom_set_formatted !== \"\" && checkboxes_monitor_sets.filter(e => e == \"My 1st Custom Set\").length !== 0) {\n let data;\n if (set_numbers_type === \"ASNs\") {\n data = await fetch(\"https://ai4netmon.csd.auth.gr/api/distributions/custom/?asn=\"+custom_set_formatted+\".json\").then((response) => response.json());\n } else {\n return null;\n // data = await fetch(\"https://ai4netmon.csd.auth.gr/api/distributions/?probe=\"+custom_set_formatted+\".json\").then((response) => response.json());\n }\n const data_returned = data[0];\n return data_returned;\n } else return null;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1415,"value":"dist_plots_fetched_data_custom1 = {\n if (custom_set_formatted1 !== \"\" && checkboxes_monitor_sets.filter(e => e == \"My 2nd Custom Set\").length !== 0) {\n let data;\n if (set_numbers_type === \"ASNs\") {\n data = await fetch(\"https://ai4netmon.csd.auth.gr/api/distributions/custom/?asn=\"+custom_set_formatted1+\".json\").then((response) => response.json());\n } else {\n return null;\n // data = await fetch(\"https://ai4netmon.csd.auth.gr/api/distributions/?probe=\"+custom_set_formatted1+\".json\").then((response) => response.json());\n }\n const data_returned = data[0];\n return data_returned;\n } else return null;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1418,"value":"dist_plots_fetched_data_custom2 = {\n if (custom_set_formatted2 !== \"\" && checkboxes_monitor_sets.filter(e => e == \"My 3rd Custom Set\").length !== 0) {\n let data;\n if (set_numbers_type === \"ASNs\") {\n data = await fetch(\"https://ai4netmon.csd.auth.gr/api/distributions/custom/?asn=\"+custom_set_formatted2+\".json\").then((response) => response.json());\n } else {\n return null;\n // data = await fetch(\"https://ai4netmon.csd.auth.gr/api/distributions/?probe=\"+custom_set_formatted2+\".json\").then((response) => response.json());\n }\n const data_returned = data[0];\n return data_returned;\n } else return null;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"import {select} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"import {curveTypes} from \"@palewire/d3-curves-inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"_ = require(\"underscore\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}