/*Chart-cloud visualization
* This view is an example for a simple visualization based on search results
*/
define(function(require, module) {
var _ = require('underscore'), $ = require('jquery');
var d3 = require("../d3/d3.v3.min");
var SimpleSplunkView = require('splunkjs/mvc/simplesplunkview');
var Drilldown = require('splunkjs/mvc/drilldown');
require("css!./circle_packing.css");
var CircleChart = SimpleSplunkView.extend({
moduleId: module.id,
className: 'circlechart-viz',
options: {
data: 'preview'
},
output_mode: 'json',
createView: function() {
this.$el.html('');
return true;
},
formatData: function(data) {
console.log(data);
var newData = { name :"root", children : [] },
levels = ["Vulnerabilities.signature","name"];
// For each data row, loop through the expected levels traversing the output tree
data.forEach(function(d){
// Keep this as a reference to the current level
var depthCursor = newData.children;
// Go down one level at a time
levels.forEach(function( property, depth ){
// Look to see if a branch has already been created
var index;
depthCursor.forEach(function(child,i){
if ( d[property] == child.name ) index = i;
});
// Add a branch if it isn't there
if ( isNaN(index)) {
depthCursor.push({ name : d[property], children : []});
index = depthCursor.length - 1;
}
// Now reference the new child array as we go deeper into the tree
depthCursor = depthCursor[index].children;
// This is a leaf, so add the last element to the specified branch
if ( depth === levels.length - 1 ) depthCursor.push({ name : d.Vulnerabilities.dest, size : d.count });
});
});
console.log(newData);
return newData;
},
updateView: function(viz, data) {
console.log(data); //please provide the json data getting from the search query or else convert this ouptut to below data1 json format in formatData propety
var diameter = 500,
format = d3.format(",d");
var pack = d3.layout.pack()
.size([diameter - 4, diameter - 4])
.value(function(d) { return d.size; });
var svg = d3.select(this.el).append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(2,2)");
//if (error) throw error;
var node = svg.datum(data).selectAll(".node")
.data(pack.nodes)
.enter().append("g")
.attr("class", function(d) { return d.children ? "node" : "leaf node"; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("title")
.text(function(d) { return d.name + (d.children ? "" : ": " + format(d.size)); });
node.append("circle")
.attr("r", function(d) { return d.r; });
node.filter(function(d) { return !d.children; }).append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.name.substring(0, d.r / 3); });
d3.select(self.frameElement).style("height", diameter + "px");
}
});
return CircleChart;
});
... View more
