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

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

source:misc/image/screenshot/rdGraph.png

Sgvizler Dracula Graph

Draws a graph with moveable nodes given source and target, and edge label. Node coloring is possible. It used the Dracula graph library, which again uses the Raphaël visualization javascript framework.

Chart ID
sgvizler.visualization.DraculaGraph
Source
 src/visualization/DraculaGraph.js
External reference
 http://www.graphdracula.net/
 http://raphaeljs.com
Other similiar charts
sgvizler.visualization.D3ForceGraph

Query result set format

4--7 columns:

  1. Source URI
    Datatype: string
  2. Source label
    Datatype: string
  3. Target URI
    Datatype: string
  4. Target label
    Datatype: string
  5. Edge label
    Datatype: string
  6. Source color
    Datatype: string
  7. Target color
    Datatype: string

The four first columns are mandatory. The last three are optional.

URIs are used to (uniquely) identify nodes. Labels are used to decorate the node or edge with a string, typically the name of the thing or relation. Colours must be given as a HTML color name, e.g., "red", "blue".

Any number of columns on any format. All values are treated as strings.

Chart options

Name Default Description
directed false Is the graph directed or not, e.g, are the edges arrows or lines?
noderadius 0.5 Contols the distance between nodes in the graph
nodecolor "green"
nodeheight 20
nodepadding 7
nodefontsize "10px"
nodestrokewidth "1px"
nodecornerradius "1px"
edgefontsize "10px"
edgefill "blue"
edgestroke "blue"
edgestrokewidth 1
edgeseparator " " Multiple relationships between two nodes are collapsed to one edge, but labels are accumulated. This option specifies how multiple labels are separated.

Consult the external libraries for possible extensions to the list chart options.

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 ?s ?slabel ?o ?olabel afn:localname(?p)
        { ?s ?p ?o .
          ?s rdfs:label ?slabel .
          ?o rdfs:label ?olabel .
        } LIMIT 50"
     data-sgvizler-chart="sgvizler.visualization.DraculaGraph"
     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.

User Examples and Comments

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