// radarLine = d3.lineRadial()
// .curve(d3["curveLinear"])
// .radius(d => rScale(d))
// .angle((d, i) => -angleSlice*i)
// rScale = d3.scaleLinear()
// .domain([0, maxValue])
// .range([0, radius])
// axisLabelFactor = 1.12
// wrapWidth = 60
// dotRadius = 4
// radius = (height-(margin*2)) / 2
// height = 600
// margin = 30
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"})
]
})
}
}
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<Object.keys(data_to_plot_bars).length; j++) {
for (let i=0; i<Object.keys(Object.entries(data_to_plot_bars)[0][1]).length; i++) {
const dataObj = {};
dataObj['AS'] = Object.keys(data_to_plot_bars)[j];
dataObj[bias_dimensions_selection] = (Object.keys(data_to_plot_bars[Object.keys(data_to_plot_bars)[j]])[i] == undefined ? null : Object.keys(data_to_plot_bars[Object.keys(data_to_plot_bars)[j]])[i]);
dataObj['value'] = (Object.values(data_to_plot_bars[Object.keys(data_to_plot_bars)[j]])[i] == undefined ? null : Object.values(data_to_plot_bars[Object.keys(data_to_plot_bars)[j]])[i]);
if (dataObj[bias_dimensions_selection] !== null) {
dataArr.push(dataObj);
}
}
}
} else {
let data_to_plot_curves = data_to_plot['curves'];
for (let j=0; j<Object.keys(data_to_plot_curves).length; j++) {
if (Object.values(data_to_plot_curves)[j] !== undefined) {
for (let k=0; k<Object.values(data_to_plot_curves)[j]['x'].length; k++) {
const dataObj = {};
dataObj['AS'] = Object.keys(data_to_plot_curves)[j];
dataObj[data_to_plot['xlabel']] = Object.values(data_to_plot_curves)[j]['x'][k];
dataObj[data_to_plot['ylabel']] = Object.values(data_to_plot_curves)[j]['y'][k];
dataArr.push(dataObj);
}
}
}
}
return dataArr;
}
data_to_plot = data_fetched_joined.filter(e=>e.xlabel == bias_dimension_labels_new[bias_dimensions_selection])[0]
data_to_plot_curves = data_to_plot["curves"]
data_fetched_joined = {
let data = [];
for (let i=0; i<dist_plots_fetched_data_ATLAS.length; i++) {
let dataObj = {};
dataObj = dist_plots_fetched_data_ATLAS[i];
if (dataObj["bars"] !== undefined) {
dataObj["bars"]["RIPE RIS"] = dist_plots_fetched_data_RIS[i]["bars"]["RIPE RIS"];
dataObj["bars"]["RouteViews"] = dist_plots_fetched_data_RouteViews[i]["bars"]["RouteViews"];
if (dist_plots_fetched_data_custom !== null) {
dataObj["bars"]["My 1st Custom Set"] = dist_plots_fetched_data_custom[i]["bars"]["Custom set"];
}
if (dist_plots_fetched_data_custom1 !== null) {
dataObj["bars"]["My 2nd Custom Set"] = dist_plots_fetched_data_custom1[i]["bars"]["Custom set"];
}
if (dist_plots_fetched_data_custom2 !== null) {
dataObj["bars"]["My 3rd Custom Set"] = dist_plots_fetched_data_custom2[i]["bars"]["Custom set"];
}
} else {
dataObj["curves"]["RIPE RIS"] = dist_plots_fetched_data_RIS[i]["curves"]["RIPE RIS"];
dataObj["curves"]["RouteViews"] = dist_plots_fetched_data_RouteViews[i]["curves"]["RouteViews"];
if (dist_plots_fetched_data_custom !== null) {
dataObj["curves"]["My 1st Custom Set"] = dist_plots_fetched_data_custom[i]["curves"]["Custom set"];
}
if (dist_plots_fetched_data_custom1 !== null) {
dataObj["curves"]["My 2nd Custom Set"] = dist_plots_fetched_data_custom1[i]["curves"]["Custom set"];
}
if (dist_plots_fetched_data_custom2 !== null) {
dataObj["curves"]["My 3rd Custom Set"] = dist_plots_fetched_data_custom2[i]["curves"]["Custom set"];
}
}
data.push(dataObj);
}
return data;
}
dist_plots_fetched_data_ATLAS = {
const data = await fetch("https://ai4netmon.csd.auth.gr/api/distributions/Atlas").then((response) => response.json());
const data_returned = data[0];
return data_returned;
}
dist_plots_fetched_data_RIS = {
const data = await fetch("https://ai4netmon.csd.auth.gr/api/distributions/RIS").then((response) => response.json());
const data_returned = data[0];
return data_returned;
}
dist_plots_fetched_data_RouteViews = {
const data = await fetch("https://ai4netmon.csd.auth.gr/api/distributions/RouteViews").then((response) => response.json());
const data_returned = data[0];
return data_returned;
}
dist_plots_fetched_data_custom = {
if (custom_set_formatted !== "" && checkboxes_monitor_sets.filter(e => e == "My 1st Custom Set").length !== 0) {
let data;
if (set_numbers_type === "ASNs") {
data = await fetch("https://ai4netmon.csd.auth.gr/api/distributions/custom/?asn="+custom_set_formatted+".json").then((response) => response.json());
} else {
return null;
// data = await fetch("https://ai4netmon.csd.auth.gr/api/distributions/?probe="+custom_set_formatted+".json").then((response) => response.json());
}
const data_returned = data[0];
return data_returned;
} else return null;
}
dist_plots_fetched_data_custom1 = {
if (custom_set_formatted1 !== "" && checkboxes_monitor_sets.filter(e => e == "My 2nd Custom Set").length !== 0) {
let data;
if (set_numbers_type === "ASNs") {
data = await fetch("https://ai4netmon.csd.auth.gr/api/distributions/custom/?asn="+custom_set_formatted1+".json").then((response) => response.json());
} else {
return null;
// data = await fetch("https://ai4netmon.csd.auth.gr/api/distributions/?probe="+custom_set_formatted1+".json").then((response) => response.json());
}
const data_returned = data[0];
return data_returned;
} else return null;
}
dist_plots_fetched_data_custom2 = {
if (custom_set_formatted2 !== "" && checkboxes_monitor_sets.filter(e => e == "My 3rd Custom Set").length !== 0) {
let data;
if (set_numbers_type === "ASNs") {
data = await fetch("https://ai4netmon.csd.auth.gr/api/distributions/custom/?asn="+custom_set_formatted2+".json").then((response) => response.json());
} else {
return null;
// data = await fetch("https://ai4netmon.csd.auth.gr/api/distributions/?probe="+custom_set_formatted2+".json").then((response) => response.json());
}
const data_returned = data[0];
return data_returned;
} else return null;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
