Skip to content
Snippets Groups Projects

Development

Merged Michał Pogoda requested to merge development into master
Compare and
11 files
+ 309
515
Compare changes
  • Side-by-side
  • Inline
Files
11
@@ -23,63 +23,54 @@
nodes = $nodes_list
links = $link_list
NODE_SIZE_CONSTANT = 10
CONNECTION_WIDTH_CONSTANT = 10
CONNECTION_SPING_CONSTANT = 0.001
CONNECTION_LENGTH_CONSTANT = 100
// Build graph
nodes.forEach(element => {
graph.addNode(element[0], [element[1], element[2], element[3]]);
graph.addNode(element[0], element[1]);
});
// Step 2. We add nodes and edges to the graph:
links.forEach(element => {
graph.addLink(element[0], element[1], [element[2], element[3]]);
graph.addLink(element[0], element[1], element[2]);
});
/* Note: graph.addLink() creates new nodes if they are not yet
present in the graph. Thus calling this method is equivalent to:
graph.addNode(1);
graph.addNode(2);
graph.addLink(1, 2);
*/
scale = chroma.scale('YlGnBu')
// Layout parameters
var layout = Viva.Graph.Layout.forceDirected(graph, {
gravity: -20.2,
springCoeff: 0.00005,
gravity: -1.2,
dragCoeff : 0.1,
springTransform: function (link, spring) {
spring.length = Math.max(500 * (1 - link.data[1]), 100);
spring.length = (1.0 - link.data) * CONNECTION_SPING_CONSTANT
spring.coeff = link.data * CONNECTION_SPING_CONSTANT
}
});
// Node color scheme
scale = chroma.scale('YlGnBu')
// Draw links
var graphics = Viva.Graph.View.svgGraphics();
graphics.link(function (link) {
return Viva.Graph.svg('path')
.attr('stroke', '#594309')
.attr('stroke-width', 10 * link.data[0])
.attr('stroke-width', CONNECTION_WIDTH_CONSTANT * link.data)
.attr('stroke-opacity', "70%");
}).placeLink(function (linkUI, fromPos, toPos) {
// linkUI - is the object returend from link() callback above.
var data = 'M' + fromPos.x + ',' + fromPos.y +
'L' + toPos.x + ',' + toPos.y;
// 'Path data' (http://www.w3.org/TR/SVG/paths.html#DAttribute )
// is a common way of rendering paths in SVG:
linkUI.attr("d", data);
});
// Draw nodes
graphics.node(function (node) {
// This time it's a group of elements: http://www.w3.org/TR/SVG/struct.html#Groups
var avg_degree = node.data[0],
avg_degree_linear = node.data[1],
text = node.data[2]
var r = 100*avg_degree
var font_size = Math.max(100 * avg_degree, 10)
var r = NODE_SIZE_CONSTANT * node.data
var font_size = Math.max(NODE_SIZE_CONSTANT * node.data, 10)
var ui = Viva.Graph.svg('g'),
// Create SVG text element with user id as content
svgCircle = Viva.Graph.svg('circle').attr('r', r).attr('cx', r/2 + 'px').attr('cy', r/2 + 'px').attr('fill', scale(avg_degree_linear)),
svgText = Viva.Graph.svg('text').attr('x', r/2 + 5 + r + 'px').attr('y', -r/2 + 5 + r + 'px').attr('font-size', font_size + 'px').attr('font-weight', 'bold').text(text);
svgCircle = Viva.Graph.svg('circle').attr('r', r).attr('cx', r/2 + 'px').attr('cy', r/2 + 'px').attr('fill', scale(node.data)),
svgText = Viva.Graph.svg('text').attr('x', r/2 + 5 + r + 'px').attr('y', -r/2 + 5 + r + 'px').attr('font-size', font_size + 'px').attr('font-weight', 'bold').text(node.id);
ui.append(svgCircle);
ui.append(svgText);
@@ -89,8 +80,6 @@
return ui;
}).placeNode(function (nodeUI, pos) {
// 'g' element doesn't have convenient (x,y) attributes, instead
// we have to deal with transforms: http://www.w3.org/TR/SVG/coords.html#SVGGlobalTransformAttribute
r = nodeUI.attr('special_radius')
nodeUI.attr('transform',
@@ -99,7 +88,6 @@
')');
});
// Step 3. Render the graph.
var renderer = Viva.Graph.View.renderer(graph, {
container: document.getElementById('test'),
graphics : graphics,