Published
Edited
Mar 17, 2022
1 fork
normal_data.forEach(function(d, index, arr){
d.StartTime = new Date(d.StartTime.split("-")[2].split(" ")[0], d.StartTime.split("-")[1], d.StartTime.split("-")[0], d.StartTime.split(" ")[1].split(":")[0], d.StartTime.split(" ")[1].split(":")[1], d.StartTime.split(" ")[1].split(":")[2].split(".")[0])
})
time_array = normal_data.map(d => d.StartTime)
time_set = time_array.reduce(function(accumulator, currentValue) {
for (var ind = 0; ind < accumulator.length; ind++) {
if (accumulator[ind].getTime() === currentValue.getTime()) {
return accumulator;
}
}
accumulator.push(currentValue);
return accumulator;
}, []);
slider().render()
function filter_data(date_value) {
console.log("I'm called");
var dataToShow = normal_data.filter(function(val, index, array){
return val.StartTime.getTime() === date_value.getTime();
});
drawTable(dataToShow);
}
function slider() {
return Object.assign(d3.sliderHorizontal()
.min(d3.min(time_array))
.max(d3.max(time_array))
.step(1000*60 * 10)
.width(width)
.displayValue(false)
.tickValues(time_set)
.on('end', filter_data), {
render() {
return d3.create("svg")
.attr("viewBox", [-20, -10, width + 40, 53])
.call(this)
.node();
}
});
}
function drawTable(dataset) {
d3.select("#table").remove();
const table = d3.select("#tableContainer").append("table");
table.attr("id", "table");
const groupData = d3.flatGroup(dataset, d => d.SrcAddr);
const columns = [
//{label: "Start", type: "text", format: d => d["StartTime"]},
//{label: "Last", type:"text", format: d =>d["LastTime"]},
{label: "Source", type: "text", format: d => ipaddress_map[d["SrcAddr"]]},
{label: "Destination", type: "text", format: d => ipaddress_map[d["DstAddr"]]},
{label: "Protocol", type: "number", format: d => d["Proto"]},
{label: "S-Port", type: "number", format: d => d["Sport"]},
{label: "D-Port", type: "number", format: d => d["Dport"]},
{label: "Trans", type:"number", format: d=>d["Trans"]},
{label: "Run Time", type:"number", format: d=>d["RunTime"]},
{label: "Idle Time", type:"number", format: d=>d["IdleTime"]},
{label: "S-Packets", type: "number", format: d => d["SrcPkts"]},
{label: "D-Packets", type: "number", format: d => d["DstPkts"]},
{label: "S-Bytes", type: "number", format: d => d["SrcBytes"]},
{label: "D-Bytes", type: "number", format: d => d["DstBytes"]},
{label: "S-Load", type: "number", format: d => d["SrcLoad"]},
{label: "D-Load", type: "number", format: d => d["DstLoad"]},
{label: "S-Loss", type: "number", format: d => d["SrcLoss"]},
{label: "D-Loss", type: "number", format: d => d["DstLoss"]},
{label: "pLoss", type: "number", format: d => d["pLoss"]},
{label: "S-Rate", type: "number", format: d => d["SrcRate"]},
{label: "D-Rate", type: "number", format: d => d["DstRate"]},
{label: "Dir", type: "number", format: d => d["Dir"]},
{label: "TCPRtt", type: "number", format: d => d["TcpRtt"]},
{label: "SynAck", type: "number", format: d => d["SynAck"]},
{label: "AckDat", type: "number", format: d => d["AckDat"]},
{label: "sMeanPktSz", type: "number", format: d => d["sMeanPktSz"], background: function(d) {
return d["sMeanPktSz"] <= 1645 ? sMeanColorScale(normalise(d["sMeanPktSz"], 60, 1645)) : sMeanRedColorScale(normalise(d["sMeanPktSz"], 1646, 2563)) }},
{label: "dMeanPktSz", type: "number", format: d => d["dMeanPktSz"], background: function(d) {
return d["dMeanPktSz"] <= 2000 ? sMeanColorScale(normalise(d["dMeanPktSz"], 0, 2000)) : sMeanRedColorScale(normalise(d["dMeanPktSz"], 2001, 2549))}},
{label: "Flags", type: "number", format: d => d["Flg-e"] + d["Flg-*"] + d["Flg-d"] + d["Flg-g"] + d["Flg-s"] + d["Flg-S"] + d["Flg-D"] + d["Flg-U"] + d["Flg-*2"]},
{label: "ACC", type: "number", format: d => d["ACC"]},
{label: "CLO", type: "number", format: d => d["CLO"]},
{label: "CON", type: "number", format: d => d["CON"]},
{label: "ECO", type: "number", format: d => d["ECO"]},
{label: "FIN", type: "number", format: d => d["FIN"]},
{label: "REQ", type: "number", format: d => d["REQ"]},
{label: "RST", type: "number", format: d => d["RST"]},
{label: "URO", type: "number", format: d => d["URO"]},
{label: "Classification", type: "number", format: d => d["Classification"]},
]
const check = table.select("tbody");
if (check.empty()) {
table.append("thead").append("tr")
.selectAll("thead")
.data(columns, d => d.label)
.join("th")
.text(d => d.label)
.attr("class", d => d.type);
const body = table.append("tbody");
var test = 0
groupData.forEach(function(d) {
body.append("tr")
.style("background", "#707f8e")
.attr("class", "headingIP")
.on("click", function(event, click_d){
var element = d3.select(this).text();
var classClicked = ipaddress_map_reversed.get(element);
if (d3.selectAll("._"+classClicked).classed("displayNoneClass")){
d3.selectAll("._"+classClicked).classed("displayNoneClass", false)
}
else {
d3.selectAll("._"+classClicked).classed("displayNoneClass", true)
}
})
.append("td")
.style("color", "white")
.attr("colspan", columns.length)
.text(ipaddress_map[d[0]]);
d[1].forEach(function(vals){
body.append("tr")
.selectAll("td")
.data(columns)
.enter()
.append("td")
.text(column => column.format(vals))
.attr("class", column => column.type + " hide _" + d[0])
.style("background-color", function(column) {
if (column.background) {
return column.background(vals);
} else {
return false;
}
})
.style("transform", column => column.transform && column.transform(d))
})
})
}
}
sMeanColorScale = d3.interpolateRgb("#6495ED", "white")
// .domain([60, 1645, 2563])
// .range(["#0000FF", " #FFFFFF", "#FF0000"])
sMeanRedColorScale = d3.interpolateRgb("white", "#C70039")
function normalise(value, min, max) {
return (value - min) / (max - min);
}
d3 = require('d3-selection', 'd3-simple-slider', 'd3-scale', 'd3-array', 'd3-axis', 'd3-transition', 'd3-interpolate')
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.
