ICHEC 2011 Connections
The question was posed: Where does ICHEC fit into the research landscape in Ireland?
To begin to answer this question it is important to understand some terminology. In Ireland there are seven universities, 13 institutes of technology, colleges of education, independent and further educations centres and other national research institutions such as the Dublin Institute for Advanced Studies. Staff and students of these institutions can gain access to ICHEC general-purpose computing resources (Stokes and Stoney) by submitting a project and are termed users.
Projects differ by size, class, and domain, for example, a small "Discovery" (Class C) project in the chemistry domain with three users or a large multi-year "Grand Challenge" (Class A) project in engineering with 10 users. Further details of the Full National Service can be found here. Also, ICHEC has numerous computational scientists, staff, that support the users during the course of their project.
So in summary there are users, project classes (A,B,C), project domains (Physics, Chemistry, Earth Science, Maths, Astrophysics, Engineering, Life Sciences, Computing, Humanities) staff, Institutions, and ICHEC. The challenge was to represent these data in a single info-graphic. The diagram above created using d3.js is the result and an explanation of its creation is described below. This graphic is an update from last year's protovis version.
But to answer the original question, ICHEC stands at the heart of computational research in Ireland.
Graphic Description
- This diagram is an undirected graph that illustrates the connections or edges, between nodes: ICHEC, the Irish academic institutes, staff, users and project class and domain. Readers of graph theory will understand the concept of nodes and edges. The layout of the graph is carried out using a Force based algorithm from d3.js. This graphic is an extension of the d3.js force based example.
- ICHEC is represented by a grey circle in the centre if the diagram. Institutions are colour coded diamonds.
- The ICHEC staff and end users are shown in black using triangles and ticks respectively. The size of the symbols reflects the number of projects that staff member or user is involved in.
- Projects are shown as circles colour coded depending on the particular domain, e.g. physics projects are shown as blue circles. The size of the circles reflects the project class. The larger circles are class A projects.
- The graph is interactive - nodes (institutions/users/staff/projects) can be moved by dragging them. Placing your cursor over the nodes reveals the name of that node.
Graphic Development
The challenge in preparing this graph was to manipulate data so that the protovis javascript library could be used. Information for all projects that ran on the ICHEC machines during 2010 was extracted from our internal databases. Project name, title, PI, members, domain, and class was obtained. This information was processed using a python script and outputted a json file with the following form:
{
"nodes":[
{"name":"TCD", "group":1},
{"name":"ICHEC", "group":5},
{"name":"Martin Peters", "group":2},
{"name":"Giorgio Carta", "group":4, "domain":2},
{"name":"tcche018c", "group":3, "domain":2, "cl":1}
],
"links":[
{"source":0, "target":10, "value":1},
{"source":1, "target":10, "value":1},
{"source":2, "target":10, "value":1}
]
};
Each node was given a group variable with the following definitions:
| Institutions | 1 |
| Staff | 2 |
| Project | 3 |
| User | 4 |
| ICHEC | 5 |
Users and project were given a domain variable with the following definitions:
| Physics | 1 |
| Chemistry | 2 |
| Earth Science | 3 |
| Maths | 4 |
| Astrophysics | 5 |
| Engineering | 6 |
| Life Sciences | 7 |
| Computing | 8 |
| Humanities | 9 |
Finally projects were also given a cl variable to distinguish between A, B and C:
| A | 10 |
| B | 5 |
| C | 1 |
The connections between staff, users, projects, institutes and ICHEC were defined with links as shown in the code above. Each edge or link as a source and target. These numbers are the indices of each in the nodes array. The value of one describes it as a single connection.
Code Description
The following code snippets put together produced the diagram above. The first part of the process is to set up the size of the graph and define the colour scheme to be used:
var width = 500,
height = 650
color = d3.scale.category20();
var leftlegend = d3.select("#usersFig2011Leftlegend")
.append("svg")
.attr("width", 100)
.attr("height", height);
var rightlegend = d3.select("#usersFig2011Rightlegend")
.append("svg")
.attr("width", 130)
.attr("height", height);
var svg = d3.select("#usersFig2011Chart")
.append("svg")
.attr("width", width)
.attr("height", height);
var data = d3.svg.symbolTypes;
Then each institute and domain were also given a colour:
var instituteColours = {
"TCD" : colors(1),
"UCD" : colors(2),
"DCU" : colors(3),
"UCC" : colors(4),
"Tyndall": colors(5),
"NUIG" : colors(6),
"NUIM" : colors(7),
"DIAS" : colors(8),
"RCSI" : colors(9),
"UL" : colors(10),
"ITS" : colors(11),
"TG" : colors(12),
"DIT" : colors(14),
"ICHEC" : colors(13),
};
var domains = {
"Physics" : colors(1),
"Chemistry" : colors(2),
"Earth Science" : colors(3),
"Maths" : colors(4),
"Astrophysics" : colors(5),
"Engineering" : colors(6),
"Life Sciences" : colors(7),
"Computing" : colors(8),
"Humanities" : colors(9)
};
A couple of functions were created to generate different coloured, sized and shaped symbols (d3 v2 has amended with a new shape - diamond2) depending on the node variables:
nodeSize = function(g, c) {
if (g == 5) { // ICHEC
return 800;
}
if (g == 1) { // institues
return 400;
}
if (g == 2) { // staff
return 50;
}
if (g == 3) { // project
return 40 * c;
}
return (30);
};
var col = function(g, d, n) {
if (g == 1) { // institutes
return instituteColours[n];
}
if (g == 2) { // staff
return "grey";
}
if (g == 3) {
return color(d);
}
if (g == 4) { // users
return "black";
}
if (g == 5) { // ICHEC
return "grey";
}
return color(d);
};
var sha = function(g) {
if (g == 1) { // institutes
return 6;
}
if (g == 2) { // staff
return 4;
}
if (g == 3) {
return 0;
}
if (g == 4) { // users
return 1;
}
if (g == 5) { // ICHEC
return 0;
}
return 5;
};
var wid = function(g) {
if (g == 4) { // users
return "0px";
}
return "1px";
};
The graph was then ready to be created using the variables described above:
d3.json("/path/to/json/file.json", function(json) {
var force = d3.layout.force()
.charge(-20)
.nodes(json.nodes)
.links(json.links)
.size([width, height])
.start();
The link were added:
var link = svg.selectAll("line.link")
.data(json.links).enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); })
.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; });
The shape, size, and colour of the nodes was defined using the functions above:
var node = svg.append("g").selectAll("path")
.data(json.nodes).enter().append("path")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")"; })
.attr("d", d3.svg.symbol()
.size(function(d) { return nodeSize(d.group, d.cl); })
.type(function(d) { return d3.svg.symbolTypes[sha(d.group)]; }))
.style("fill", function(d) {
return col(d.group, d.domain, d.name) ? col(d.group, d.domain, d.name) : color(d.domain); })
.style("stroke-width", function(d) { return wid(d.group); })
.style("stroke", function(d) {
return d3.rgb(col(d.group, d.domain, d.name) ? col(d.group, d.domain, d.name) : color(d.domain)).darker(); })
.call(force.drag);
The Legends for the institutions and domains were added:
// Institutions Legend
var insLeg = leftlegend.append("g").selectAll("path")
.data(d3.keys(instituteColours)).enter().append("path")
.attr("transform", function(d,i) {
return "translate(" + 20 + "," + (100 + i*25) + ")" + "rotate(45)"; })
.attr("d", d3.svg.symbol()
.size(50)
.type("square"))
.attr("stroke-width", ".5")
.style("fill", function(d) { return instituteColours[d]; })
.style("stroke", function(d) { return d3.rgb(instituteColours[d]).darker(); });
var insLegMainText = leftlegend.append("g").selectAll("path")
.data(['Institutions']).enter().append("text")
.attr("text-anchor", "left")
.attr("x", 15)
.attr("y", 80)
.text(function(d) { return d });
var insLegText = leftlegend.append("g").selectAll("path")
.data(d3.keys(instituteColours)).enter().append("text")
.attr("text-anchor", "left")
.attr("x", 30)
.attr("y", function(d, i) { return 100 + i*25 - 10; })
.attr("dx", 0)
.attr("dy", "1em")
.text(function(d) { return d });
// Project Domains Legend
var proDomLeg = rightlegend.append("g").selectAll("path")
.data(d3.keys(domains)).enter().append("circle") // Append circle elements
.attr("cx", 20)
.attr("cy", function(d, i) { return 100 + i*30; } )
.attr("stroke-width", ".5")
.style("fill", function(d) { return domains[d]; }) // Bar fill color
.style("stroke", function(d) { return d3.rgb(domains[d]).darker(); })
.attr("r", 5);
var proDomLegMainText = rightlegend.append("g").selectAll("path")
.data(['Project Domains']).enter().append("text")
.attr("text-anchor", "left")
.attr("x", 15)
.attr("y", 80)
.text(function(d) { return d });
var proDomLegText = rightlegend.append("g").selectAll("path")
.data(d3.keys(domains)).enter().append("text")
.attr("text-anchor", "left")
.attr("x", 30)
.attr("y", function(d, i) { return 100 + i*30 - 10; })
.attr("dx", 0)
.attr("dy", "1em")
.text(function(d) { return d });
node.append("title")
.text(function(d) { return d.name; });
svg.style("opacity", 1e-6)
.transition()
.duration(1000)
.style("opacity", 1);
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; });
svg.selectAll("path")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
});