D3: It is possible to do in D3? - d3.js

Question

I want to show on the chart D3 e-mail communications between users using data from JSON file on chart FLARE or other.
Users can be represented on a graph as a node and e-mails between them as links.
If it is possible to present in the D3 and someone knows the solution to this problem please let me know.
The following sample array of data for a single email.
In the other tables changes to email details: user names, titles, emails, dates and times.
{
"metadataAsStrings": {
"doc-from": "User 1",
"doc-sender": "User 1",
"caat-derived-recipients": "User 2",
"doc-subject": "Title Email 1"
"doc-recipient": "User 2",
"caat-normalized-author": "User 1",
"caat-derived-email-action": "REPLY"
"caat-derived-end-email": "true",
"caat-derived-inclusive-email-reason": "MESSAGE"
"doc-date": "2014/09/25 10:20:00",
"doc-is", "User 2"
}
}

Answer 1

This is pretty easy with the force layout.
Here's the plnkr:
http://plnkr.co/edit/1Mub7rTUKQuuAB6TAoJb?p=preview
What I actually did was create a json according to the structure that d3 force layout needs.
Assuming I have something similar to your data, I do a little bit of parsing:
{
"edges": [
{
"source":"1",
"target": "2",
"color": "yellow",
"weight": "1.0",
"doc-subject": "Title Email 1"
},
{
"source":"2",
"target": "3",
"color": "blue",
"weight": "1.0",
"doc-subject": "Title Email 2"
}
],
"nodes": [
{
"label":"user 1",
"x":-1015.1223754882812,"y":679.421875,
"id":"1","attributes":{},"color":"rgb(175,156,171)",
"size":20
},
{
"label":"user 2",
"x":-915.1223754882812,"y":659.421875,
"id":"2","attributes":{},"color":"rgb(175,156,171)",
"size":15
},
{
"label":"user 3",
"x":-1015.1223754882812,"y":579.421875,
"id":"3","attributes":{},"color":"rgb(175,156,171)",
"size":15
}
]
}
Then, in d3, I have this code to parse it:
d3.json("graph.json", function(error, graphData) {
//setup the data
var graph = {};
graph.nodes = [];
graph.links = [];
var test = [];
// set the node data
for (var nodeIndex in graphData.nodes){
var curr_node = graphData.nodes[nodeIndex];
graph.nodes[curr_node.id] = {
x: curr_node.x,
y: curr_node.y,
color: curr_node.color,
size: curr_node.size,
label: curr_node.label,
id: curr_node.id
};
test.push(Number(curr_node.id));
}
// sort the IDs
function sortNumber(a,b) {
return a - b;
}
test.sort(sortNumber);
// now go over each ID and set it in the
var tmpNodes = [];
for (var index in test){
tmpNodes.push(graph.nodes[test[index]]);
}
graph.nodes = tmpNodes;
// now setup the edges/links
for (edge in graphData.edges){
var curr_link = graphData.edges[edge];
graph.links.push({source: test.indexOf(Number(curr_link.source)), target: test.indexOf(Number(curr_link.target)), weight: 1.0});
}
force
.nodes(graph.nodes)
.links(graph.links)
.start();
link = link.data(graph.links)
.enter().append("line")
.attr("class", "link");
node = node
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.call(drag)
.on("dblclick", dblclick)
.on("mouseover", function(d){
hover.html(d.id + ": " + d.label);
})
.on("mouseleave", function(d){
hover.html("");
})
;
node.append("circle")
.attr("r", function(d,i){
return d.size/2;
})
.attr("fill", function(d,i){
return d.color;
})
;
var textNode = node.append("g");
var text = textNode.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.attr("font-size", function(d){
return 12+(d.size-1)/7+"px";
})
.text(function(d) {
return d.label });
textNode.append("rect")
.attr("x",function(d,i){
var g = node[0][i].childNodes[1];
return -g.getBBox().width;
})
.attr("y",function(d,i){
var g = node[0][i].childNodes[1].childNodes[0];
return -g.getBBox().height+10;
})
.attr("fill","white")
.attr("fill-opacity",0.25)
.attr("width",function(d,i){
var g = node[0][i].childNodes[1];
return g.getBBox().width;
})
.attr("height",function(d,i){
var g = node[0][i].childNodes[1].childNodes[0];
return g.getBBox().height;
})
;
});
So what happens in the code, d3 gets the json, I do a little bit of parsing for d3 to get the data setup better (I made it like that so I could add more users, and sort them by their ID rather then the order in which they are set in the array) and then just give the links and nodes to d3 to plot.
Hope this helps.