CoCalc -- Collaborative Calculation in the Cloud
Sharedsupport / 2015-01-15-d3.sagewsOpen in CoCalc

Examples for support purposes...

import graphics; graphics.graph_to_d3_jsonable?
File: /projects/4a5f0542-5873-4eed-a85c-a18c706e8bcd/.sagemathcloud/
Signature : graphics.graph_to_d3_jsonable(G, vertex_labels=False, edge_labels=False, vertex_partition=[], edge_partition=[], force_spring_layout=False, charge=-120, link_distance=30, link_strength=1.5, gravity=0.04, vertex_size=7, edge_thickness=4, width=None, height=None, **kwds)
Docstring :
Display a graph in SageMathCloud using the D3 visualization


* "G" -- the graph

* "vertex_labels" (boolean) -- Whether to display vertex labels
  (set to "False" by default).

* "edge_labels" (boolean) -- Whether to display edge labels (set
  to "False" by default).

* "vertex_partition" -- a list of lists representing a partition
  of the vertex set. Vertices are then colored in the graph
  according to the partition. Set to "[]" by default.

* "edge_partition" -- same as "vertex_partition", with edges
  instead. Set to "[]" by default.

* "force_spring_layout" -- whether to take sage's position into
  account if there is one (see "()" and "()"), or to compute a
  spring layout. Set to "False" by default.

* "vertex_size" -- The size of a vertex' circle. Set to 7 by

* "edge_thickness" -- Thickness of an edge. Set to "4" by

* "charge" -- the vertices' charge. Defines how they repulse each
  other. See for
  more information. Set to "-120" by default.

* "link_distance" -- See Layout for more
  information. Set to "30" by default.

* "link_strength" -- See Layout for more
  information. Set to "1.5" by default.

* "gravity" -- See
  Layout for more information. Set to "0.04" by default.


   show(graphs.RandomTree(50), d3=True)

   show(graphs.PetersenGraph(), d3=True, vertex_partition=g.coloring())

   show(graphs.DodecahedralGraph(), d3=True, force_spring_layout=True)

   show(graphs.DodecahedralGraph(), d3=True)

   g = digraphs.DeBruijn(2,2)
   show(g, d3=True, vertex_labels=True,edge_labels=True,
File: /projects/4a5f0542-5873-4eed-a85c-a18c706e8bcd/.sagemathcloud/
Signature : show(obj, svg=True, d3=True, **kwds)
Docstring :
Show a 2d or 3d graphics object, animation, or matplotlib figure,
or show an expression typeset nicely using LaTeX.

   * display: (default: True); if True, use display math for
     expression (big and centered).

   * svg: (default: True); if True, show 2d plots using svg
     (otherwise use png)

   * d3: (default: True); if True, show graphs (vertices and
     edges) using an interactive D3 viewer

        for the many options for this viewer, type 'import
        graphics; graphics.graph_to_d3_jsonable?'

     If false, graphs are converted to plots and displayed as

   * renderer: (default: 'webgl'); for 3d graphics

        * 'webgl' (fastest) using hardware accelerated 3d;

        * 'canvas' (slower) using a 2d canvas, but may work
          better with transparency;

        * 'tachyon' -- a ray traced static image.

   * spin: (default: False); spins 3d plot, with number
     determining speed (requires mouse over plot)

   * events: if given, {'click':foo, 'mousemove':bar}; each time
     the user clicks, the function foo is called with a 2-tuple
     (x,y) where they clicked.  Similarly for mousemove.  This
     works for Sage 2d graphics and matplotlib figures.

For animations, there are two options:

   - ``delay`` - (default: 20) delay in hundredths of a second between frames

   - ``iterations`` - integer (default: 0); number of iterations of animation. If 0, loop forever.


Here's an example that illustrates creating a clickable image with

   def f0(fun=x*sin(x^2), mousemove='', click='(0,0)'):
       click = sage_eval(click)
       g = plot(fun, (x,0,5), zorder=0) + point(click, color='red', pointsize=100, zorder=10)
       ymax = g.ymax(); ymin = g.ymin()
       m = fun.derivative(x)(x=click[0])
       b =  fun(x=click[0]) - m*click[0]
       g += plot(m*x + b, (click[0]-1,click[0]+1), color='red', zorder=10)
       def h(p):
           f0.mousemove = p
       def c(p):
       show(g, events={'click':c, 'mousemove':h}, svg=True, gridlines='major', ymin=ymin, ymax=ymax)

show(g, width=300, height=300)
d3-based renderer not yet implemented
d3-based renderer not yet implemented
D = DiGraph( { 0: [1,2,3], 1: [0,2], 2: [3], 3: [4], 4: [0,5], 5: [1] } )
d3-based renderer not yet implemented