Visualisation 1

Some viz with filtering

by hirako2000

HTML

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.6/dc.css"/>

<script type="text/javascript" src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.6/dc.js"></script>

<h1>
 Event viz
</h1>


<h1>
  Filtering
</h1>

<div id="pie1" style="margin: 15px;"></div>
<div id="pie2" style="margin: 15px;"></div>
<div id="pie3" style="margin: 15px;"></div>
<div id="chart" style="margin: 15px;"></div>
<div id="table" style="margin: 15px;"></div>

CSS

td {
  margin: 5px;
}

JavaScript

// Create crossfilter of our data

let events = crossfilter([
	{id: '1', deviceType: 'Windows Server', severity: 'low', name: "banana", action: 'blocked', category:"malware", country:"China", outOfDateQuantity:1, quantity: 1},
	{id: '2', deviceType: 'Windows Server', severity: 'low', name: "apple", action: 'blocked', category:"malware", country:"UK", outOfDateQuantity:1, quantity: 1},
	{id: '3', deviceType: 'Linux', severity: 'high', name: "tomato", action: 'not blocked', category:"trojan", country:"US", outOfDateQuantity:1, quantity: 1},
  {id: '4', deviceType: 'Cisco FW', severity: 'low', name: "tomato", category:"trojan", country:"US", outOfDateQuantity:1, quantity: 1}
]);

// First Dimension

let dimensionCategory = events.dimension(item => item.category)
let quantityByCategory = dimensionCategory.group().reduceSum(item => item.quantity)

let dimensionAction = events.dimension(item => item.action ? item.action : "unknown");
let quantityByAction = dimensionAction.group().reduceSum(item => 1)


// Beware, javascript will retromodify firstResult (javascript loves saving things by parameters), you must comment the filter to look at this result etc etc...
const firstResult = quantityByCategory.all()
console.log("First result:")
console.log(firstResult)

// How to filter

/* let dimensionCountry = events.dimension(item => item.country)
dimensionCountry.filter("Martinique")

const filteredResult = quantityByCategory.all()
console.log("Second result with filter:")
console.log(filteredResult) */
 
// Remove filter

/* dimensionCountry.filter(null)
const filterRemovedResult = quantityByCategory.all()
console.log("Third result filter removed:")
console.log(filterRemovedResult) */

// Tips and Tricks

// 1: Separate value on distinct conditions
let dimensionCountry = events.dimension(item => item.country)
let quantityByCountry = dimensionCountry.group().reduceSum(item => 1);

const differentCategoriesResult = quantityByCountry.all()
console.log("Result 4 with 2...