Data Visualisation
Security Infusion is all about data. Data visualization is a powerful means to discover, understand and reveal important stories that live within vast amounts of information. In order to be effective, charts should not be overly decorative and must be presented in a meaningful way.
Line Chart
Task CPU Consumpion example
</> Code
nv.addGraph(function() {
var chart3 = nv.models.scatterChart()
.color(d3.scale.category10().range())
.showLabels(true)
.useVoronoi(true)
.color(d3.scale.category10().range())
.duration(300);
chart3.xAxis.tickFormat(function(d) { return d3.time.format('%b %d')(new Date(d)); });
chart3.yAxis.axisLabel("Number of listening ports")
.axisLabelDistance(40)
.tickFormat(d3.format('f'));
chart3.forceY(0);
var myData = randomData(4,10);
d3.select('#chart3 svg')
.datum(myData)
.call(chart3);
nv.utils.windowResize(chart3.update);
return chart3;
});
Donut Chart
Common alerts example
</> Code
nv.addGraph(function() {
var chart2 = nv.models.pieChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.showLabels(true)
.labelThreshold(.05)
.labelType("percent")
.donut(true)
.donutRatio(0.35);
d3.select("#chart2 svg")
.datum(exampleData())
.transition().duration(350)
.call(chart2);
return chart2;
});
Scatter / Bubble Chart
Ports usage example
</> Code
nv.addGraph(function() {
var chart3 = nv.models.scatterChart()
.color(d3.scale.category10().range())
.showLabels(true)
.useVoronoi(true)
.color(d3.scale.category10().range())
.duration(300);
chart3.xAxis.tickFormat(function(d) { return d3.time.format('%b %d')(new Date(d)); });
chart3.yAxis.axisLabel("Number of listening ports")
.axisLabelDistance(40)
.tickFormat(d3.format('f'));
chart3.forceY(0);
var myData = randomData(4,10);
d3.select('#chart3 svg')
.datum(myData)
.call(chart3);
nv.utils.windowResize(chart3.update);
return chart3;
});
Bar Chart
Services Status example
</> Code
nv.addGraph(function() {
var chart4 = nv.models.discreteBarChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.staggerLabels(true)
.showValues(true)
.valueFormat(d3.format(".0f"));
d3.select('#chart4 svg')
.datum(exampleDataz())
.call(chart4);
nv.utils.windowResize(chart4.update);
return chart4;
});