Skip to content

Instantly share code, notes, and snippets.

@junkwhinger

junkwhinger/index.html

Last active August 29, 2015 14:25
Show Gist options
  • Save junkwhinger/81d9432e97fa3c92b42f to your computer and use it in GitHub Desktop.
Save junkwhinger/81d9432e97fa3c92b42f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head><h1>The Hacking Team: Major Interactions regarding SKA </h1></head>
<style>
body {
font: 10px sans-serif;
}
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.node-active{
stroke: #555;
stroke-width: 1.5px;
}
.link {
stroke: #555;
stroke-opacity: .3;
}
.link-active {
stroke-opacity: 1;
}
.overlay {
fill: none;
pointer-events: all;
}
#map{
border: 2px #555 solid;
width:910px;
height:910px;
}
.node_id {
stroke-width: 0.8px;
font: 12px helvetica;
text-shadow:
-2px -2px 0 white,
2px -2px 0 white,
-2px 2px 0 white,
2px 2px 0 white;
}
div.tooltip {
position: absolute;
text-align: center;
width: 200px;
height: 20px;
padding-top: 6px;
font: 12px sans-serif;
font-weight: bold;
background: rgba(255,255,255,.8);
border: 0px;
border-radius: 8px;
pointer-events: none;
}
.title_text {
font: 12px helvetica;
}
</style>
<body>
<div id="map"></div>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: -5, right: -5, bottom: -5, left: -5};
var width = 900 - margin.left - margin.right,
height = 900- margin.top - margin.bottom;
var color = d3.scale.category20();
var x = d3.scale.linear()
.range([10, 30]);
var force = d3.layout.force()
.charge(-3000)
.linkDistance(200)
.gravity(.3)
.size([width + margin.left + margin.right, height + margin.top + margin.bottom]);
var zoom = d3.behavior.zoom()
.scaleExtent([1, 10])
.on("zoom", zoomed);
var drag = d3.behavior.drag()
.origin(function(d) { return d; })
.on("dragstart", dragstarted)
.on("drag", dragged)
.on("dragend", dragended);
var svg = d3.select("#map").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.right + ")")
.call(zoom);
var rect = svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all");
var container = svg.append("g");
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
d3.json('specific_network.json', function(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
x.domain([0, d3.max(graph.nodes, function (d) {
return d.bc;
})])
var link = container.append("g")
.attr("class", "links")
.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.weight); })
.style("marker-end", function(d) { return "url(#resolved)"; });
var node = container.append("g")
.attr("class", "nodes")
.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.call(drag)
.on('dblclick', connectedNodes);
node.append("circle")
.attr("r", function(d){return x(d.bc)})
.style("fill", function(d) { return d.color; });
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
var linkedByIndex = {};
graph.links.forEach(function(d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
function isConnected(a, b) {
return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index];
}
console.log(graph.nodes)
node.append("text")
.attr("class", "node_id")
.attr("dx", 0)
.attr("dy", ".35em")
.style("font-size", "13px")
.attr("stroke", "black")
.text(function (d) {
title = d.id
return title
});
var rect_data =
[{
"num": 1,
"group": '#b15928',
"group_text": "Client"
}, {
"num": 2,
"group": "#ff7f00",
"group_text": "C-level Officers"
}, {
"num": 3,
"group": "#33a02c",
"group_text": "Field Application Engineer"
}, {
"num": 4,
"group": "#fb9a99",
"group_text": "Software & Security Engineer"
}, {
"num": 5,
"group": "#6a3d9a",
"group_text": "Operations Manager"
}, {
"num": 6,
"group": "#fdbf6f",
"group_text": "Sales Manager"
}, {
"num": 7,
"group": "#e31a1c",
"group_text": "QA Manager"
}, {
"num": 8,
"group": "#cab2d6",
"group_text": "Senior Security Consultant"
}, {
"num": 9,
"group": "#a6cee3",
"group_text": "undisclosed"
}]
var rect = svg.selectAll(".legend_rect")
.data(rect_data)
.enter().append("rect")
.attr("class","legend_rect")
.attr("x", 20)
.attr("y", function (d) {
console.log(d)
return (d.num * 20)
})
.attr("width", 10)
.attr("height", 10)
.attr("fill", function (d) {
return d.group
});
var rect_text = svg.selectAll(".title_text")
.data(rect_data)
.enter().append("text")
.attr("class", "title_text")
.attr("x", 35)
.attr("y", function (d) {
return (d.num * 20) +10
})
.text(function (d) {
return d.group_text
})
.attr("fill", function (d) {
return d.group
});
svg.append("defs").selectAll("marker")
.data(["suit", "licensing", "resolved"])
.enter().append("marker")
.attr("id", function(d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 40)
.attr("refY", 0)
.attr("markerWidth", 2)
.attr("markerHeight", 2)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5 L10,0 L0, 5")
.style("stroke", "black")
.style("stroke-width", "1px")
.style("opacity", "0.6");
node.on("mouseover", function(d){
node.classed("node-active", function(o) {
thisOpacity = isConnected(d, o) ? true : false;
this.setAttribute('fill-opacity', thisOpacity);
return thisOpacity;
});
link.classed("link-active", function(o) {
return o.source === d || o.target === d ? true : false;
});
d3.select(this).classed("node-active", true);
d3.select(this).select("circle").transition()
.duration(750);
div.transition()
.duration(200)
.style("opacity", .9);
div .html(d.title)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d){
node.classed("node-active", false);
link.classed("link-active", false);
d3.select(this).select("circle").transition()
.duration(750);
div.transition()
.duration(500)
.style("opacity", 0);
});
//Toggle stores whether the highlighting is on
var toggle = 0;
//Create an array logging what is connected to what
var linkedByIndex = {};
for (i = 0; i < graph.nodes.length; i++) {
linkedByIndex[i + "," + i] = 1;
};
graph.links.forEach(function (d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
//This function looks up whether a pair are neighbours
function neighboring(a, b) {
return linkedByIndex[a.index + "," + b.index];
}
function connectedNodes() {
if (toggle == 0) {
//Reduce the opacity of all but the neighbouring nodes
d = d3.select(this).node().__data__;
node.style("opacity", function (o) {
return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
});
link.style("opacity", function (o) {
return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1;
});
//Reduce the op
toggle = 1;
} else {
//Put them back to opacity=1
node.style("opacity", 1);
link.style("opacity", 1);
toggle = 0;
}
}
});
function dottype(d) {
d.x = +d.x;
d.y = +d.y;
return d;
}
function zoomed() {
container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
function dragstarted(d) {
d3.event.sourceEvent.stopPropagation();
d3.select(this).classed("dragging", true);
force.start();
}
function dragged(d) {
d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}
function dragended(d) {
d3.select(this).classed("dragging", false);
}
function wrap(text, width) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}
});
}
</script>
Raw
network.json
{"directed": true, "graph": [], "nodes": [{"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["nanatech"], "bc": 0.0}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.005255255255255255}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.004129129129129129}, {"id": "undisclosed-recipients:", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.051426426426426426}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.0}, {"id": "daniel", "class": ["hackingTeam"], "bc": 0.0}, {"id": "bruno", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["nanatech"], "bc": 0.0}, {"id": "daniele", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["nanatech"], "bc": 0.0}, {"id": "fabio", "class": ["hackingTeam"], "bc": 0.0}, {"id": "marco", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.005255255255255255}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["nanatech"], "bc": 0.00975975975975976}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.01876876876876877}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.00037537537537537537}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.0822072072072072}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.0}, {"id": "[email protected]", "class": ["hackingTeam"], "bc": 0.012762762762762763}, {"id": "cristian", "class": ["hackingTeam"], "bc": 0.0}], "links": [{"source": 0, "target": 21, "weight": 24}, {"source": 0, "target": 22, "weight": 21}, {"source": 0, "target": 23, "weight": 37}, {"source": 0, "target": 29, "weight": 24}, {"source": 0, "target": 19, "weight": 18}, {"source": 0, "target": 37, "weight": 37}, {"source": 1, "target": 10, "weight": 18}, {"source": 2, "target": 11, "weight": 68}, {"source": 2, "target": 31, "weight": 54}, {"source": 3, "target": 31, "weight": 26}, {"source": 3, "target": 25, "weight": 15}, {"source": 4, "target": 9, "weight": 77}, {"source": 5, "target": 31, "weight": 34}, {"source": 5, "target": 24, "weight": 37}, {"source": 5, "target": 23, "weight": 24}, {"source": 5, "target": 29, "weight": 18}, {"source": 5, "target": 17, "weight": 25}, {"source": 5, "target": 35, "weight": 28}, {"source": 6, "target": 22, "weight": 26}, {"source": 6, "target": 6, "weight": 25}, {"source": 6, "target": 15, "weight": 20}, {"source": 6, "target": 31, "weight": 37}, {"source": 6, "target": 12, "weight": 15}, {"source": 7, "target": 32, "weight": 27}, {"source": 8, "target": 14, "weight": 28}, {"source": 8, "target": 11, "weight": 44}, {"source": 8, "target": 26, "weight": 23}, {"source": 8, "target": 28, "weight": 26}, {"source": 11, "target": 8, "weight": 39}, {"source": 11, "target": 10, "weight": 25}, {"source": 11, "target": 26, "weight": 43}, {"source": 11, "target": 14, "weight": 42}, {"source": 11, "target": 34, "weight": 16}, {"source": 11, "target": 28, "weight": 41}, {"source": 11, "target": 18, "weight": 29}, {"source": 11, "target": 20, "weight": 23}, {"source": 18, "target": 11, "weight": 41}, {"source": 20, "target": 11, "weight": 46}, {"source": 23, "target": 29, "weight": 20}, {"source": 23, "target": 21, "weight": 23}, {"source": 26, "target": 11, "weight": 28}, {"source": 28, "target": 11, "weight": 97}, {"source": 28, "target": 26, "weight": 29}, {"source": 28, "target": 30, "weight": 18}, {"source": 28, "target": 8, "weight": 40}, {"source": 29, "target": 23, "weight": 22}, {"source": 29, "target": 16, "weight": 15}, {"source": 29, "target": 37, "weight": 20}, {"source": 30, "target": 10, "weight": 16}, {"source": 31, "target": 8, "weight": 20}, {"source": 31, "target": 25, "weight": 120}, {"source": 31, "target": 2, "weight": 85}, {"source": 31, "target": 11, "weight": 18}, {"source": 31, "target": 26, "weight": 23}, {"source": 31, "target": 12, "weight": 28}, {"source": 31, "target": 13, "weight": 33}, {"source": 31, "target": 14, "weight": 16}, {"source": 31, "target": 3, "weight": 18}, {"source": 31, "target": 29, "weight": 16}, {"source": 31, "target": 6, "weight": 35}, {"source": 31, "target": 36, "weight": 18}, {"source": 33, "target": 19, "weight": 15}, {"source": 34, "target": 14, "weight": 24}, {"source": 34, "target": 11, "weight": 28}, {"source": 34, "target": 28, "weight": 17}, {"source": 36, "target": 27, "weight": 30}, {"source": 36, "target": 33, "weight": 17}, {"source": 36, "target": 31, "weight": 15}, {"source": 36, "target": 15, "weight": 19}, {"source": 36, "target": 19, "weight": 27}], "multigraph": false}
Raw
specific_network.json
{"directed": true, "graph": [], "nodes": [{"color": "#33a02c", "id": "[email protected]", "bc": 0.0, "class": "hackingTeam", "title": "Field Application Engineer"}, {"color": "#b15928", "id": "[email protected]", "bc": 0.0, "class": "nanatech", "title": "Client"}, {"color": "#a6cee3", "id": "[email protected]", "bc": 0.0, "class": "hackingTeam", "title": "undisclosed"}, {"color": "#e31a1c", "id": "[email protected]", "bc": 0.0, "class": "hackingTeam", "title": "QA Manager"}, {"color": "#fdbf6f", "id": "[email protected]", "bc": 0.01871980676328502, "class": "hackingTeam", "title": "Sales Manager"}, {"color": "#a6cee3", "id": "[email protected]", "bc": 0.0, "class": "hackingTeam", "title": "undisclosed"}, {"color": "#ff7f00", "id": "[email protected]", "bc": 0.006793478260869565, "class": "hackingTeam", "title": "Chief Operation Officer"}, {"color": "#1f78b4", "id": "[email protected]", "bc": 0.11231884057971014, "class": "hackingTeam", "title": "Key Account Manager"}, {"color": "#33a02c", "id": "[email protected]", "bc": 0.0, "class": "hackingTeam", "title": "Field Application Engineer"}, {"color": "#33a02c", "id": "[email protected]", "bc": 0.0, "class": "hackingTeam", "title": "Field Application Engineer"}, {"color": "#b15928", "id": "[email protected]", "bc": 0.0, "class": "nanatech", "title": "Client"}, {"color": "#b15928", "id": "[email protected]", "bc": 0.0, "class": "nanatech", "title": "Client"}, {"color": "#a6cee3", "id": "[email protected]", "bc": 0.0, "class": "hackingTeam", "title": "undisclosed"}, {"color": "#ff7f00", "id": "[email protected]", "bc": 0.0, "class": "hackingTeam", "title": "Chief Executive Officer"}, {"color": "#6a3d9a", "id": "[email protected]", "bc": 0.008152173913043478, "class": "hackingTeam", "title": "Operations Manager"}, {"color": "#b15928", "id": "[email protected]", "bc": 0.0, "class": "nanatech", "title": "Client"}, {"color": "#b2df8a", "id": "[email protected]", "bc": 0.05389492753623189, "class": "hackingTeam", "title": "Senior Software Developer"}, {"color": "#ff7f00", "id": "[email protected]", "bc": 0.0, "class": "hackingTeam", "title": "Chief of HT Singapore Representative"}, {"color": "#ff7f00", "id": "[email protected]", "bc": 0.0, "class": "hackingTeam", "title": "Chief Information Officer"}, {"color": "#33a02c", "id": "[email protected]", "bc": 0.0009057971014492754, "class": "hackingTeam", "title": "Field Application Engineer"}, {"color": "#fb9a99", "id": "[email protected]", "bc": 0.03230676328502416, "class": "hackingTeam", "title": "Senior Security Engineer"}, {"color": "#a6cee3", "id": "[email protected]", "bc": 0.0, "class": "hackingTeam", "title": "undisclosed"}, {"color": "#a6cee3", "id": "[email protected]", "bc": 0.0, "class": "hackingTeam", "title": "undisclosed"}, {"color": "#ff7f00", "id": "[email protected]", "bc": 0.0, "class": "hackingTeam", "title": "Chief Technology Officer"}, {"color": "#cab2d6", "id": "[email protected]", "bc": 0.0024154589371980675, "class": "hackingTeam", "title": "Senior Security Consultant"}], "links": [{"source": 0, "target": 12, "weight": 7}, {"source": 1, "target": 7, "weight": 68}, {"source": 1, "target": 6, "weight": 11}, {"source": 2, "target": 18, "weight": 11}, {"source": 3, "target": 22, "weight": 9}, {"source": 4, "target": 12, "weight": 15}, {"source": 4, "target": 6, "weight": 14}, {"source": 4, "target": 7, "weight": 28}, {"source": 4, "target": 8, "weight": 7}, {"source": 4, "target": 21, "weight": 10}, {"source": 4, "target": 4, "weight": 17}, {"source": 6, "target": 7, "weight": 47}, {"source": 6, "target": 4, "weight": 32}, {"source": 6, "target": 12, "weight": 29}, {"source": 7, "target": 12, "weight": 44}, {"source": 7, "target": 19, "weight": 16}, {"source": 7, "target": 6, "weight": 40}, {"source": 7, "target": 8, "weight": 8}, {"source": 7, "target": 21, "weight": 27}, {"source": 7, "target": 16, "weight": 9}, {"source": 7, "target": 4, "weight": 44}, {"source": 8, "target": 7, "weight": 9}, {"source": 8, "target": 4, "weight": 11}, {"source": 8, "target": 21, "weight": 18}, {"source": 8, "target": 12, "weight": 7}, {"source": 9, "target": 7, "weight": 10}, {"source": 9, "target": 21, "weight": 9}, {"source": 10, "target": 7, "weight": 41}, {"source": 11, "target": 7, "weight": 46}, {"source": 13, "target": 12, "weight": 13}, {"source": 14, "target": 24, "weight": 8}, {"source": 14, "target": 4, "weight": 8}, {"source": 14, "target": 20, "weight": 7}, {"source": 14, "target": 12, "weight": 8}, {"source": 15, "target": 16, "weight": 18}, {"source": 15, "target": 19, "weight": 8}, {"source": 15, "target": 4, "weight": 30}, {"source": 15, "target": 6, "weight": 40}, {"source": 15, "target": 7, "weight": 97}, {"source": 16, "target": 7, "weight": 9}, {"source": 16, "target": 20, "weight": 10}, {"source": 16, "target": 6, "weight": 10}, {"source": 16, "target": 21, "weight": 20}, {"source": 17, "target": 7, "weight": 30}, {"source": 17, "target": 4, "weight": 66}, {"source": 17, "target": 5, "weight": 11}, {"source": 17, "target": 6, "weight": 37}, {"source": 17, "target": 12, "weight": 18}, {"source": 19, "target": 16, "weight": 10}, {"source": 19, "target": 7, "weight": 35}, {"source": 19, "target": 21, "weight": 21}, {"source": 19, "target": 6, "weight": 11}, {"source": 19, "target": 12, "weight": 26}, {"source": 20, "target": 16, "weight": 7}, {"source": 20, "target": 23, "weight": 7}, {"source": 20, "target": 21, "weight": 12}, {"source": 24, "target": 22, "weight": 10}, {"source": 24, "target": 20, "weight": 9}, {"source": 24, "target": 21, "weight": 8}, {"source": 24, "target": 14, "weight": 13}], "multigraph": false}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment