Sgvizler has moved to github. This site and its repository will no longer be maintained.
wiki:Sgvizler/Chart/SgvizlerVisualizationDiiiForceGraph

This chart and its examples are implemented using Sgvizler 0.6, for version 0.5 see Sgvizler/0.5/DesigningQueries.

source:misc/image/screenshot/dForceGraph.png

Sgvizler D3 Force-directed Graph

Draws a graph using a force-directed algorithm, see, e.g.,  WikiPedia:Force-directed_graph_drawing.

Chart ID
sgvizler.visualization.D3ForceGraph
Source
 src/visualization/D3ForceGraph.js
External reference
 http://d3js.org/
 http://bl.ocks.org/mbostock/4062045
See also
sgvizler.visualization.DraculaGraph

Query result set format

2--4 columns:

  1. Identifier of source.
    Datatype: Any
  2. Identifier of target.
    Datatype: Any
  3. A value which determines the size of the node; see chart options below.
    Datatype: Number, must be positive
  4. A value which determines the color of the node.
    Datatype: Any

Only the two first columns are mandatory.

Chart options

Name Default Description
maxnodesize 15 The maximum size of a node, the larges value of the third result set column gets this size.
minnodesize 2 The minimum size of a node, the smallest value of the third result set column gets this size.

There are tons of possibilities for formatting the graph with the D3 library, but few currently available through Sgvizler, as there is no consenus of what options to include. If you add more options please share the code.

See Sgvizler/Using, or the example(s) below, for how to set options.

Live Example

Query: Display (parts of the RDF graph) as a graph.

To not overcrowd the visualization too much we limit to 50 triples. Note that the nodes may be moved and clicked.

HTML

<div id="ex"
     data-sgvizler-endpoint="http://sws.ifi.uio.no/sparql/world" 
     data-sgvizler-query="
        SELECT ?slabel ?olabel
        { ?s ?p ?o .
          ?s rdfs:label ?slabel .
          ?o rdfs:label ?olabel .
        } LIMIT 50"
     data-sgvizler-chart="sgvizler.visualization.D3ForceGraph"
     style="width:400px; height:265px; border:1px solid black; display: inline-block;"></div>

Result

The result of the HTML above (left), and a google.visualization.Table rendering of the same query (right).


Notes

See Sgvizler/Setup for how Sgvizler is setup on this site.

Note that the query and visualization is ment to show the use of Sgvizler, and may not be the most appropriate way of illustrating this result set.

Feedback

Tickets

No results

User Examples and Comments

Users, please insert (links to) other examples of usage of this Sgvizler chart, or relevant comments here.