Elasticgraph
Input Data
The input dataset is a DataFrame with three column, source, target and weight.
# source target weight
# 0 Agricultural 'waste' Bio-conversion 124.729
# 1 Bio-conversion Liquid 0.597
# 2 Bio-conversion Losses 26.862
# 3 Bio-conversion Solid 280.322
# 4 Bio-conversion Gas 81.144
# .. ... ... ...
# 63 Thermal generation District heating 79.329
# 64 Tidal Electricity grid 9.452
# 65 UK land based bioenergy Bio-conversion 182.010
# 66 Wave Electricity grid 19.013
# 67 Wind Electricity grid 289.366
# [68 rows x 3 columns]
- D3Blocks.elasticgraph(df, scaler='zscore', group='cluster', title='Elasticgraph - D3blocks', filepath='Elasticgraph.html', figsize=[1500, 1500], collision=0.5, charge=1000, size=4, hull_offset=15, single_click_expand=False, sticky=True, label_zoom_threshold=0.4, notebook=False, showfig=True, save_button: bool = True, return_html: bool = False, overwrite=True)
D3 Elasticgraph block.
Elasticgraph is integrated in d3blocks to create interactive and stand-alone D3 force-directed graphs for which the groups are clustered. The original d3js is forked from Ger Hobbelts (see references). The input data is a dataframe containing source, target, and weight. This graph relies on the properties of d3graph and is also utilized in the d3blocks library. In underneath example, we load an example dataset which contains K relationships that are stored in a DataFrame with the columns source, target, and weight. The nodes are clustered (and colored) based on the Louvain heuristics which is the partition of highest modularity, i.e. the highest partition of the dendrogram generated by the Louvain algorithm. The strength of the edges is based on the weights. The ouput is a html file that is interactive and stand alone. For demonstration purposes, the “bigbang”, “energy” and “stormofswords” dataset can be used.
- Parameters:
df (pd.DataFrame()) –
- Input data containing the following columns:
’source’
’target’
’weight’
group (list of strings (default: 'cluster')) –
- Grouping (and coloring) of the nodes.
’cluster’ : Colours are based on the community distance clusters.
None: All nodes will have the same color (auto generated).
collision (float, (default: 0.5)) – Response of the network. Higher means that more collisions are prevented (looser spacing between linked nodes). Lower makes the network tighter.
charge (int, (default: 1000)) – Node repulsion strength. Higher makes nodes push apart more strongly (looser network); towards zero becomes a denser/tighter network.
size (float, (default: 4)) – Size of the nodes.
hull_offset (float, (default: 15)) – The higher the number the more the clusters will overlap after expanding.
single_click_expand (bool, (default: False)) – Nodes are not expanded with a single click.
sticky (bool, (default: True)) – Pin a node in place after dragging it. Right-click a pinned node to release it back into the simulation.
label_zoom_threshold (float, (default: 0.4)) – Zoom scale below which node/edge labels are hidden (they reappear when zooming back in).
title (String, (default: None)) –
- Title of the figure.
’elasticgraph’
filepath (String, (Default: user temp directory)) –
- File path to save the output.
Temporarily path: ‘d3blocks.html’
Relative path: ‘./d3blocks.html’
Absolute path: ‘c://temp//d3blocks.html’
None: Return HTML
figsize (tuple) –
- Size of the figure in the browser, [width, height].
[None, None] # Full screen
[1500, 800]
showfig (bool, (default: True)) –
True: Open browser-window.
False: Do not open browser-window.
notebook (bool) –
True: Use IPython to show chart in notebook.
False: Do not use IPython.
save_button (bool, (default: True)) –
True: Save button is shown in the HTML to save the image in svg.
False: No save button is shown in the HTML.
overwrite (bool, (default: True)) –
True: Overwrite the html in the destination directory.
False: Do not overwrite destination file but show warning instead.
- Return type:
None.
Examples
>>> # Load library >>> from d3blocks import D3Blocks >>> # >>> # Initialize >>> d3 = D3Blocks() >>> # >>> # Import example >>> df = d3.import_example('energy') >>> df = d3.import_example('stormofswords') >>> # >>> # Create force-directed-network (without cluster labels) >>> d3.elasticgraph(df, filepath='Elasticgraph.html') >>> # >>> # Show elasticgraph >>> html = d3.Elasticgraph.show(); >>> # >>> # Node properties >>> d3.Elasticgraph.D3graph.node_properties >>> # d3.Elasticgraph.set_node_properties(color=None) >>> d3.Elasticgraph.D3graph.node_properties['Wind']['size']=20 >>> # >>> # Edge properties >>> d3.Elasticgraph.D3graph.edge_properties >>> d3.Elasticgraph.D3graph.edge_properties[('Wind', 'Electricity_grid')]['label']='TEST' >>> # >>> # After making changes, show the graph again using show() >>> d3.Elasticgraph.show() >>> # Show original graph >>> d3.Elasticgraph.D3graph.show() >>> #
from d3blocks import D3Blocks
# Initialize
d3 = D3Blocks()
# Import example
# df = d3.import_example('stormofswords')
df = d3.import_example('energy')
# Create force-directed-network (without cluster labels)
d3.elasticgraph(df, filepath='Elasticgraph.html', showfig=False, collision=1, charge=2500)
# Set all colors to the same color
# d3.Elasticgraph.D3graph.set_node_properties(fontcolor='#000000')
d3.Elasticgraph.D3graph.node_properties
d3.Elasticgraph.D3graph.node_properties['Wind']
d3.Elasticgraph.D3graph.node_properties['Wind']['size']=15
d3.Elasticgraph.D3graph.node_properties['Wind']['edge_color']='#FFFFFF'
d3.Elasticgraph.D3graph.node_properties['Wind']['edge_size']=5
d3.Elasticgraph.D3graph.node_properties['Wind']['fontsize']=20
d3.Elasticgraph.D3graph.node_properties['Wind']['fontcolor']='#000000'
d3.Elasticgraph.D3graph.node_properties['Wind']['group']='new group'
# Update another node
d3.Elasticgraph.D3graph.node_properties['Wave']['size']=8
d3.Elasticgraph.D3graph.node_properties['Wave']['fontcolor']='#000000'
d3.Elasticgraph.D3graph.node_properties['Wave']['group']='new group'
d3.Elasticgraph.D3graph.node_properties['Coal']['size']=10
d3.Elasticgraph.D3graph.node_properties['Biomass_imports']['size']=1
# Set edge properties
d3.Elasticgraph.D3graph.edge_properties
d3.Elasticgraph.D3graph.edge_properties[('Wind', 'Electricity_grid')]['label']='TEST'
#
# Show elasticgraph
d3.Elasticgraph.show()
from d3blocks import D3Blocks
# Initialize
d3 = D3Blocks()
df = d3.import_example('socialmedia')
df = df[0:1000]
# Create graph
d3.elasticgraph(df, collision=0.1, charge=2000, size=4, hull_offset=15, showfig=True, figsize=[2500, 2500], filepath=r'socialmedia_1000.html')
Interactive example:
View the social media network visualization