Senior Data Scientist
Public
Edited
Mar 30, 2023
test_vects.map((v) => elo_scores[vector2macrovector(v)])
test_vects = [
"CVSS:4.0/AV:N/AC:L/AT:N/PR:N/UI:N/VC:N/VI:N/VA:N/SC:H/SI:H/SA:H",
"CVSS:4.0/AV:N/AC:L/AT:N/PR:N/UI:N/VC:H/VI:H/VA:H/SC:N/SI:N/SA:N",
"CVSS:4.0/AV:N/AC:L/AT:N/PR:L/UI:N/VC:H/VI:H/VA:H/SC:N/SI:N/SA:N",
"CVSS:4.0/AV:N/AC:L/AT:N/PR:N/UI:N/VC:N/VI:N/VA:N/SC:N/SI:N/SA:H",
"CVSS:4.0/AV:N/AC:L/AT:N/PR:N/UI:N/VC:N/VI:N/VA:H/SC:N/SI:N/SA:N",
"CVSS:4.0/AV:A/AC:L/AT:N/PR:N/UI:N/VC:N/VI:N/VA:N/SC:N/SI:N/SA:H",
"CVSS:4.0/AV:A/AC:L/AT:N/PR:N/UI:N/VC:N/VI:N/VA:H/SC:N/SI:N/SA:N",
"CVSS:4.0/AV:L/AC:L/AT:N/PR:L/UI:N/VC:N/VI:N/VA:N/SC:N/SI:N/SA:H",
"CVSS:4.0/AV:L/AC:L/AT:N/PR:N/UI:N/VC:N/VI:N/VA:H/SC:N/SI:N/SA:N",
"CVSS:4.0/AV:N/AC:L/AT:P/PR:N/UI:N/VC:N/VI:N/VA:H/SC:N/SI:N/SA:N",
"CVSS:4.0/AV:L/AC:L/AT:N/PR:L/UI:N/VC:N/VI:N/VA:H/SC:N/SI:N/SA:N"
]
vector_str = "CVSS:4.0/AV:N/AC:H/AT:P/PR:H/UI:A/VC:H/VI:H/VA:L/SC:N/SI:L/SA:H/CR:H/IR:H/AR:H"
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const mv_labels = svg.append("g");
const max_vects = svg.append("g");
const elo_thermos = svg
.append("g")
.style("fill", "#FFFFFF")
.style("stroke", "#000000");
const ord_thermos = svg
.append("g")
.style("fill", "#FFFFFF")
.style("stroke", "#000000");
const elo_therm_fill = svg
.append("g")
.style("fill", "#a8590b")
.style("stroke", null);
const ord_therm_fill = svg
.append("g")
.style("fill", "#4B3A93")
.style("stroke", null);
const elo_points = svg.append("g");
const ord_points = svg.append("g");
svg
.style("font-family", "sans-serif")
.style("text-anchor", "start")
.style("font-weight", 900);
svg
.append("text")
.attr("x", x01(0))
.attr("y", margin.top)
.text(vector_str);
let mv = vector2macrovector(vector_str);
svg
.append("text")
.attr("x", x01(0.5))
.attr("y", margin.top + 32)
.text(mv);
svg
.append("text")
.attr("x", x01(0))
.attr("y", margin.top + 60)
.style("font-weight", 100)
.text(elo_scores[mv]);
svg
.append("text")
.attr("x", x.range()[1])
.attr("y", margin.top + 60)
.style("font-weight", 100)
.text(Math.round(10 * x.domain()[1]) / 10);
mv_labels
.selectAll("text")
.data(Object.entries(macro2object(mv)))
.join("text")
.attr("y", (d) => y_eq(d[0]) + y_eq.bandwidth() / 2)
.attr("x", margin.left)
.text((d) => d[1]);
elo_points
.selectAll("circle")
.data(point_data)
.join("circle")
.attr("cx", (d) => x(d[1].mode5))
.attr("cy", (d) => y_eq(d[0]) + y_eq.bandwidth() / 6)
.attr("r", 7)
.style("fill", d=> d[1]);
return svg.node();
}
point_color_scale = d3
.scaleOrdinal(d3.schemeCategory10)
.domain(["mode0", "mode2", "mode3", "mode5", "mode6"])
x = d3
.scaleLinear()
.domain([
elo_scores[vector2macrovector(vector_str)],
d3.min(Object.values(point_data).map((d) => d3.min(Object.values(d[1]))))
])
.range([margin.left + 40, width - margin.right])
point_data = Object.entries(data_adjustments).flatMap((eq_d) => {
let d = eq_d[1];
let eq = parseInt(eq_d[0]) + 1;
let elo_range = d.elo_dist.min_dist - d.elo_dist.max_dist;
let ordinal_range = d.ordinal_dist.min_dist - d.ordinal_dist.max_dist - 1;
let elo_perc =
elo_range == 0
? 0
: (d.elo_dist.dist_from_top - d.elo_dist.max_dist) / elo_range;
let ordinal_perc =
ordinal_range == 0
? 0
: (d.ordinal_dist.dist_from_top - d.ordinal_dist.max_dist) /
ordinal_range;
let next_mv_val =
d.next_lower_macrovector_value === undefined
? d.mv_value
: d.next_lower_macrovector_value;
let vect_min =
d.next_lower_macrovector_value === undefined
? d.mv_value
: d.mv_value - next_mv_val;
let mode3 =
d.next_lower_macrovector_value === undefined
? d.mv_val
: d.mv_value - ordinal_perc * (d.mv_value - next_mv_val - 0.1);
let mode6 =
d.next_lower_macrovector_value === undefined
? d.mv_val
: d.mv_value - elo_perc * (d.mv_value - next_mv_val - 0.1);
return [
"eq" + eq,
{
mode0: d.mv_value,
mode5: d.mv_value + (d.elo_dist.dist_from_top - d.elo_dist.max_dist),
mode2:
d.mv_value +
0.1 * (d.ordinal_dist.dist_from_top - d.ordinal_dist.max_dist),
mode6: mode6, //Mode 6, 7
mode3: mode3 // mode 3, 4
}
];
})
y_eq = d3
.scaleBand()
.domain([1, 2, 3, 4, 5, 6].map((i) => "eq" + i))
.range([margin.top + 64, height - margin.bottom])
.padding(0)
x01 = d3
.scaleLinear()
.domain([0, 1])
.range([margin.left, width - margin.right])
width = 800
height = 480
margin = ({ top: 20, bottom: 20, left: 20, right: 50 })
d3 = require("d3")
data_adjustments = {
let vector = vect2object(vector_str);
let adjustment_data = ["eq1", "eq2", "eq3", "eq4", "eq5", "eq6"].map((eq) => {
let mv = macro2object(vector2macrovector(vector));
let mv_value = elo_scores[object2macro(mv)];
let next_mv = find_next_lower_macrovector(mv, eq);
let next_mv_value = next_mv === undefined ? undefined : elo_scores[next_mv];
return {
macrovector: object2macro(mv),
mv_value: mv_value,
next_lower_macrovector: next_mv,
next_lower_macrovector_value: next_mv_value,
elo_dist: construct_differences(
vector,
mv,
next_mv === undefined ? undefined : macro2object(next_mv),
eq,
macrovector_elo_extrema,
elo_adjustments
),
ordinal_dist: construct_differences(
vector,
mv,
next_mv === undefined ? undefined : macro2object(next_mv),
eq,
macrovector_ordinal_extrema,
ordinal_adjustments
)
};
});
return adjustment_data;
}
construct_differences = function (
vector,
mv,
next_mv,
eq,
mv_extrema,
adjustments
) {
let eq_metric_values = Object.fromEntries(
Object.entries(vector).filter(([k, _]) => eq_metrics[eq].includes(k))
);
return {
dist_from_top: decrease_from_top(eq_metric_values, adjustments),
max_dist: mv_extrema[eq][mv[eq]]["max"]["value"],
next_max_dist:
next_mv === undefined
? undefined
: mv_extrema[eq][next_mv[eq]]["max"]["value"],
min_dist: mv_extrema[eq][mv[eq]]["min"]["value"]
};
}
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.
