Copyright 2009 David Dodds
This article is about MathML metadata
in SVG code.
Copyright W3C {
The <annotation> element can be used to
embed a semantic annotation in non-XML
format, for example to store the formula
in the format used by an equation editor
. Alternatively, the equation could be
represented in Content MathML as an
expression tree for the functional structure
elements like apply (for function application)
or eq (for the equality relation) elements:
Although less compact than TeX, the
XML structuring promises to make it
widely usable and allows for instant
display in applications such as Web
browsers and facilitates a straightforward
interpretation of its meaning in mathematical
software products. MathML is not intended
to be written or edited directly by
humans.[1] }
material of
Copyright W3C ends here.
The following example code is adapted
by David Dodds from an example in
W3C MathML Specification. The
original example is Copyright W3C
and the modified version is
Copyright 2009 David Dodds.
myfoo_barchart.xml
Example of spatially related SVG components and metadata
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-
20010904/DTD/svg10.dtd">
<!--Copyright 2009 David Dodds All Rights Reserved code copyright owner-->
<svg xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg">
<desc xmlns:myfoo="http://example.org/myfoo">
<myfoo:title>This is a financial report</myfoo:title>
<myfoo:descr>The global description uses markup from the
<myfoo:emph>myfoo</myfoo:emph>namespace.
</myfoo:descr>
<myfoo:scene>
<myfoo:what>widget growth</myfoo:what>
<myfoo:contains>thirteen graph-bar</myfoo:contains>
<myfoo:when>1987 through 1999</myfoo:when>
</myfoo:scene>
</desc>
<metadata xmlns:rdfs="http://www.w3.org/TR/. ..-schema#"
xmlns:omcsvg="http://www.openmeta.
com/omcschema/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description about="#text1">
<omcsvg:Below resource="#xbaseline"/>
</rdf:Description>
<rdfs:comment rdf:datatype="http://www.w3.org/2001/XMLSchema#string">XSLT2
Parse
cantranslate "id text1 is below id xbaseline"
</rdfs:comment>
<rdf:Description about="#text1">
<omcsvg:IsNear resource="#xbaseline"/>
</rdf:Description>
<rdf:Description about="#text2">
<omcsvg:Below resource="#text1"/>
</rdf:Description>
<rdf:Description about="#text2">
<omcsvg:IsNear resource="#text1"/>
</rdf:Description>
<rdf:Description about="#endlineleft">
<omcsvg:AtRight resource="#bar1"/>
</rdf:Description>
<rdf:Description about="#endlineleft">
<omcsvg:IsNear resource="#bar1"/>
</rdf:Description>
<rdf:Description about="#endlineright">
<omcsvg:AtLeft resource="#bar13"/>
</rdf:Description>
<rdf:Description about="#endlineright">
<omcsvg:IsNear resource="#bar13"/>
</rdf:Description>
<rdf:Description about="#bar1">
<omcsvg:AtRight resource="#bar2"/>
</rdf:Description>
<rdf:Description about="#bar2">
<omcsvg:AtRight resource="#bar3"/>
</rdf:Description>
<rdf:Description about="#bar3">
<omcsvg:AtRight resource="#bar4"/>
</rdf:Description>
<rdf:Description about="#bar4">
<omcsvg:AtRight resource="#bar5"/>
</rdf:Description>
<rdf:Description about="#bar5">
<omcsvg:AtRight resource="#bar6"/>
</rdf:Description>
<rdf:Description about="#bar6">
<omcsvg:AtRight resource="#bar7"/>
</rdf:Description>
<rdf:Description about="#bar7">
<omcsvg:AtRight resource="#bar8"/>
</rdf:Description>
<rdf:Description about="#bar8">
<omcsvg:AtRight resource="#bar9"/>
</rdf:Description>
<rdf:Description about="#bar9">
<omcsvg:AtRight resource="#bar10"/>
</rdf:Description>
<rdf:Description about="#bar10">
<omcsvg:AtRight resource="#bar11"/>
</rdf:Description>
<rdfs:comment>SWRL SPARQL Jena RuleML XSLT can be used to examine
themetadata and
ontology info to "see" that thisis an SVG bar chart
</rdfs:comment>
<rdfs:seeAlso rdf:resource="http://www.open-meta.com/omcschema#AtRight"/>
<rdfs:isDefinedBy rdf:resource="http://www.open-meta.com/majic"/>
<rdf:Description about="#bar11">
<omcsvg:AtRight resource="#bar12"/>
</rdf:Description>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<apply>
<eq/>
<ci>y</ci>
<apply>
<plus/>
<apply>
<times/>
<cn>5</cn>
<apply>
<power/>
<ci>x</ci>
<cn>2</cn>
</apply>
</apply>
<apply>
<times/>
<cn>3</cn>
<ci>x</ci>
</apply>
<ci>c</ci>
</apply>
</apply>
<annotation encoding="gFortran 2008">
y = 5*(x**2) + 3*x+c
</annotation>
<apply>
<csymbol definitionURL="http://www.open-
meta.com/function_spaces.html#my_DefMajestic12"
encoding="text">
Majestic12
</csymbol>
<ci>x</ci>
<ci>y</ci>
<ci>c</ci>
</apply>
<annotation-xml encoding="OpenMetaComputing">
<OMC xmlns="http://www.open-meta.com/OpenMetaComputing">
<OMS cd="Majestic12" name="Majic"/>
<OMI> URI=NASA.JPL/SWEET/numeric <owl:Class rdf:about="#Quantity"> +//
\ <owl:unionOf rdf:parseType="Collection"> // <rdf:Description
rdf:about="#Scalar"/>
\</OMI>
<OMI> URI=NASA.JPL/SWEET/numeric <owl:Class
rdf:about="#GeometricalObject_1D"></OMI>
<OMI> URI=NASA.JPL/SWEET/numeric <owl:Class rdf:about="#Line"></OMI>
<OMI> URI=NASA.JPL/SWEET/numeric <owl:Class
rdf:about="#Peak"></OMI>
<OMI> URI=*/myfoo_barchart.svg
<Bag>bar1,bar2,bar3,bar4,bar5,bar6,bar7,bar8,bar9,bar10,bar11,bar12,bar13</Bag><
/OMI>
</OMC>
</annotation-xml>
</math>
</metadata>
<text x="1" id="originlabel" y="12" style="font-family:Verdana;
font-size:12.333;
fill:lightblue"> * origin x=0, y=0</text>
<text x="340" id="uplabel" y="20" style="font-family:Verdana; font-size:12.333;
fill:black">
UP</text>
<text x="340" id="downlabel" y="230" style="font-family:Verdana;
font-size:12.333;
fill:black">DOWN</text>
<rect x="37" y="190" width="280" style="stroke:black; stroke-width:1" height="1"
id="xbaseline"/>
<text x="317" id="text3" y="194" style="font-family:Verdana; font-size:12.333;
fill:indigo">18</text>
<rect x="333" y="96" width="1" style="stroke:black; stroke-width:1" height="104"
id="endlineright"/>
<rect x="37" y="96" width="1" style="stroke:black; stroke-width:1" height="104"
id="endlineleft"/>
<rect x="40" y="160" width="20" style="stroke:green; fill:green; stroke-width:0"
height="40"
id="bar1"/>
<rect x="60" y="140" width="20" style="stroke:yellow; fill:yellow;
stroke-width:0"
height="60"
id="bar2"/>
<rect x="80" y="111" width="20" style="stroke:blue; fill:orange; stroke-width:0"
height="89"
id="bar3"/>
<rect x="100" y="130" width="20" style="stroke:yellow; fill:yellow;
stroke-width:0"
height="70"
id="bar4"/>
<rect x="120" y="173" width="20" style="stroke:green; fill:lightgreen;
stroke-width:0"
height="27"
id="bar5"/>
<rect x="140" y="191" width="20" style="stroke:green; fill:green;
stroke-width:0"
height="09"
id="bar6"/>
<rect x="160" y="140" width="20" style="stroke:yellow; fill:yellow;
stroke-width:0"
height="60"
id="bar7"/>
<rect x="180" y="167" width="20" style="stroke:green; fill:green;
stroke-width:0"
height="33"
id="bar8"/>
<rect x="200" y="175" width="20" style="stroke:green; fill:green;
stroke-width:0"
height="25"
id="bar9"/>
<rect x="220" y="129" width="20" style="stroke:yellow; fill:yellow;
stroke-width:0"
height="71"
id="bar10"/>
<rect x="240" y="150" width="20" style="stroke:green; fill:green;
stroke-width:0"
height="50"
id="bar11"/>
<rect x="260" y="139" width="20" style="stroke:yellow; fill:yellow;
stroke-width:0"
height="61"
id="bar12"/>
<rect x="280" y="125" width="20" style="stroke:yellow; fill:yellow;
stroke-width:0"
height="75"
id="bar13"/>
<text x="37" id="text1" y="210" style="font-family:Verdana; font-size:25.;
fill:black">95969798990001020304050607</text>
<text x="37" id="text2" y="230" style="font-family:Verdana; font-size:12.333;
fill:blue">Mean
High Ratings August 2007</text>
</svg>
This article is about the use of MathML to
provide data and calculations for use in
defining graphics and animation, particularly
(but not exclusively) in SVG. In this
particular article we see that the barchart
SVG code contains a MathML representation
of an equation which could be used to
obtain the data values plotted / depicted by
the barchart SVG (code / program) it is
embedded within. The MathML is XML
namespace and is located in the SVG
metadata element content.
If you have a recent version of Firefox
browser you can cut the MathML code out
of this article and look at it there, as MathML
rather than just text with lots of angle
brackets (and slammed into the left margin), as
seen in this groups' viewer. Looking at the
MathML 'text' itself we see that there is an
annotation included in it. This annotation tells
us (and the computer) that the annotation has
an encoding of the mathematics depicted by
the MathML , encoded using the fast, efficient
numerical processing computer programming
language Fortran 2008 (using the
GCC gFortran system).
C++ bigots may howl, but look at the numerical
processing benchmarks for the various
numerical processing languages. NASA,
Boeing, General Dynamics do not use COBOL,
Java, or Javascript to do their serious
mathematical calculations. That said it might
be ok to use Ecmascript / Javascript to do
the math on a web site if their numerical
processing load is not heavy. Some people
might want to use Python..
The parseType="literal" invocation of processor
for the SVG metadata element section would
allow a relevant (MathML in this case) parser
to be invoked on the MathML metadata in the
emedded section, the OWL / RDF parsing on
the ontology in the same metadata section, and
any other XML namespace metadata that is there.
Looking at the MathML we see that it describes
a mathematical function which takes values of
x and c and calculates the value of y with them.
Y is traditionally the up-down-direction axis in
graphics and hence the height of the bars in the
barchart could be obtained directly from such
calculation. The heights in this instance of SVG
code example are not obtained from this
function. If you have to see the complete code
for this you can see it in a future article which
contains it. By using Javascript animation one
could (using a Javascript encoded version of
the MathML mathematical function) then
program the bars to have heights defined by
the Y value calculated by the math function
depicted.
Using GCC gFortran has some advantages,
one can also include in one's Fortran
program, C code, and Java (GCJ) code
as well. There are built-in provisions for this.
This allows one to re-use nifty
functions / code pre-existing in C and Java
obviating the need for you to
reinvent / rewrite them in Fortran.
Jython, Java implementation of Python.
SAXON, Michael Kay's XSLT2
(extensible) processor is written in Java,
for example. Groovy might be of interest to
some. Gosh what an animal:
Fortran 2008 / SAXON XSLT2 / Groovy
in one executable!
If you have a recent version of Firefox
browser or one that displays MathML
take a look at this MathML code:
<math xmlns="http://www.w3.org/1998/Math/MathML">
<matrix>
<matrixrow>
<cn> 0 </cn> <cn> 1 </cn> <cn> 0 </cn>
</matrixrow>
<matrixrow>
<cn> 0 </cn> <cn> 0 </cn> <cn> 1 </cn>
</matrixrow>
<matrixrow>
<cn> 1 </cn> <cn> 0 </cn> <cn> 0 </cn>
</matrixrow>
</matrix>
</math>
It displays as a mathematical matrix. Math and
Physics students will remember these things
These are the sorts of things (their calculation
results, not their equation display) that make
the more entertaining parts of graphics video
games, like gravitational and mass
calculations.
Plug in those PhysX chips gamers.
Looking at the NASA JPL SWEET ontology
collection (12 ontologies), we see that
elements of the numeric ontology indicate
semantic / meaning concepts that relate to what
the Y value of the MAthML calculation
depict, aka the height of each barchart bar.
In a future article we see a more detailed
explanation of what these ontological connections
are and what it means to connect meaning based
on ontology to both MathML mathematics
(calculations) and SVG graphics displayed
items (like the barchart bars).
<owl:Class rdf:about="#GeometricalObject_1D">
<rdfs:subClassOf
rdf:resource="#GeometricalObject"/>
<rdfs:subClassOf>
<owl:Restriction>
<owl:hasValue rdf:datatype="&xsd;integer">1</owl:hasValue>
<owl:onProperty
rdf:resource="#hasDimension"/>
</owl:Restriction>
</rdfs:subClassOf>
</owl:Class>
<owl:Class rdf:about="#Line">
<rdfs:subClassOf rdf:resource="#Curve"/>
</owl:Class>
<owl:Class rdf:about="#Peak">
<rdfs:subClassOf rdf:resource="#Maximum"/>
</owl:Class>
<owl:Class rdf:about="#Quantity">
<rdfs:subClassOf>
<owl:Class>
<owl:unionOf rdf:parseType="Collection">
<rdf:Description rdf:about="#Scalar"/>
<rdf:Description rdf:about="#Tensor"/>
<rdf:Description
rdf:about="#Vector"/>
</owl:unionOf>
</owl:Class>
</rdfs:subClassOf>
</owl:Class>
URI=NASA.JPL/SWEET <owl:Class rdf:about="#Quantity"> +// \
<owl:unionOf
rdf:parseType="Collection">
<rdf:Description rdf:about="#Scalar"/> \
(See the embedded MathML code in the
SVG metadata element in the SVG above.)
This defines Majestic12 ; a completely
new function by means of definitionURL.
The TEXT (!!my emphasis ) DefMajestic12.htm
, located at definitionURL.
The W3C MathML Spec says " The
target of the definitionURL attribute
on the csymbol element may encode
the definition in any format; the
particular encoding in use is given
by the encoding attribute. ...using
csymbol to define the function, and then
apply to link the function to its arguments."
(The arguments are the variables x, y and c.)
In the continuation of this article we will
see how the (copyrighted) Processing
Connection Service PCS can be used
to logically connect ontologies
and various other types of XML
namespaces (ie SVG ,MathML).