index.html 10.4 KB
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Circles and arrows diagrams using stylesheet rules</title>
  <meta http-equiv="Content-Type" content="text/html" />
</head>

<body>
<p><a href="../../">W3C</a> <a href="../../2000/01/sw/">SW Dev</a></p>

<h1>Circles and arrows diagrams using stylesheet rules
<img align="right" src="sw-bcard.png" alt=""/>
</h1>

<p>One of the objectives of the <a href="../../2000/01/sw/">advanced
development component</a> of the <a
href="../../2001/sw/Activity">Semantic Web activity</a> is to
demonstrate how RDF and Semantic Web technologies can be applied to
the <a href="../../Consortium/Process/">W3C Process</a> to increase
efficiency, reliability, etc. In the early stages of developing an RDF
model of the W3C process, the tools I was using to visualize the model
while working on it started working well enough that I started
applying them to all sorts of stuff.</p>

<p>Starting with the open source <a
href="http://www.research.att.com/sw/tools/graphviz/">graphviz</a>
toolset from AT&amp;T research, we model the structure of its
.dot input files using an RDF vocabulary of terms like
<tt>digraph</tt>, <tt>hasNode</tt>, <tt>EdgeProperty</tt>, etc.;
an XSLT transformation,
<a href="rdf2dot.xsl">rdf2dot.xsl</a>,
produces actual .dot syntax from
RDF/xml documents that use this vocabulary.
This vocabulary is documented<a href="#n1">*</a> in
<a href="gv.n3">gv.n3</a> (using a sort of wiki RDF syntax;
cf. <a href="/2000/10/swap/Primer.html">Primer:
Getting into RDF &amp; Semantic Web using N3</a>).
</p>

<p>
<small><em><a name="n1">*</a> to some extent;
I'm afraid the gv schema is incomplete and the XSLT code is
the only complete reference as of this writing.
The gv vocabulary does follow
<cite><a href="http://www.research.att.com/sw/tools/graphviz/dotguide.pdf">Drawing graphs with <em>dot</em></a></cite> quite closely, though,
and tracks updates to <a href="http://www.graphviz.org/doc/info/attrs.html">dot graph attributes</a> to some extent.
</em></small>
</p>


<div>
<h2>Try it</h2>

<p>Using our interactive <a href="../05/xslt">XSLT service</a>:</p>

<form method="get" action="http://www.w3.org/2000/06/webdata/xslt">
<p>XSL file: <input type="text" size="60" name="xslfile"
  value="http://www.w3.org/2001/02pd/rdf2dot.xsl" />
</p>

<p>XML data: <input type="text" size="60" name="xmlfile"
  value="http://www.w3.org/2001/02pd/sw-bcard.rdf" /></p>

<p>
<input type="submit" value="Get .dot Results" /></p>
</form>
</div>

<h2>Diagram Style Rules</h2>

<p>Now for the fun part: exploiting generic RDF rules processing
to deduce facts about graphviz diagrams from facts built
from other vocabularies. Suppose we know a few simple
facts:</p>

<ul>
<li>Something has staff somebody.</li>
<li>That somebody is a person whose name is Dan Connolly.</li>
<li>That something is an organization whose TLA is W3C.</li>
</ul>

<p>In our wiki RDF syntax, we can write this as:</p>

<pre>
:w :staff :d .
:d a :Person; :name "Dan Connolly".
:w a :Organization; :tla "W3C".
</pre>

<p>If you're more familiar with the XML syntax for RDF, that's:</p>

<pre>
            &lt;Organization rdf:about="#w"&gt;
                &lt;tla&gt;W3C&lt;/tla&gt;
                &lt;staff&gt;
                  &lt;Person rdf:about="#d"&gt;
                    &lt;name&gt;Dan Connolly&lt;/name&gt;
                  &lt;/Person&gt;
                &lt;/staff&gt;
            &lt;/Organization&gt;
</pre>

<p>Now let's represent that in circles-and-arrows.
First, we'll say that <tt>staff</tt> properties
should be drawn as arrows, labelled "Technical Staff":</p>

<pre>
:onStaff a g:EdgeProperty; g:label "Technical Staff".
</pre>

<p>or:</p>

