Graph plotting in Javascript with d3.js#
This module implements everything that can be used to draw graphs with d3.js in Sage.
On Python’s side, this is mainly done by wrapping a graph’s edges and vertices in a structure that can then be used in the javascript code. This javascript code is then inserted into a .html file to be opened by a browser.
In the browser, the displayed page contains at the bottom right a menu that allows to save the picture under the svg file format.
What Sage feeds javascript with is a “graph” object with the following content:
vertices
– each vertex is a dictionary defining :name
– The vertex’s labelgroup
– the vertex’ color (integer)
The ID of a vertex is its index in the vertex list.
edges
– each edge is a dictionary defining :source
– the ID (int) of the edge’s sourcetarget
– the ID (int) of the edge’s destinationcolor
– the edge’s color (integer)value
– thickness of the edgestrength
– the edge’s strength in the automatic layoutcolor
– color (hexadecimal code)curve
– distance from the barycenter of the two endpoints and the center of the edge. It defines the curve of the edge, which can be useful for multigraphs.
pos
– a list whose \(i\) th element is a dictionary defining the position of the \(i\) th vertex
It also contains the definition of some numerical/boolean variables whose
definition can be found in the documentation of
show()
: directed
, charge
,
link_distance
, link_strength
, gravity
, vertex_size
,
edge_thickness
.
Warning
Since the d3js package is not standard yet, the javascript is fetched from
d3js.org website by the browser. If you want to avoid that (e.g. to protect
your privacy or by lack of internet connection), you can install the d3js
package for offline use by running sage -i d3js
from the command line.
Todo
Add tooltip like in http://bl.ocks.org/bentwonk/2514276.
Add a zoom through scrolling (http://bl.ocks.org/mbostock/3681006).
Authors:
Nathann Cohen, Brice Onfroy – July 2013 – Initial version of the Sage code, Javascript code, using examples from d3.js.
Thierry Monteil (June 2014): allow offline use of d3.js provided by d3js spkg.
Functions#
- sage.graphs.graph_plot_js.gen_html_code(G, vertex_labels=True, edge_labels=False, vertex_partition=[], vertex_colors=None, edge_partition=[], force_spring_layout=False, charge=-120, link_distance=30, link_strength=2, gravity=0.04, vertex_size=7, edge_thickness=4)#
Create a .html file showing the graph using d3.js.
This function returns the name of the .html file. If you want to visualize the actual graph use
show()
.INPUT:
G
– the graphvertex_labels
– boolean (default:False
); whether to display vertex labelsedge_labels
– boolean (default:False
); whether to display edge labelsvertex_partition
– list (default:[]
); a list of lists representing a partition of the vertex set. Vertices are then colored in the graph according to the partitionvertex_colors
– dict (default:None
); a dictionary representing a partition of the vertex set. Keys are colors (ignored) and values are lists of vertices. Vertices are then colored in the graph according to the partitionedge_partition
– list (default:[]
); same asvertex_partition
, with edges insteadforce_spring_layout
– boolean (default:False
); whether to take previously computed position of nodes into account if there is one, or to compute a spring layoutvertex_size
– integer (default:7
); the size of a vertex’ circleedge_thickness
– integer (default:4
); thickness of an edgecharge
– integer (default:-120
); the vertices’ charge. Defines how they repulse each other. See https://github.com/mbostock/d3/wiki/Force-Layout for more informationlink_distance
– integer (default:30
); see https://github.com/mbostock/d3/wiki/Force-Layout for more informationlink_strength
– integer (default:2
); see https://github.com/mbostock/d3/wiki/Force-Layout for more informationgravity
– float (default:0.04
); see https://github.com/mbostock/d3/wiki/Force-Layout for more information
Warning
Since the d3js package is not standard yet, the javascript is fetched from d3js.org website by the browser. If you want to avoid that (e.g. to protect your privacy or by lack of internet connection), you can install the d3js package for offline use by running
sage -i d3js
from the command line.EXAMPLES:
sage: graphs.RandomTree(50).show(method="js") # optional - internet, needs sage.plot sage: g = graphs.PetersenGraph() sage: g.show(method="js", vertex_partition=g.coloring()) # optional - internet, needs sage.plot sage: graphs.DodecahedralGraph().show(method="js", # optional - internet, needs sage.plot ....: force_spring_layout=True) sage: graphs.DodecahedralGraph().show(method="js") # optional - internet, needs sage.plot sage: # needs sage.combinat sage: g = digraphs.DeBruijn(2, 2) sage: g.allow_multiple_edges(True) sage: g.add_edge("10", "10", "a") sage: g.add_edge("10", "10", "b") sage: g.add_edge("10", "10", "c") sage: g.add_edge("10", "10", "d") sage: g.add_edge("01", "11", "1") sage: g.show(method="js", vertex_labels=True, edge_labels=True, # optional - internet, needs sage.plot ....: link_distance=200, gravity=.05, charge=-500, ....: edge_partition=[[("11", "12", "2"), ("21", "21", "a")]], ....: edge_thickness=4)