You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
275 lines
10 KiB
275 lines
10 KiB
<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&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 & 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>
|
|
<Organization rdf:about="#w">
|
|
<tla>W3C</tla>
|
|
<staff>
|
|
<Person rdf:about="#d">
|
|
<name>Dan Connolly</name>
|
|
</Person>
|
|
</staff>
|
|
</Organization>
|
|
</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>
|
|
<g:EdgeProperty rdf:about="#staff">
|
|
<g:label>Technical Staff</g:label>
|
|
</g:EdgeProperty>
|
|
</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> <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>
|