<pre>
            &lt;g:EdgeProperty rdf:about="#staff"&gt;
                &lt;g:label&gt;Technical Staff&lt;/g:label&gt;
            &lt;/g:EdgeProperty&gt;
</pre>

<p>Now for the rules bit: <em>if</em> something is a person
whose name is some string, <em>then</em> use that string
as the label for the thing in the diagram:</p>

<pre>
this log:forAll :n, :str.

{ :n a :Person; :name :str } log:implies { :n g:label :str }.
</pre>

<p>I hope you don't mind if I leave the RDF/XML syntax for rules for
another day... Let's look at one more rule though: <em>if</em>
something is an organization with some string as its TLA, <em>then</em>
label it with that string, make it 20pt white text on a blue background:</p>

<pre>
{ :n a :Organization; :tla :str }
 log:implies { :n g:label :str;
		g:style "filled";
		g:color "blue";
		g:fontcolor "white";
		g:fontsize "20" }.
</pre>

<p>Then we put that into cwm, our rules engine, and
ask it to think; i.e. apply all the rules over and
over until no new conclusions come out:</p>

<pre>
  python <a href="../../2000/10/swap/cwm.py">cwm.py</a> <a href="sw-bcard.n3">sw-bcard.n3</a> --think --rdf&gt; <a href="sw-bcard.rdf">sw-bcard.rdf</a>
</pre>

<p><img align="right" src="sw-bcard.png" alt=""/>If you look inside <a href="sw-bcard.rdf">sw-bcard.rdf</a>,
you'll see that cwm concluded that Dan's name is also
his graphic label, and that W3C is blue etc.</p>

<p>Then we feed sw-bcard.rdf thru rdf2dot.xsl and out comes dot
syntax; from there, we use the graphviz tools to produce <a
href="sw-bcard.svg">SVG</a>, <a href="sw-bcard.png">PNG</a>, <a
href="sw-bcard.ps">postscript</a>, and the other formats supported by
graphviz. And that's all there is to it.<a href="#n2">**</a>
</p>

<p><small><em><a name="n2">**</a>Actually, there are a few limitations
you should know about.  rdf2dot.xsl only groks a subset of RDF syntax,
so you need to use a few more cwm flags to keep the nesting to a
minimum and absolutize all URI references.  See the <a
href="Makefile">Makefile</a> for details</em></small></p>

<h2>More Examples</h2>

<ul>
<li><a href="../04/roadmap">W3C roadmap diagrams</a> by TimBL, which
made their debut at WWW10.</li>
<li><a href="../../2000/10/swap/infoset/">an XML infoset diagram</a>,
in progress (May 2001).</li>
<li><a href="http://nwalsh.com/docbook/procdiagram/index.html">DocBook Publishing Model</a> by Norm Walsh, circa Jan 2002</li>
<li>example-fig.{<a href="../05olex/example-fig.svg">svg</a>,
<a href="../05olex/example-fig.png">png</a>,
<a href="../05olex/example-fig.ps">ps</a>} diagrams of
<a href="../05olex/example.rdf">a version of the Wendy Cook example</a>
from the <a href="http://www.scientificamerican.com/2001/0501issue/0501berners-lee.html">Sciam article</a>; Ora gave me the RDF input; I just
wrote <a href="../05olex/Makefile">a makefile</a>
and <a href="../05olex/style.n3">some style rules</a>.</li>
</ul>

<p>These are some of the first few examples I worked on; they
might be out of date in some details:</p>

