# Sample plot using d3

``````

In [12]:

import random
from loganalyser import plot

``````

## Graph visualization

``````

In [13]:

plot.set_styles(['force_directed_graph'])

``````
``````

Out[13]:

/* http://bl.ocks.org/mbostock/4062045 */

.node {
stroke: #fff;
stroke-width: 1.5px;
}

stroke: #999;
stroke-opacity: .6;
}

``````
``````

In [14]:

# this code is from: https://github.com/stitchfix/d3-jupyter-tutorial/blob/master/multiple_simple_examples.ipynb
n_nodes = 30
p_edge = 0.05
graph = {"nodes": [], "links": []}
for i in range(n_nodes):
graph["nodes"].append( {"name": "i" + str(i), "group": int(random.uniform(1,11))} )
for i in range(n_nodes):
for j in range(n_nodes):
if random.uniform(0,1) < p_edge:
graph["links"].append( {"source": i, "target": j, "value": random.uniform(0.5,3)} )

``````
``````

In [15]:

plot.draw_graph('force_directed_graph', graph)

``````
``````

Out[15]:

var element = \$('#4ee62654-7b53-4bf1-9211-f265146d6ce1');

require(['js/force_directed_graph.js'], function(vis) {
element.append("<div id='plot7155152472'></div>");
vis.plot("plot7155152472", {'nodes': [{'group': 8, 'name': 'i0'}, {'group': 7, 'name': 'i1'}, {'group': 4, 'name': 'i2'}, {'group': 5, 'name': 'i3'}, {'group': 2, 'name': 'i4'}, {'group': 5, 'name': 'i5'}, {'group': 4, 'name': 'i6'}, {'group': 5, 'name': 'i7'}, {'group': 8, 'name': 'i8'}, {'group': 7, 'name': 'i9'}, {'group': 3, 'name': 'i10'}, {'group': 3, 'name': 'i11'}, {'group': 1, 'name': 'i12'}, {'group': 7, 'name': 'i13'}, {'group': 4, 'name': 'i14'}, {'group': 6, 'name': 'i15'}, {'group': 6, 'name': 'i16'}, {'group': 8, 'name': 'i17'}, {'group': 3, 'name': 'i18'}, {'group': 10, 'name': 'i19'}, {'group': 5, 'name': 'i20'}, {'group': 2, 'name': 'i21'}, {'group': 8, 'name': 'i22'}, {'group': 6, 'name': 'i23'}, {'group': 6, 'name': 'i24'}, {'group': 7, 'name': 'i25'}, {'group': 10, 'name': 'i26'}, {'group': 9, 'name': 'i27'}, {'group': 9, 'name': 'i28'}, {'group': 2, 'name': 'i29'}], 'links': [{'source': 0, 'target': 22, 'value': 1.9934681485488106}, {'source': 1, 'target': 26, 'value': 1.10169054445832}, {'source': 2, 'target': 4, 'value': 0.6344229830886725}, {'source': 2, 'target': 12, 'value': 0.8421394439488432}, {'source': 3, 'target': 5, 'value': 1.3938540782894089}, {'source': 3, 'target': 17, 'value': 1.7707968620236207}, {'source': 5, 'target': 7, 'value': 1.8596777298023328}, {'source': 5, 'target': 24, 'value': 2.2720661421111554}, {'source': 6, 'target': 13, 'value': 2.476906329415951}, {'source': 7, 'target': 11, 'value': 1.5803633391537673}, {'source': 8, 'target': 18, 'value': 2.152169938117587}, {'source': 8, 'target': 25, 'value': 2.076905605697543}, {'source': 9, 'target': 15, 'value': 1.8935625268957046}, {'source': 10, 'target': 1, 'value': 1.7005914167058322}, {'source': 10, 'target': 12, 'value': 1.2177649621328877}, {'source': 10, 'target': 13, 'value': 2.1648422421861104}, {'source': 11, 'target': 6, 'value': 2.5837743290292177}, {'source': 11, 'target': 13, 'value': 2.198142637679964}, {'source': 11, 'target': 19, 'value': 1.303974650213264}, {'source': 12, 'target': 1, 'value': 2.880388285598196}, {'source': 12, 'target': 10, 'value': 2.1599453952042387}, {'source': 13, 'target': 1, 'value': 0.5441770047087858}, {'source': 13, 'target': 5, 'value': 0.7952690140745837}, {'source': 13, 'target': 11, 'value': 1.4492697400735848}, {'source': 14, 'target': 2, 'value': 1.1900880414880264}, {'source': 14, 'target': 12, 'value': 1.9145010916437881}, {'source': 14, 'target': 19, 'value': 1.5164248430446983}, {'source': 15, 'target': 2, 'value': 0.696224789944621}, {'source': 15, 'target': 20, 'value': 1.5880202364487452}, {'source': 17, 'target': 22, 'value': 2.8842674715940753}, {'source': 17, 'target': 26, 'value': 2.119187930971675}, {'source': 19, 'target': 1, 'value': 1.898078740536167}, {'source': 19, 'target': 7, 'value': 2.7920323069603556}, {'source': 19, 'target': 12, 'value': 2.6197696346928523}, {'source': 19, 'target': 20, 'value': 1.8154747399089364}, {'source': 19, 'target': 23, 'value': 2.7740645383693945}, {'source': 22, 'target': 13, 'value': 1.920735904194371}, {'source': 23, 'target': 12, 'value': 1.366426468092494}, {'source': 24, 'target': 2, 'value': 2.1984483104868398}, {'source': 25, 'target': 18, 'value': 2.235985894835473}, {'source': 25, 'target': 22, 'value': 2.7700843607814223}, {'source': 27, 'target': 0, 'value': 2.288304344784693}, {'source': 27, 'target': 29, 'value': 1.1999868638822035}]}, {});
});

``````

please use the mouse to drag my nodes!