<dl>
  <dt><a href="gv.n3">gv.n3</a></dt>
    <dd>RDF/n3 transcription of <a
      href="http://www.research.att.com/sw/tools/graphviz/">graphviz/dot</a>
      vocabulary; <a href="test-graph1.n3">test-graph1.n3</a> is an example;
      <a href="rdf2dot.xsl">rdf2dot.xsl</a> writes takes RDF/XML syntax and
      writes dot syntax; see the <a href="Makefile">Makefile</a> for details.
      (@@discuss partial understanding)</dd>
  <dt><a href="auditDiagram.n3">auditDiagram.n3</a></dt>
    <dd>a stylesheet for drawing a sort of audit diagram; <a
      href="rec54">rec54</a>.{<a href="rec54.n3">n3</a>,<a
      href="rec54.rdf">rdf</a>}

      is a model of the W3C Recommendation process;
      <a
      href="rec54-img">rec54-img</a
      >.{<a href="rec54-img.n3">n3</a
       >,<a href="rec54-img.rdf">rdf</a
       >,<a href="rec54-img.dot">dot</a
       >,<a href="rec54-img.ps">ps</a
       >,<a href="rec54-img.svg">svg</a
       >,<a href="rec54-img.png">png</a>} is a diagram using this style; note that the RDF is generated using cwm.py -think
      (@@explain more). I started working on this example by drawing <a
      href="rec22.dot">rec22.dot</a> by hand (<a href="rec22.ps">ps</a>
      output). rec54 hasn't yet caught up with rec22 in the level of detail.
      <p>see also: <a href="/DesignIssues/PaperTrail.html">PaperTrail</a>, <a
      href="/DesignIssues/Conversations">Conversations and State</a>, INDECS
      stuff@@</p>
    </dd>
  <dt><a href="orgDiagram.n3">orgDiagram.n3</a></dt>
    <dd>a stylesheet for drawing organization diagrams for W3C:
      domains/activities/groups, chairs, etc.; <a href="swa2">swa2</a>.{<a
      href="swa2.n3">n3</a>,<a href="swa2.rdf">rdf</a>,<a
      href="swa2.dot">dot</a>,<a href="swa2.ps">ps</a>} is represents the
      structure from the <a href="../sw/Activity">Semantic Web Activity
      statement</a>. swa.{dot,ps}, rk43.{dot,ps}, and swad.{dot,ps} are
      hand-edited predecessors of swa2.dot.</dd>
  <dt><a href="prop43.n3">prop43.n3</a> and <a href="kpic.n3">kpic.n3</a></dt>
    <dd>a re-creation of the circles-and-arrows diagram from the original <a href="/History/1989/proposal.html">1989 WWW proposal</a>; output is proposal1989.{<a href="proposal1989.rdf">rdf</a
>,<a href="proposal1989.dot">dot</a
>,<a href="proposal1989.svg">svg</a
>,<a href="proposal1989.ps">ps</a>}.
<br />
see also:
<a href="/1999/11/11-WWWProposal/thenandnow">danbri's rendition</a>,
<a
      href="http://lists.w3.org/Archives/Public/www-rdf-interest/2000Sep/0235.html">Sep
      2000 discussion</a></dd>

  <dt><a href="rdfs.n3">rdfs.n3</a></dt>
    <dd>some rules about subClass, subProperty, etc.</dd>
  <dt></dt>
</dl>

<p>I'd like to revisit my March 2000 work on <a
href="../../2000/03/xmldep/">XML spec dependencies</a> and Feb 2000 <a
href="http://208.190.202.42/2000/02/procdia/">issue resolution process
diagrams</a>, now that I have these tools.</p>

<p><em>note to self: <a
    href="http://208.190.202.42/cgi-bin/wiki.pl?CirclesAndArrowsDiagrams">CirclesAndArrowsDiagrams</a>
    in one of my Feb 2001 test wikis</em>.</p>

<h3>Related work</h3>

<p>See also <a href="../../RDF/Implementations/SiRPAC/">SiRPAC</a>, <a
href="http://rdfviz.org/">rdfviz</a>.</p>


<h2>Getting the source code</h2>

<p>All semantic web development is supposed to be done in a
world-readable CVS repository, per the <a
href="../sw/Activity">Semantic Web Activity statement</a>. So this
stuff should perhaps be moved near <a
href="http://dev.w3.org/cvsweb/2001/telagent/">telagent</a>/<a
href="http://dev.w3.org/cvsweb/2001/palmagent/">palmagent</a>.</p>

<p>But for now, you should be able to just follow the links
to each of the bits. Sorry about that.</p>

<hr />
<address>
  <a href="http://www.w3.org/People/Connolly/">Dan Connolly</a><br />
  <small>$Revision: 1.17 $ of $Date: 2005/11/17 15:13:00 $ by $Author: connolly
  $</small>
</address>
</body>
</html>