added tutorial SPARQL

lod/tutorial/css/github.css

@@ -0,0 +1,61 @@
+.highlight { padding-top: 0; margin: 0;}
+.highlight .c { color: #999988; font-style: italic } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .k { color: #000000; font-weight: bold } /* Keyword */
+.highlight .o { color: #000000; font-weight: bold } /* Operator */
+.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
+.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .gh { color: #999999 } /* Generic.Heading */
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .s { color: #d01040 } /* Literal.String */
+.highlight .na { color: #008080 } /* Name.Attribute */
+.highlight .nb { color: #0086B3 } /* Name.Builtin */
+.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+.highlight .no { color: #008080 } /* Name.Constant */
+.highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
+.highlight .ni { color: #800080 } /* Name.Entity */
+.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+.highlight .nl { color: #990000; font-weight: bold } /* Name.Label */
+.highlight .nn { color: #555555 } /* Name.Namespace */
+.highlight .nt { color: #000080 } /* Name.Tag */
+.highlight .nv { color: #008080 } /* Name.Variable */
+.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
+.highlight .sb { color: #d01040 } /* Literal.String.Backtick */
+.highlight .sc { color: #d01040 } /* Literal.String.Char */
+.highlight .sd { color: #d01040 } /* Literal.String.Doc */
+.highlight .s2 { color: #d01040 } /* Literal.String.Double */
+.highlight .se { color: #d01040 } /* Literal.String.Escape */
+.highlight .sh { color: #d01040 } /* Literal.String.Heredoc */
+.highlight .si { color: #d01040 } /* Literal.String.Interpol */
+.highlight .sx { color: #d01040 } /* Literal.String.Other */
+.highlight .sr { color: #009926 } /* Literal.String.Regex */
+.highlight .s1 { color: #d01040 } /* Literal.String.Single */
+.highlight .ss { color: #990073 } /* Literal.String.Symbol */
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #008080 } /* Name.Variable.Class */
+.highlight .vg { color: #008080 } /* Name.Variable.Global */
+.highlight .vi { color: #008080 } /* Name.Variable.Instance */
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */

lod/tutorial/css/style.css

@@ -0,0 +1,968 @@
+@media screen {
+
+  body {
+    font-family: 'Quattrocento', Verdana, sans-serif;
+    font-size:16px;
+    background-color:#ffffff;
+  }
+
+  .container {
+    max-width: 48rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+
+/* =============================================================================
+Helper classes
+========================================================================== */
+
+  .noclear {
+    clear:none;
+  }
+
+  .expanded {
+    max-width: 58rem;
+  }
+
+  .garnish {
+    width: 23%;
+    padding:0;
+  }
+
+  .full-width {
+    width:80%;
+    margin: 0 auto;
+    text-align:center;
+  }
+
+  .float-right {
+    float:right;
+    margin-left: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .float-left {
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+  }
+
+
+/* =============================================================================
+Home Page
+========================================================================== */
+
+  .home-block {
+    padding:3rem 0;
+    color:#666;
+  }
+
+  .home-block h2 {
+    margin:0;
+    font-size:2.8rem;
+    color:#333;
+    text-align:center;
+  }
+
+  .home-block p {
+    margin:0rem;
+    font-family:'Open Sans';
+    font-size:1.2rem;
+    padding-top:2rem;
+    text-align:justify;
+  }
+
+  .home-block a:visited {
+    color: #38c;
+  }
+
+  .home-stripe-1 {
+    color:#eee;
+    background:#27b;
+  }
+
+  .home-stripe-1 h2, .home-stripe-2 h2 {
+    color:#fff;
+  }
+
+  .home-stripe-1 a:visited, .home-stripe-1 a:link {
+    color:#6bf;
+  }
+
+  .home-stripe-2 {
+    color:#fff;
+    background:#289;
+  }
+
+  .home-stripe-2 a:visited, .home-stripe-2 a:link {
+    color:#6cd;
+  }
+
+  .home-image {
+    width: 75%;
+  }
+
+  .home-logo img {
+    width: 200px;
+  }
+
+  .home-logo a h1 {
+    color: #fff;
+  }
+
+  .home-logo {
+    color: #fff;
+  }
+
+  .home-logo li {
+    font-size: 1.2rem;
+  }
+
+  .en-back {
+    background-color: #444444;
+  }
+
+  .es-back {
+    background-color: #535D7F;
+  }
+
+  .fr-back {
+    background-color: #3D7C81;
+  }
+  
+  .pt-back {
+    background-color: #d6b664;
+  }
+
+
+  .sitewide-alert {
+    position: relative;
+    margin-bottom: 0;
+  }
+
+/* =============================================================================
+Lesson Headers
+========================================================================== */
+
+  header {
+    margin:-3rem 0 3rem 0;
+    padding:0;
+    font-family:'Roboto', sans-serif;
+    color:#ccc;
+    background: #efefef;
+    border-top:1px solid #333;
+    border-bottom:1px solid #333;
+    text-align:left;
+  }
+
+  header .container-fluid {
+    margin:0;
+    padding:1rem;
+    background: #f5f5f5;
+  }
+
+  header h1 {
+    margin:0;
+    padding:0;
+    font-size:1.8rem;
+    text-align:left;
+  }
+
+  header h2 {
+    font-family:'Roboto', sans-serif;
+    font-size:1.2rem;
+    color:#333;
+    margin: 1.5rem 0 1.5rem 0rem;
+    text-align:left;
+  }
+
+  header h3, header h4 {
+    font: .9rem/1.1rem 'Roboto Condensed', sans-serif;
+    text-transform:uppercase;
+    font-variant:small-caps;
+    letter-spacing:80%;
+    color:#666;
+    margin:.3rem 0 0 0;
+    padding:0;
+  }
+
+  header h4 {
+    display:inline;
+    margin:0;
+    line-height:1.3rem;
+  }
+
+  header .header-image {
+    float:left;
+    border:.2rem solid gray;
+    margin:0;
+    padding:0;
+    max-width: 200px;
+  }
+
+  header .header-abstract {
+    font: 1rem/1.4rem 'Roboto', sans-serif;
+    color:#666;
+    margin:1rem 0;
+  }
+
+  header .header-helpers {
+    clear:both;
+    background:#ccc;
+    color:#fff;
+    border-top:1px solid #999;
+    border-bottom:1px solid #999;
+  }
+
+  header ul {
+    margin:0;
+    padding:0;
+    list-style-type: none;
+  }
+
+  header li, header .metarow {
+    font: .9rem/1.1rem 'Roboto Condensed';
+  }
+
+  header .metarow {
+    color:#999;
+  }
+
+  header .peer-review, header .open-license {
+    font-size: 0.9rem;
+    color: #666;
+    margin: 0;
+  }
+
+/* =============================================================================
+Lessons Index
+========================================================================== */
+
+/*****************
+  FILTER BUTTONS
+******************/
+  ul.filter, ul.sort-by {
+    margin: 0 0 1rem 0;
+    padding: 0px;
+    text-align:center;
+  }
+
+  li.filter,
+  li.sort,
+  #filter-none {
+    font: .9rem/1.1rem 'Open Sans', sans-serif;
+    padding: .4rem .6rem;
+    border:none;
+    border-radius: 3px;
+    display:inline-block;
+    text-transform:uppercase;
+    text-decoration: none;
+  }
+
+  .filter li:hover,
+  .sort-by li:hover,
+  #filter-none:hover {
+    cursor: pointer;
+  }
+
+  .activities li.current:hover,
+  .filter li.current:hover,
+  .sort-by li.current:hover {
+    cursor:default;
+  }
+
+  .topic li a {
+    text-decoration: none;
+  }
+
+  .activities li {
+    background-color:#38c;
+    color:#fff;
+  }
+
+  .activities li:hover {
+    background-color:#16a;
+  }
+
+  .activities li.current {
+    background-color:#059;
+  }
+
+  .topics li {
+    background-color:#eee;
+    color: #38a;
+  }
+
+  .topics li:hover {
+    background-color:#ccc;
+  }
+
+  .topics li.current {
+    background-color:#aaa;
+    color: #333;
+  }
+
+
+  #filter-none {
+    width:99.5%;
+    clear:both;
+    text-align:center;
+    margin-bottom:1rem;
+    background-color:#fefefe;
+    color:#666;
+    border:1px solid #999;
+  }
+
+  #filter-none:hover {
+    background-color:#ededed;
+  }
+
+  /*****************
+    SEARCH
+  *****************/
+
+  .search-input {
+    width:55%;
+    clear:both;
+    margin-bottom:1rem;
+    background-color:#fefefe;
+    color:#666;
+    border:1px solid #999;
+    font: .9rem/1.1rem 'Open Sans',
+    sans-serif;
+    padding: .4rem .6rem;
+    border-radius: 3px;
+    display:inline-block;
+    text-transform:uppercase;
+    text-decoration: none;
+  }
+
+  #search-button,
+  #enable-search-button {
+    background-color: #efefef;
+    color: rgb(153, 143, 143);
+    width: 35%;
+    font: .9rem/1.1rem 'Open Sans',
+    sans-serif;
+    padding: .4rem .6rem;
+    border: none;
+    border-radius: 3px;
+    display: inline-block;
+    text-transform: uppercase;
+    text-decoration: none;
+  }
+
+  @media only screen and (max-width: 767px) {
+    /* phones */
+    #search-button,
+    #enable-search-button {
+      width: 80%;
+    }
+  }
+
+
+  #search-info-button {
+    padding: 0.5rem;
+    color: rgb(153, 143, 143);
+  }
+
+  #search-info {
+    display: none;
+    height:0px;
+    background:#efefef;
+    overflow:hidden;
+    transition:0.5s;
+    -webkit-transition:0.5s;
+    width: 100%;
+    text-align: left;
+    box-sizing: border-box;
+  }
+
+  #search-info.visible {
+    display: block;
+    height: fit-content;
+    height: -moz-max-content;
+    padding: 10px;
+    margin-top: 10px;
+  }
+
+  /*****************
+    SORT BUTTONS
+  *****************/
+
+  li.sort {
+    background-color: #efefef;
+    color:#666;
+    width:49.5%;
+  }
+
+  li.sort:hover {
+    text-decoration: none;
+    background-color:#cecece;
+  }
+
+  #current-sort {
+    font-size:75%;
+  }
+
+  .sort.my-desc:after, .sort-desc:after {
+    width: 0;
+    height: 0;
+    border-left: .4rem solid transparent;
+    border-right: .4rem solid transparent;
+    border-top: .4rem solid;
+    content:"";
+    position: relative;
+    top:.75rem;
+    right:-.3rem;
+  }
+
+  .sort.my-asc:after, .sort-asc:after {
+    width: 0;
+    height: 0;
+    border-left: .4rem solid transparent;
+    border-right: .4rem solid transparent;
+    border-bottom: .4rem solid;
+    content:"";
+    position: relative;
+    bottom:.75rem;
+    right:-.3rem;
+  }
+
+  .sort-desc:after {
+    top:1rem;
+  }
+
+  .sort-asc:after {
+    bottom:1rem;
+  }
+
+  /*****************************
+    LESSON INDEX RESULTS LIST
+  *****************************/
+
+   h2.results-title {
+     margin:1rem 0;
+     font: 1.6rem/2rem 'Roboto Condensed';
+     color:#666;
+     text-transform:uppercase;
+   }
+
+   #results-value {
+     color:#000;
+   }
+
+
+  #lesson-list .list ul {
+    margin:0;
+    padding:0;
+  }
+
+  #lesson-list .list li {
+    list-style-type:none;
+    margin:0;
+  }
+
+
+  .lesson-description {
+    margin-bottom:2rem;
+    padding:0rem;
+    min-height:120px;
+    text-align:left;
+  }
+
+  .lesson-description img {
+      width:100%;
+  }
+
+  .lesson-image {
+    width:120px;
+    float:left;
+    margin-right:1rem;
+  }
+
+  .above-title {
+    margin:0 0 .2rem 0;
+    font: .8rem/1rem 'Roboto Condensed';
+    color:#999;
+    text-transform:uppercase;
+    clear:none;
+  }
+
+  .lesson-description h2.title {
+    font: 1.2rem/1.3rem 'Crete Round', serif;
+    margin:0 0 .8rem 0;
+    clear:none;
+  }
+
+  .list .date,
+  .lesson-description .activity,
+  .lesson-description .topics,
+  .lesson-description .difficulty {
+    display: none;
+  }
+
+  #pre-loader {
+    visibility: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    transition: opacity 0.3s linear;
+    background: rgba(211, 211, 211, 0.8);
+  }
+/* =============================================================================
+Top Navigation Bar
+========================================================================== */
+
+  .navbar {
+    padding: .6rem 1rem;
+    margin: 0 0 3rem 0;
+  }
+
+  .navbar-dark .navbar-nav .nav-link {
+    font-family:'Open Sans';
+    text-transform:uppercase;
+    color:#fff;
+    font-size:.9rem;
+  }
+
+  .btn-group > .btn-secondary {
+    border-color: #333333;
+    background-color: #888888;
+  }
+
+  .lang {
+    text-transform:lowercase !important;
+  }
+
+  .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-brand:hover {
+    color:#39a;
+  }
+
+  .navbar-toggler-icon {
+        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
+  }
+
+  .navbar-collapse {
+    text-align:center;
+  }
+
+  .navbar-dark .navbar-brand {
+    font-family:'Crete Round', serif;
+    color:#fff;
+    letter-spacing: .02em;
+  }
+
+  .btn-group > a.btn {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  a.dropdown-item {
+    border-bottom:1px solid #ccc;
+    font-family:'Roboto';
+  }
+
+  .dropdown-menu {
+  	position: absolute;
+  	background: #fff;
+  	border: 1px solid #ccc;
+    margin:0;
+    padding:0;
+  }
+
+  .dropdown-menu a {
+  	font-size:.8rem;
+    line-height:2rem;
+    text-transform:uppercase;
+  }
+
+  .dropdown-menu a:last-child {
+    border-bottom:none;
+  }
+
+  .dropdown-menu:after, .dropdown-menu:before {
+  	bottom: 100%;
+  	left: 20%;
+  	border: solid transparent;
+  	content: " ";
+  	height: 0;
+  	width: 0;
+  	position: absolute;
+  	pointer-events: none;
+  }
+
+  .dropdown-menu:after {
+  	border-color: rgba(255, 255, 255, 0);
+  	border-bottom-color: #fff;
+  	border-width: 12px;
+  	margin-left: -12px;
+  }
+  .dropdown-menu:before {
+  	border-color: rgba(51, 153, 170, 0);
+  	border-bottom-color: #ccc;
+  	border-width: 13px;
+  	margin-left: -13px;
+  }
+
+  .navbar-dark .navbar-nav .nav-link:focus {
+    color: #ccc;
+  }
+
+  .header-link {
+    position: absolute;
+    right: 0.6em;
+    opacity: 0;
+    -webkit-transition: opacity 0.2s ease-in-out 0.1s;
+    -moz-transition: opacity 0.2s ease-in-out 0.1s;
+    -ms-transition: opacity 0.2s ease-in-out 0.1s;
+  }
+
+  h2:hover .header-link,
+  h3:hover .header-link,
+  h4:hover .header-link,
+  h5:hover .header-link,
+  h6:hover .header-link {
+    opacity: 1;
+  }
+
+/* =============================================================================
+Lesson Typography
+========================================================================== */
+
+  a {text-decoration:none;}
+
+  a:link {color: #38c;}
+  a:visited {color: #39a;}
+  a:hover {color: #555;}
+  a:active {color: #555;}
+
+  b, strong { font-weight: bold; }
+
+  blockquote { margin: 1em 2em; padding: 0 1em 0 1em; font-style: italic; border:1px solid #666; background: #eeeeee;}
+
+  hr {
+    display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 2em 0; padding: 0; }
+
+  img {
+    max-width:100%;
+  }
+
+  ins { background: #ff9; color: #000; text-decoration: none; }
+
+
+  h1,h2,h3,h4,h5 {
+    font-family:'Crete Round', serif;
+    font-weight:normal;
+    clear:both;
+  }
+
+
+  h1 {
+    font-size:2rem;
+    margin-bottom:1.5rem;
+    letter-spacing:-.03rem;
+    text-align:center;
+  }
+
+  h2 {
+    font-size:1.6rem;
+    margin-top:3rem;
+    letter-spacing:-.02rem;
+  }
+
+  h3 {
+    font-size:1.4rem;
+    margin-top:2.5rem;
+  }
+
+  h4 {
+    font-size:1.2rem;
+    margin-top:1.8rem;
+  }
+
+  h5 {
+    font-size:1.0rem;
+    margin-top:1.4rem;
+  }
+
+  h1 a, h2 a, h3 a, h4 a, h5 a {
+    text-decoration:none;
+  }
+
+  h1 a:link { color: #38c; }
+  h1 a:visited {color: #39a; }
+
+
+  /* select button generated by codeblocks.js */
+  .fa-align-left {opacity: 0.2;}
+  .highlight:hover .fa-align-left {opacity: 1;}
+
+  q { quotes: none; }
+  q:before, q:after { content: ""; content: none; }
+
+  small { font-size: 85%; }
+
+  /* Position subscript and superscript content without affecting line-height: h5bp.com/k */
+  sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+  sup { top: -0.5em; }
+  sub { bottom: -0.25em; }
+
+  li {
+    margin-bottom:.5rem;
+    line-height:1.4rem;
+  }
+
+  li.nav-item {
+    margin-bottom:0;
+  }
+
+  .alert {
+    font-family: 'Roboto';
+  }
+
+  .alert h2, .alert h3, .alert h4 {
+    margin-top:0;
+  }
+
+
+/* =============================================================================
+Code Highlighting
+========================================================================== */
+
+  code {
+    font-family: monospace, serif;
+    font-size:.9rem;
+  }
+
+  .highlight {
+    margin: 1rem 0 1rem 0;
+    padding:.5rem .2rem;
+    font-size:.9rem;
+    white-space: pre;
+    word-wrap: normal;
+    overflow: auto;
+    border: 1px solid #eee;
+    background: #fafafa;
+  }
+
+
+/* =============================================================================
+Figures
+========================================================================== */
+
+  figure {
+    margin: 0 auto .5rem;
+    text-align: center;
+    display:table;
+  }
+
+  figcaption {
+    margin-top:.5rem;
+    font-family:'Open Sans';
+    font-size:0.8em;
+    color: #666;
+    display:block;
+    caption-side: bottom;
+  }
+
+  .author-info, .citation-info {
+    border-top:1px solid #333;
+    padding-top:1rem;
+    margin-top:2rem;
+  }
+
+  .author-name, .suggested-citation-header {
+    font-family:'Roboto Condensed';
+    font-weight: 600;
+    font-size:1.2rem;
+    color: #666;
+    text-transform:uppercase;
+  }
+
+  .author-description p, .suggested-citation-text p {
+    font-size:0.9rem;
+    font-family:'Open Sans';
+    color: #666;
+  }
+
+  /* =============================================================================
+  Tables
+  ========================================================================== */
+
+  table {
+    width: 100%;
+    margin-bottom: 1em;
+  }
+
+  th, td {
+    padding: 10px;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+  }
+
+  thead {
+    background-color: #535353;
+    color: #fff;
+    font-weight: bold;
+  }
+
+  tr:nth-child(even) {background-color: #f2f2f2}
+
+/* =============================================================================
+Blog Index and Layout
+========================================================================== */
+
+  .blog-header {
+    text-align:center;
+  }
+
+  .blog-header h2 {
+    margin:0;
+    line-height: 2rem;
+  }
+
+  .blog-header h3 { /*author*/
+    margin-top:.4rem;
+    color: #666;
+    font-size:1rem;
+  }
+
+  .blog-header h4{
+    color: #999;
+    font-size:1rem;
+    margin-bottom:.2rem;
+    font-family:'Roboto Condensed';
+    text-transform:uppercase;
+  }
+
+  .blog-header figure {
+    max-width:80%;
+  }
+
+  .blog-header figcaption {
+    text-align: center;
+  }
+
+  .blog-page-header {
+    margin-bottom:3rem;
+  }
+
+/* =============================================================================
+Project Team
+========================================================================== */
+
+  .contact-box {
+    margin-bottom:3rem;
+  }
+
+/* =============================================================================
+Footer
+========================================================================== */
+
+  footer[role="contentinfo"] {
+    margin-top: 2rem;
+    padding: 2rem 0;
+    font-family:'Open Sans';
+    font-size:.9rem;
+    color: #fff;
+    background-color:#666;
+    text-align:center;
+  }
+
+  footer a, footer a:link, footer a:visited {
+    color: #fff;
+    border-bottom:1px #eee dotted;
+  }
+
+  footer a:hover {
+    text-decoration: none;
+    border-bottom:1px #fff solid;
+  }
+
+  footer .fa {
+    margin: 0 .2rem 0rem 0rem;
+  }
+
+  .footer-head {
+    font-size:1.1rem;
+    line-height:1.4rem;
+    margin-bottom:1rem;
+  }
+
+
+} /* end screen */
+
+@media only screen and (max-width: 768px) {
+  .garnish {
+    display:none;
+  }
+  .dropdown-menu:after, .dropdown-menu:before {
+    display:none;
+  }
+}
+
+/* Print Styling */
+
+@media screen {
+  /* Class to hide elements only shown when printing */
+  .hide-print {
+    display: none !important;
+  }
+}
+
+@media print {
+  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
+  a, a:visited { text-decoration: underline; }
+  a[href]:after { content: " (" attr(href) ")"; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
+  pre, blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+    margin: 0.5cm;
+    padding: 0.5cm
+  }
+  thead { display: table-header-group; } /* h5bp.com/t */
+  tr, img { page-break-inside: avoid; }
+  img { max-width: 100% !important; }
+  @page {
+    margin: 1.5cm;
+  }
+
+  body { font-size: 0.85rem;}
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h1, h2, h3 { page-break-after: avoid; }
+  h1 { font-size: 1.4rem; }
+  h2 { font-size: 1.1rem; }
+  h3 { font-size: 1rem; }
+  h4 { font-size: 0.9rem; }
+  .header-bottom {
+    margin-bottom: 2rem;
+    page-break-after: always;
+  }
+  .hide-screen {
+    /* Hide elements that only appear on screen */
+    display: none !important;
+  }
+
+  .print-header {
+    /* format navbar for print */
+    display: block;
+    z-index:1030;
+    width: 100%;
+    height: 3rem;
+    padding: .6rem 1rem;
+    margin-bottom: 1rem;
+    color:#fff;
+    white-space: nowrap;
+    font-family: 'Crete Round', serif;
+    border-bottom: 1px solid lightgrey;
+  }
+}

lod/tutorial/images/ORCIDiD_iconvector.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 256 256" style="enable-background:new 0 0 256 256;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#A6CE39;}
+	.st1{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M256,128c0,70.7-57.3,128-128,128C57.3,256,0,198.7,0,128C0,57.3,57.3,0,128,0C198.7,0,256,57.3,256,128z"/>
+<g>
+	<path class="st1" d="M86.3,186.2H70.9V79.1h15.4v48.4V186.2z"/>
+	<path class="st1" d="M108.9,79.1h41.6c39.6,0,57,28.3,57,53.6c0,27.5-21.5,53.6-56.8,53.6h-41.8V79.1z M124.3,172.4h24.5
+		c34.9,0,42.9-26.5,42.9-39.7c0-21.5-13.7-39.7-43.7-39.7h-23.7V172.4z"/>
+	<path class="st1" d="M88.7,56.8c0,5.5-4.5,10.1-10.1,10.1c-5.6,0-10.1-4.6-10.1-10.1c0-5.6,4.5-10.1,10.1-10.1
+		C84.2,46.7,88.7,51.3,88.7,56.8z"/>
+</g>
+</svg>

lod/tutorial/images/graph-databases-and-SPARQL/sparql01-1.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Generated by graphviz version 2.38.0 (20140413.2041)
+ -->
+<!-- Title: %3 Pages: 1 -->
+<svg width="262pt" height="124pt"
+ viewBox="0.00 0.00 261.53 124.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 120)">
+<title>%3</title>
+<polygon fill="white" stroke="none" points="-4,4 -4,-120 257.533,-120 257.533,4 -4,4"/>
+<!-- nw -->
+<g id="node1" class="node"><title>nw</title>
+<ellipse fill="none" stroke="gray" cx="49.3505" cy="-98" rx="49.2014" ry="18"/>
+<text text-anchor="middle" x="49.3505" y="-95" font-family="Helvetica,sans-Serif" font-size="10.00">The Nightwatch</text>
+</g>
+<!-- oil -->
+<g id="node3" class="node"><title>oil</title>
+<ellipse fill="none" stroke="gray" cx="117.35" cy="-18" rx="42.8742" ry="18"/>
+<text text-anchor="middle" x="117.35" y="-15" font-family="Helvetica,sans-Serif" font-size="10.00">oil on canvas</text>
+</g>
+<!-- nw&#45;&gt;oil -->
+<g id="edge1" class="edge"><title>nw&#45;&gt;oil</title>
+<path fill="none" stroke="gray" d="M63.7715,-80.4582C73.3018,-69.5265 85.9453,-55.0236 96.5567,-42.8517"/>
+<polygon fill="gray" stroke="gray" points="99.2502,-45.0882 103.183,-35.2505 93.9738,-40.4882 99.2502,-45.0882"/>
+<text text-anchor="middle" x="108.138" y="-55.6" font-family="Helvetica,sans-Serif" font-size="8.00">has medium</text>
+</g>
+<!-- wb -->
+<g id="node2" class="node"><title>wb</title>
+<ellipse fill="none" stroke="gray" cx="185.35" cy="-98" rx="68.3645" ry="18"/>
+<text text-anchor="middle" x="185.35" y="-95" font-family="Helvetica,sans-Serif" font-size="10.00">Woman with a Balance</text>
+</g>
+<!-- wb&#45;&gt;oil -->
+<g id="edge2" class="edge"><title>wb&#45;&gt;oil</title>
+<path fill="none" stroke="gray" d="M170.595,-80.0752C161.138,-69.2266 148.718,-54.9801 138.252,-42.9755"/>
+<polygon fill="gray" stroke="gray" points="140.589,-40.3299 131.38,-35.0922 135.313,-44.9299 140.589,-40.3299"/>
+<text text-anchor="middle" x="176.138" y="-55.6" font-family="Helvetica,sans-Serif" font-size="8.00">has medium</text>
+</g>
+</g>
+</svg>

lod/tutorial/images/graph-databases-and-SPARQL/sparql01.svg

@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Generated by graphviz version 2.38.0 (20140413.2041)
+ -->
+<!-- Title: %3 Pages: 1 -->
+<svg width="438pt" height="212pt"
+ viewBox="0.00 0.00 437.70 212.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 208)">
+<title>%3</title>
+<polygon fill="white" stroke="none" points="-4,4 -4,-208 433.703,-208 433.703,4 -4,4"/>
+<!-- nw -->
+<g id="node1" class="node"><title>nw</title>
+<ellipse fill="none" stroke="gray" cx="132" cy="-186" rx="49.2014" ry="18"/>
+<text text-anchor="middle" x="132" y="-183" font-family="Helvetica,sans-Serif" font-size="10.00">The Nightwatch</text>
+</g>
+<!-- rr -->
+<g id="node2" class="node"><title>rr</title>
+<ellipse fill="none" stroke="gray" cx="132" cy="-98" rx="60.0217" ry="18"/>
+<text text-anchor="middle" x="132" y="-95" font-family="Helvetica,sans-Serif" font-size="10.00">Rembrandt van Rijn</text>
+</g>
+<!-- nw&#45;&gt;rr -->
+<g id="edge1" class="edge"><title>nw&#45;&gt;rr</title>
+<path fill="none" stroke="gray" d="M132,-167.597C132,-155.746 132,-139.817 132,-126.292"/>
+<polygon fill="gray" stroke="gray" points="135.5,-126.084 132,-116.084 128.5,-126.084 135.5,-126.084"/>
+<text text-anchor="middle" x="150.678" y="-143.6" font-family="Helvetica,sans-Serif" font-size="8.00">was</text>
+<text text-anchor="middle" x="150.678" y="-135.6" font-family="Helvetica,sans-Serif" font-size="8.00">created by</text>
+</g>
+<!-- oil -->
+<g id="node5" class="node"><title>oil</title>
+<ellipse fill="none" stroke="gray" cx="253" cy="-98" rx="42.8742" ry="18"/>
+<text text-anchor="middle" x="253" y="-95" font-family="Helvetica,sans-Serif" font-size="10.00">oil on canvas</text>
+</g>
+<!-- nw&#45;&gt;oil -->
+<g id="edge3" class="edge"><title>nw&#45;&gt;oil</title>
+<path fill="none" stroke="gray" d="M153.632,-169.625C173.196,-155.72 202.162,-135.133 223.779,-119.768"/>
+<polygon fill="gray" stroke="gray" points="225.837,-122.6 231.96,-113.954 221.781,-116.894 225.837,-122.6"/>
+<text text-anchor="middle" x="225.787" y="-139.6" font-family="Helvetica,sans-Serif" font-size="8.00">has medium</text>
+</g>
+<!-- nwd -->
+<g id="node7" class="node"><title>nwd</title>
+<ellipse fill="none" stroke="gray" cx="27" cy="-98" rx="27" ry="18"/>
+<text text-anchor="middle" x="27" y="-95" font-family="Helvetica,sans-Serif" font-size="10.00">1642</text>
+</g>
+<!-- nw&#45;&gt;nwd -->
+<g id="edge2" class="edge"><title>nw&#45;&gt;nwd</title>
+<path fill="none" stroke="gray" d="M112.741,-169.226C95.413,-155.034 69.877,-134.118 51.1799,-118.804"/>
+<polygon fill="gray" stroke="gray" points="53.3315,-116.043 43.3774,-112.414 48.896,-121.458 53.3315,-116.043"/>
+<text text-anchor="middle" x="106.566" y="-143.6" font-family="Helvetica,sans-Serif" font-size="8.00">was</text>
+<text text-anchor="middle" x="106.566" y="-135.6" font-family="Helvetica,sans-Serif" font-size="8.00">created in</text>
+</g>
+<!-- d -->
+<g id="node6" class="node"><title>d</title>
+<ellipse fill="none" stroke="gray" cx="263" cy="-18" rx="27" ry="18"/>
+<text text-anchor="middle" x="263" y="-15" font-family="Helvetica,sans-Serif" font-size="10.00">Dutch</text>
+</g>
+<!-- rr&#45;&gt;d -->
+<g id="edge5" class="edge"><title>rr&#45;&gt;d</title>
+<path fill="none" stroke="gray" d="M157.881,-81.5897C180.033,-68.4005 211.867,-49.4456 234.691,-35.8559"/>
+<polygon fill="gray" stroke="gray" points="236.761,-38.6968 243.563,-30.5735 233.18,-32.6822 236.761,-38.6968"/>
+<text text-anchor="middle" x="227.572" y="-55.6" font-family="Helvetica,sans-Serif" font-size="8.00">has nationality</text>
+</g>
+<!-- rrb -->
+<g id="node8" class="node"><title>rrb</title>
+<ellipse fill="none" stroke="gray" cx="132" cy="-18" rx="27" ry="18"/>
+<text text-anchor="middle" x="132" y="-15" font-family="Helvetica,sans-Serif" font-size="10.00">1606</text>
+</g>
+<!-- rr&#45;&gt;rrb -->
+<g id="edge4" class="edge"><title>rr&#45;&gt;rrb</title>
+<path fill="none" stroke="gray" d="M132,-79.6893C132,-69.8938 132,-57.4218 132,-46.335"/>
+<polygon fill="gray" stroke="gray" points="135.5,-46.2623 132,-36.2623 128.5,-46.2624 135.5,-46.2623"/>
+<text text-anchor="middle" x="152.455" y="-55.6" font-family="Helvetica,sans-Serif" font-size="8.00">was born in</text>
+</g>
+<!-- jv -->
+<g id="node3" class="node"><title>jv</title>
+<ellipse fill="none" stroke="gray" cx="372" cy="-98" rx="57.9076" ry="18"/>
+<text text-anchor="middle" x="372" y="-95" font-family="Helvetica,sans-Serif" font-size="10.00">Johannes Vermeer</text>
+</g>
+<!-- jv&#45;&gt;d -->
+<g id="edge6" class="edge"><title>jv&#45;&gt;d</title>
+<path fill="none" stroke="gray" d="M349.942,-81.2155C332.328,-68.6108 307.605,-50.9191 289.023,-37.6222"/>
+<polygon fill="gray" stroke="gray" points="290.879,-34.6462 280.71,-31.673 286.805,-40.3388 290.879,-34.6462"/>
+<text text-anchor="middle" x="345.572" y="-55.6" font-family="Helvetica,sans-Serif" font-size="8.00">has nationality</text>
+</g>
+<!-- wb -->
+<g id="node4" class="node"><title>wb</title>
+<ellipse fill="none" stroke="gray" cx="277" cy="-186" rx="68.3645" ry="18"/>
+<text text-anchor="middle" x="277" y="-183" font-family="Helvetica,sans-Serif" font-size="10.00">Woman with a Balance</text>
+</g>
+<!-- wb&#45;&gt;jv -->
+<g id="edge7" class="edge"><title>wb&#45;&gt;jv</title>
+<path fill="none" stroke="gray" d="M295.278,-168.646C301.824,-162.776 309.251,-156.101 316,-150 325.983,-140.975 336.934,-131.015 346.484,-122.31"/>
+<polygon fill="gray" stroke="gray" points="349.095,-124.666 354.124,-115.341 344.377,-119.494 349.095,-124.666"/>
+<text text-anchor="middle" x="350.678" y="-143.6" font-family="Helvetica,sans-Serif" font-size="8.00">was</text>
+<text text-anchor="middle" x="350.678" y="-135.6" font-family="Helvetica,sans-Serif" font-size="8.00">created by</text>
+</g>
+<!-- wb&#45;&gt;oil -->
+<g id="edge8" class="edge"><title>wb&#45;&gt;oil</title>
+<path fill="none" stroke="gray" d="M272.258,-168.009C268.905,-155.995 264.342,-139.641 260.498,-125.869"/>
+<polygon fill="gray" stroke="gray" points="263.791,-124.647 257.732,-115.956 257.049,-126.528 263.791,-124.647"/>
+<text text-anchor="middle" x="289.787" y="-139.6" font-family="Helvetica,sans-Serif" font-size="8.00">has medium</text>
+</g>
+</g>
+</svg>

lod/tutorial/images/graph-databases-and-SPARQL/sparql02-1.svg

@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Generated by graphviz version 2.38.0 (20140413.2041)
+ -->
+<!-- Title: %3 Pages: 1 -->
+<svg width="438pt" height="212pt"
+ viewBox="0.00 0.00 437.70 212.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 208)">
+<title>%3</title>
+<polygon fill="white" stroke="none" points="-4,4 -4,-208 433.703,-208 433.703,4 -4,4"/>
+<!-- nw -->
+<g id="node1" class="node"><title>nw</title>
+<ellipse fill="none" stroke="red" cx="132" cy="-186" rx="49.2014" ry="18"/>
+<text text-anchor="middle" x="132" y="-183" font-family="Helvetica,sans-Serif" font-size="10.00">The Nightwatch</text>
+</g>
+<!-- rr -->
+<g id="node2" class="node"><title>rr</title>
+<ellipse fill="none" stroke="red" cx="132" cy="-98" rx="60.0217" ry="18"/>
+<text text-anchor="middle" x="132" y="-95" font-family="Helvetica,sans-Serif" font-size="10.00">Rembrandt van Rijn</text>
+</g>
+<!-- nw&#45;&gt;rr -->
+<g id="edge1" class="edge"><title>nw&#45;&gt;rr</title>
+<path fill="none" stroke="orange" d="M132,-167.597C132,-155.746 132,-139.817 132,-126.292"/>
+<polygon fill="orange" stroke="orange" points="135.5,-126.084 132,-116.084 128.5,-126.084 135.5,-126.084"/>
+<text text-anchor="middle" x="150.678" y="-143.6" font-family="Helvetica,sans-Serif" font-size="8.00">was</text>
+<text text-anchor="middle" x="150.678" y="-135.6" font-family="Helvetica,sans-Serif" font-size="8.00">created by</text>
+</g>
+<!-- oil -->
+<g id="node5" class="node"><title>oil</title>
+<ellipse fill="none" stroke="gray" cx="253" cy="-98" rx="42.8742" ry="18"/>
+<text text-anchor="middle" x="253" y="-95" font-family="Helvetica,sans-Serif" font-size="10.00">oil on canvas</text>
+</g>
+<!-- nw&#45;&gt;oil -->
+<g id="edge3" class="edge"><title>nw&#45;&gt;oil</title>
+<path fill="none" stroke="gray" d="M153.632,-169.625C173.196,-155.72 202.162,-135.133 223.779,-119.768"/>
+<polygon fill="gray" stroke="gray" points="225.837,-122.6 231.96,-113.954 221.781,-116.894 225.837,-122.6"/>
+<text text-anchor="middle" x="225.787" y="-139.6" font-family="Helvetica,sans-Serif" font-size="8.00">has medium</text>
+</g>
+<!-- nwd -->
+<g id="node7" class="node"><title>nwd</title>
+<ellipse fill="none" stroke="gray" cx="27" cy="-98" rx="27" ry="18"/>
+<text text-anchor="middle" x="27" y="-95" font-family="Helvetica,sans-Serif" font-size="10.00">1642</text>
+</g>
+<!-- nw&#45;&gt;nwd -->
+<g id="edge2" class="edge"><title>nw&#45;&gt;nwd</title>
+<path fill="none" stroke="gray" d="M112.741,-169.226C95.413,-155.034 69.877,-134.118 51.1799,-118.804"/>
+<polygon fill="gray" stroke="gray" points="53.3315,-116.043 43.3774,-112.414 48.896,-121.458 53.3315,-116.043"/>
+<text text-anchor="middle" x="106.566" y="-143.6" font-family="Helvetica,sans-Serif" font-size="8.00">was</text>
+<text text-anchor="middle" x="106.566" y="-135.6" font-family="Helvetica,sans-Serif" font-size="8.00">created in</text>
+</g>
+<!-- d -->
+<g id="node6" class="node"><title>d</title>
+<ellipse fill="none" stroke="orange" cx="263" cy="-18" rx="27" ry="18"/>
+<text text-anchor="middle" x="263" y="-15" font-family="Helvetica,sans-Serif" font-size="10.00">Dutch</text>
+</g>
+<!-- rr&#45;&gt;d -->
+<g id="edge5" class="edge"><title>rr&#45;&gt;d</title>
+<path fill="none" stroke="orange" d="M157.881,-81.5897C180.033,-68.4005 211.867,-49.4456 234.691,-35.8559"/>
+<polygon fill="orange" stroke="orange" points="236.761,-38.6968 243.563,-30.5735 233.18,-32.6822 236.761,-38.6968"/>
+<text text-anchor="middle" x="227.572" y="-55.6" font-family="Helvetica,sans-Serif" font-size="8.00">has nationality</text>
+</g>
+<!-- rrb -->
+<g id="node8" class="node"><title>rrb</title>
+<ellipse fill="none" stroke="gray" cx="132" cy="-18" rx="27" ry="18"/>
+<text text-anchor="middle" x="132" y="-15" font-family="Helvetica,sans-Serif" font-size="10.00">1606</text>
+</g>
+<!-- rr&#45;&gt;rrb -->
+<g id="edge4" class="edge"><title>rr&#45;&gt;rrb</title>
+<path fill="none" stroke="gray" d="M132,-79.6893C132,-69.8938 132,-57.4218 132,-46.335"/>
+<polygon fill="gray" stroke="gray" points="135.5,-46.2623 132,-36.2623 128.5,-46.2624 135.5,-46.2623"/>
+<text text-anchor="middle" x="152.455" y="-55.6" font-family="Helvetica,sans-Serif" font-size="8.00">was born in</text>
+</g>
+<!-- jv -->
+<g id="node3" class="node"><title>jv</title>
+<ellipse fill="none" stroke="red" cx="372" cy="-98" rx="57.9076" ry="18"/>
+<text text-anchor="middle" x="372" y="-95" font-family="Helvetica,sans-Serif" font-size="10.00">Johannes Vermeer</text>
+</g>
+<!-- jv&#45;&gt;d -->
+<g id="edge6" class="edge"><title>jv&#45;&gt;d</title>
+<path fill="none" stroke="orange" d="M349.942,-81.2155C332.328,-68.6108 307.605,-50.9191 289.023,-37.6222"/>
+<polygon fill="orange" stroke="orange" points="290.879,-34.6462 280.71,-31.673 286.805,-40.3388 290.879,-34.6462"/>
+<text text-anchor="middle" x="345.572" y="-55.6" font-family="Helvetica,sans-Serif" font-size="8.00">has nationality</text>
+</g>
+<!-- wb -->
+<g id="node4" class="node"><title>wb</title>
+<ellipse fill="none" stroke="red" cx="277" cy="-186" rx="68.3645" ry="18"/>
+<text text-anchor="middle" x="277" y="-183" font-family="Helvetica,sans-Serif" font-size="10.00">Woman with a Balance</text>
+</g>
+<!-- wb&#45;&gt;jv -->
+<g id="edge7" class="edge"><title>wb&#45;&gt;jv</title>
+<path fill="none" stroke="orange" d="M295.278,-168.646C301.824,-162.776 309.251,-156.101 316,-150 325.983,-140.975 336.934,-131.015 346.484,-122.31"/>
+<polygon fill="orange" stroke="orange" points="349.095,-124.666 354.124,-115.341 344.377,-119.494 349.095,-124.666"/>
+<text text-anchor="middle" x="350.678" y="-143.6" font-family="Helvetica,sans-Serif" font-size="8.00">was</text>
+<text text-anchor="middle" x="350.678" y="-135.6" font-family="Helvetica,sans-Serif" font-size="8.00">created by</text>
+</g>
+<!-- wb&#45;&gt;oil -->
+<g id="edge8" class="edge"><title>wb&#45;&gt;oil</title>
+<path fill="none" stroke="gray" d="M272.258,-168.009C268.905,-155.995 264.342,-139.641 260.498,-125.869"/>
+<polygon fill="gray" stroke="gray" points="263.791,-124.647 257.732,-115.956 257.049,-126.528 263.791,-124.647"/>
+<text text-anchor="middle" x="289.787" y="-139.6" font-family="Helvetica,sans-Serif" font-size="8.00">has medium</text>
+</g>
+</g>
+</svg>

lod/tutorial/images/graph-databases-and-SPARQL/sparql02.svg

@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Generated by graphviz version 2.38.0 (20140413.2041)
+ -->
+<!-- Title: %3 Pages: 1 -->
+<svg width="438pt" height="212pt"
+ viewBox="0.00 0.00 437.70 212.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 208)">
+<title>%3</title>
+<polygon fill="white" stroke="none" points="-4,4 -4,-208 433.703,-208 433.703,4 -4,4"/>
+<!-- nw -->
+<g id="node1" class="node"><title>nw</title>
+<ellipse fill="none" stroke="red" cx="132" cy="-186" rx="49.2014" ry="18"/>
+<text text-anchor="middle" x="132" y="-183" font-family="Helvetica,sans-Serif" font-size="10.00">The Nightwatch</text>
+</g>
+<!-- rr -->
+<g id="node2" class="node"><title>rr</title>
+<ellipse fill="none" stroke="gray" cx="132" cy="-98" rx="60.0217" ry="18"/>
+<text text-anchor="middle" x="132" y="-95" font-family="Helvetica,sans-Serif" font-size="10.00">Rembrandt van Rijn</text>
+</g>
+<!-- nw&#45;&gt;rr -->
+<g id="edge1" class="edge"><title>nw&#45;&gt;rr</title>
+<path fill="none" stroke="gray" d="M132,-167.597C132,-155.746 132,-139.817 132,-126.292"/>
+<polygon fill="gray" stroke="gray" points="135.5,-126.084 132,-116.084 128.5,-126.084 135.5,-126.084"/>
+<text text-anchor="middle" x="150.678" y="-143.6" font-family="Helvetica,sans-Serif" font-size="8.00">was</text>
+<text text-anchor="middle" x="150.678" y="-135.6" font-family="Helvetica,sans-Serif" font-size="8.00">created by</text>
+</g>
+<!-- oil -->
+<g id="node5" class="node"><title>oil</title>
+<ellipse fill="none" stroke="orange" cx="253" cy="-98" rx="42.8742" ry="18"/>
+<text text-anchor="middle" x="253" y="-95" font-family="Helvetica,sans-Serif" font-size="10.00">oil on canvas</text>
+</g>
+<!-- nw&#45;&gt;oil -->
+<g id="edge3" class="edge"><title>nw&#45;&gt;oil</title>
+<path fill="none" stroke="orange" d="M153.632,-169.625C173.196,-155.72 202.162,-135.133 223.779,-119.768"/>
+<polygon fill="orange" stroke="orange" points="225.837,-122.6 231.96,-113.954 221.781,-116.894 225.837,-122.6"/>
+<text text-anchor="middle" x="225.787" y="-139.6" font-family="Helvetica,sans-Serif" font-size="8.00">has medium</text>
+</g>
+<!-- nwd -->
+<g id="node7" class="node"><title>nwd</title>
+<ellipse fill="none" stroke="gray" cx="27" cy="-98" rx="27" ry="18"/>
+<text text-anchor="middle" x="27" y="-95" font-family="Helvetica,sans-Serif" font-size="10.00">1642</text>
+</g>
+<!-- nw&#45;&gt;nwd -->
+<g id="edge2" class="edge"><title>nw&#45;&gt;nwd</title>
+<path fill="none" stroke="gray" d="M112.741,-169.226C95.413,-155.034 69.877,-134.118 51.1799,-118.804"/>
+<polygon fill="gray" stroke="gray" points="53.3315,-116.043 43.3774,-112.414 48.896,-121.458 53.3315,-116.043"/>
+<text text-anchor="middle" x="105.455" y="-143.6" font-family="Helvetica,sans-Serif" font-size="8.00">was</text>
+<text text-anchor="middle" x="105.455" y="-135.6" font-family="Helvetica,sans-Serif" font-size="8.00">createdin</text>
+</g>
+<!-- d -->
+<g id="node6" class="node"><title>d</title>
+<ellipse fill="none" stroke="gray" cx="263" cy="-18" rx="27" ry="18"/>
+<text text-anchor="middle" x="263" y="-15" font-family="Helvetica,sans-Serif" font-size="10.00">Dutch</text>
+</g>
+<!-- rr&#45;&gt;d -->
+<g id="edge5" class="edge"><title>rr&#45;&gt;d</title>
+<path fill="none" stroke="gray" d="M157.881,-81.5897C180.033,-68.4005 211.867,-49.4456 234.691,-35.8559"/>
+<polygon fill="gray" stroke="gray" points="236.761,-38.6968 243.563,-30.5735 233.18,-32.6822 236.761,-38.6968"/>
+<text text-anchor="middle" x="227.572" y="-55.6" font-family="Helvetica,sans-Serif" font-size="8.00">has nationality</text>
+</g>
+<!-- rrb -->
+<g id="node8" class="node"><title>rrb</title>
+<ellipse fill="none" stroke="gray" cx="132" cy="-18" rx="27" ry="18"/>
+<text text-anchor="middle" x="132" y="-15" font-family="Helvetica,sans-Serif" font-size="10.00">1606</text>
+</g>
+<!-- rr&#45;&gt;rrb -->
+<g id="edge4" class="edge"><title>rr&#45;&gt;rrb</title>
+<path fill="none" stroke="gray" d="M132,-79.6893C132,-69.8938 132,-57.4218 132,-46.335"/>
+<polygon fill="gray" stroke="gray" points="135.5,-46.2623 132,-36.2623 128.5,-46.2624 135.5,-46.2623"/>
+<text text-anchor="middle" x="152.455" y="-55.6" font-family="Helvetica,sans-Serif" font-size="8.00">was born in</text>
+</g>
+<!-- jv -->
+<g id="node3" class="node"><title>jv</title>
+<ellipse fill="none" stroke="gray" cx="372" cy="-98" rx="57.9076" ry="18"/>
+<text text-anchor="middle" x="372" y="-95" font-family="Helvetica,sans-Serif" font-size="10.00">Johannes Vermeer</text>
+</g>
+<!-- jv&#45;&gt;d -->
+<g id="edge6" class="edge"><title>jv&#45;&gt;d</title>
+<path fill="none" stroke="gray" d="M349.942,-81.2155C332.328,-68.6108 307.605,-50.9191 289.023,-37.6222"/>
+<polygon fill="gray" stroke="gray" points="290.879,-34.6462 280.71,-31.673 286.805,-40.3388 290.879,-34.6462"/>
+<text text-anchor="middle" x="345.572" y="-55.6" font-family="Helvetica,sans-Serif" font-size="8.00">has nationality</text>
+</g>
+<!-- wb -->
+<g id="node4" class="node"><title>wb</title>
+<ellipse fill="none" stroke="red" cx="277" cy="-186" rx="68.3645" ry="18"/>
+<text text-anchor="middle" x="277" y="-183" font-family="Helvetica,sans-Serif" font-size="10.00">Woman with a Balance</text>
+</g>
+<!-- wb&#45;&gt;jv -->
+<g id="edge7" class="edge"><title>wb&#45;&gt;jv</title>
+<path fill="none" stroke="gray" d="M295.278,-168.646C301.824,-162.776 309.251,-156.101 316,-150 325.983,-140.975 336.934,-131.015 346.484,-122.31"/>
+<polygon fill="gray" stroke="gray" points="349.095,-124.666 354.124,-115.341 344.377,-119.494 349.095,-124.666"/>
+<text text-anchor="middle" x="350.678" y="-143.6" font-family="Helvetica,sans-Serif" font-size="8.00">was</text>
+<text text-anchor="middle" x="350.678" y="-135.6" font-family="Helvetica,sans-Serif" font-size="8.00">created by</text>
+</g>
+<!-- wb&#45;&gt;oil -->
+<g id="edge8" class="edge"><title>wb&#45;&gt;oil</title>
+<path fill="none" stroke="orange" d="M272.258,-168.009C268.905,-155.995 264.342,-139.641 260.498,-125.869"/>
+<polygon fill="orange" stroke="orange" points="263.791,-124.647 257.732,-115.956 257.049,-126.528 263.791,-124.647"/>
+<text text-anchor="middle" x="289.787" y="-139.6" font-family="Helvetica,sans-Serif" font-size="8.00">has medium</text>
+</g>
+</g>
+</svg>

lod/tutorial/images/graph-databases-and-SPARQL/sparql04-1.svg

@@ -0,0 +1,127 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Generated by graphviz version 2.38.0 (20140413.2041)
+ -->
+<!-- Title: %3 Pages: 1 -->
+<svg width="636pt" height="364pt"
+ viewBox="0.00 0.00 636.30 364.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 360)">
+<title>%3</title>
+<polygon fill="white" stroke="none" points="-4,4 -4,-360 632.301,-360 632.301,4 -4,4"/>
+<!-- o -->
+<g id="node1" class="node"><title>o</title>
+<ellipse fill="none" stroke="red" cx="274.27" cy="-338" rx="53.3595" ry="18"/>
+<text text-anchor="middle" x="274.27" y="-335" font-family="Helvetica,sans-Serif" font-size="10.00">object/PPA82633</text>
+</g>
+<!-- th1 -->
+<g id="node2" class="node"><title>th1</title>
+<ellipse fill="none" stroke="red" cx="40.2702" cy="-258" rx="40.0417" ry="18"/>
+<text text-anchor="middle" x="40.2702" y="-255" font-family="Helvetica,sans-Serif" font-size="10.00">thes:x11409</text>
+</g>
+<!-- o&#45;&gt;th1 -->
+<g id="edge1" class="edge"><title>o&#45;&gt;th1</title>
+<path fill="none" stroke="red" d="M224.341,-331.342C190.446,-326.351 145.117,-317.397 107.454,-302 93.6639,-296.363 79.5997,-287.87 67.927,-279.917"/>
+<polygon fill="red" stroke="red" points="69.704,-276.888 59.5111,-273.997 65.6765,-282.613 69.704,-276.888"/>
+<text text-anchor="middle" x="147.178" y="-295.6" font-family="Helvetica,sans-Serif" font-size="8.00">ecrm:p45_consists_of</text>
+</g>
+<!-- dep -->
+<g id="node4" class="node"><title>dep</title>
+<ellipse fill="none" stroke="red" cx="172.27" cy="-258" rx="74.1479" ry="18"/>
+<text text-anchor="middle" x="172.27" y="-255" font-family="Helvetica,sans-Serif" font-size="10.00">person&#45;institution/147800</text>
+</g>
+<!-- o&#45;&gt;dep -->
+<g id="edge3" class="edge"><title>o&#45;&gt;dep</title>
+<path fill="none" stroke="red" d="M235.65,-325.351C222.058,-319.869 207.403,-312.234 196.239,-302 191.195,-297.376 186.961,-291.439 183.525,-285.462"/>
+<polygon fill="red" stroke="red" points="186.46,-283.516 178.779,-276.219 180.234,-286.714 186.46,-283.516"/>
+<text text-anchor="middle" x="228.286" y="-295.6" font-family="Helvetica,sans-Serif" font-size="8.00">ecrm:P62_depicts</text>
+</g>
+<!-- etc -->
+<g id="node6" class="node"><title>etc</title>
+<ellipse fill="none" stroke="gray" cx="274.27" cy="-18" rx="27" ry="18"/>
+<text text-anchor="middle" x="274.27" y="-15" font-family="Helvetica,sans-Serif" font-size="10.00">etc...</text>
+</g>
+<!-- o&#45;&gt;etc -->
+<g id="edge10" class="edge"><title>o&#45;&gt;etc</title>
+<path fill="none" stroke="gray" d="M274.27,-319.958C274.27,-304.156 274.27,-279.99 274.27,-259 274.27,-259 274.27,-259 274.27,-97 274.27,-80.1099 274.27,-61.1626 274.27,-46.172"/>
+<polygon fill="gray" stroke="gray" points="277.77,-46.0417 274.27,-36.0418 270.77,-46.0418 277.77,-46.0417"/>
+</g>
+<!-- own -->
+<g id="node7" class="node"><title>own</title>
+<ellipse fill="none" stroke="red" cx="395.27" cy="-258" rx="93.1176" ry="18"/>
+<text text-anchor="middle" x="395.27" y="-255" font-family="Helvetica,sans-Serif" font-size="10.00">thesIdentifier:the&#45;british&#45;museum</text>
+</g>
+<!-- o&#45;&gt;own -->
+<g id="edge5" class="edge"><title>o&#45;&gt;own</title>
+<path fill="none" stroke="red" d="M297.887,-321.776C315.86,-310.19 340.856,-294.077 361.023,-281.077"/>
+<polygon fill="red" stroke="red" points="363.112,-283.894 369.621,-275.534 359.319,-278.011 363.112,-283.894"/>
+<text text-anchor="middle" x="392.854" y="-295.6" font-family="Helvetica,sans-Serif" font-size="8.00">ecrm:P54_has_current_owner</text>
+</g>
+<!-- con -->
+<g id="node8" class="node"><title>con</title>
+<ellipse fill="none" stroke="red" cx="524.27" cy="-178" rx="80.1403" ry="18"/>
+<text text-anchor="middle" x="524.27" y="-175" font-family="Helvetica,sans-Serif" font-size="10.00">object/PPA82633/concept/1</text>
+</g>
+<!-- o&#45;&gt;con -->
+<g id="edge6" class="edge"><title>o&#45;&gt;con</title>
+<path fill="none" stroke="red" d="M322.863,-330.474C381.749,-321.472 475.782,-303.207 497.27,-276 513.047,-256.024 519.612,-227.389 522.339,-206.409"/>
+<polygon fill="red" stroke="red" points="525.845,-206.541 523.445,-196.222 518.886,-205.786 525.845,-206.541"/>
+<text text-anchor="middle" x="548.839" y="-255.6" font-family="Helvetica,sans-Serif" font-size="8.00">ecrm:P128_carries</text>
+</g>
+<!-- th1lab -->
+<g id="node3" class="node"><title>th1lab</title>
+<ellipse fill="none" stroke="gray" cx="40.2702" cy="-178" rx="27" ry="18"/>
+<text text-anchor="middle" x="40.2702" y="-175" font-family="Helvetica,sans-Serif" font-size="10.00">paper</text>
+</g>
+<!-- th1&#45;&gt;th1lab -->
+<g id="edge2" class="edge"><title>th1&#45;&gt;th1lab</title>
+<path fill="none" stroke="gray" d="M40.2702,-239.689C40.2702,-229.894 40.2702,-217.422 40.2702,-206.335"/>
+<polygon fill="gray" stroke="gray" points="43.7703,-206.262 40.2702,-196.262 36.7703,-206.262 43.7703,-206.262"/>
+<text text-anchor="middle" x="66.2858" y="-215.6" font-family="Helvetica,sans-Serif" font-size="8.00">skos:prefLabel</text>
+</g>
+<!-- deplab -->
+<g id="node5" class="node"><title>deplab</title>
+<ellipse fill="none" stroke="gray" cx="172.27" cy="-178" rx="66.8537" ry="18"/>
+<text text-anchor="middle" x="172.27" y="-175" font-family="Helvetica,sans-Serif" font-size="10.00">Julius Caesar Scaliger</text>
+</g>
+<!-- dep&#45;&gt;deplab -->
+<g id="edge4" class="edge"><title>dep&#45;&gt;deplab</title>
+<path fill="none" stroke="gray" d="M172.27,-239.689C172.27,-229.894 172.27,-217.422 172.27,-206.335"/>
+<polygon fill="gray" stroke="gray" points="175.77,-206.262 172.27,-196.262 168.77,-206.262 175.77,-206.262"/>
+<text text-anchor="middle" x="198.286" y="-215.6" font-family="Helvetica,sans-Serif" font-size="8.00">skos:prefLabel</text>
+</g>
+<!-- contype -->
+<g id="node9" class="node"><title>contype</title>
+<ellipse fill="none" stroke="gray" cx="431.27" cy="-98" rx="85.8678" ry="18"/>
+<text text-anchor="middle" x="431.27" y="-95" font-family="Helvetica,sans-Serif" font-size="10.00">ecrm:E73_Information_Object</text>
+</g>
+<!-- con&#45;&gt;contype -->
+<g id="edge7" class="edge"><title>con&#45;&gt;contype</title>
+<path fill="none" stroke="gray" d="M504.547,-160.458C491.321,-149.365 473.71,-134.595 459.068,-122.314"/>
+<polygon fill="gray" stroke="gray" points="461.196,-119.531 451.285,-115.787 456.698,-124.895 461.196,-119.531"/>
+<text text-anchor="middle" x="494.61" y="-135.6" font-family="Helvetica,sans-Serif" font-size="8.00">rdf:type</text>
+</g>
+<!-- concon -->
+<g id="node10" class="node"><title>concon</title>
+<ellipse fill="none" stroke="gray" cx="576.27" cy="-98" rx="40.8927" ry="18"/>
+<text text-anchor="middle" x="576.27" y="-95" font-family="Helvetica,sans-Serif" font-size="10.00">thes:x12440</text>
+</g>
+<!-- con&#45;&gt;concon -->
+<g id="edge8" class="edge"><title>con&#45;&gt;concon</title>
+<path fill="none" stroke="gray" d="M535.553,-160.075C542.599,-149.507 551.795,-135.713 559.664,-123.91"/>
+<polygon fill="gray" stroke="gray" points="562.73,-125.619 565.365,-115.357 556.906,-121.736 562.73,-125.619"/>
+<text text-anchor="middle" x="588.96" y="-135.6" font-family="Helvetica,sans-Serif" font-size="8.00">ecrm:P129_is_about</text>
+</g>
+<!-- conlab -->
+<g id="node11" class="node"><title>conlab</title>
+<ellipse fill="none" stroke="gray" cx="576.27" cy="-18" rx="33.894" ry="18"/>
+<text text-anchor="middle" x="576.27" y="-15" font-family="Helvetica,sans-Serif" font-size="10.00">academic</text>
+</g>
+<!-- concon&#45;&gt;conlab -->
+<g id="edge9" class="edge"><title>concon&#45;&gt;conlab</title>
+<path fill="none" stroke="gray" d="M576.27,-79.6893C576.27,-69.8938 576.27,-57.4218 576.27,-46.335"/>
+<polygon fill="gray" stroke="gray" points="579.77,-46.2623 576.27,-36.2623 572.77,-46.2624 579.77,-46.2623"/>
+<text text-anchor="middle" x="602.286" y="-55.6" font-family="Helvetica,sans-Serif" font-size="8.00">skos:prefLabel</text>
+</g>
+</g>
+</svg>

lod/tutorial/images/graph-databases-and-SPARQL/sparql07.svg

@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Generated by graphviz version 2.38.0 (20140413.2041)
+ -->
+<!-- Title: %3 Pages: 1 -->
+<svg width="367pt" height="364pt"
+ viewBox="0.00 0.00 367.21 364.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 360)">
+<title>%3</title>
+<polygon fill="white" stroke="none" points="-4,4 -4,-360 363.215,-360 363.215,4 -4,4"/>
+<!-- obj -->
+<g id="node1" class="node"><title>obj</title>
+<ellipse fill="none" stroke="gray" cx="148.735" cy="-338" rx="148.97" ry="18"/>
+<text text-anchor="middle" x="148.735" y="-335" font-family="Helvetica,sans-Serif" font-size="10.00">http://collection.britishmuseum.org/id/object/PPA82633</text>
+</g>
+<!-- object_type -->
+<g id="node2" class="node"><title>object_type</title>
+<ellipse fill="none" stroke="gray" cx="51.7348" cy="-258" rx="38.5366" ry="18"/>
+<text text-anchor="middle" x="51.7348" y="-255" font-family="Helvetica,sans-Serif" font-size="10.00">object_type</text>
+</g>
+<!-- obj&#45;&gt;object_type -->
+<g id="edge1" class="edge"><title>obj&#45;&gt;object_type</title>
+<path fill="none" stroke="gray" d="M98.3951,-320.855C88.4182,-315.964 78.6502,-309.764 70.9106,-302 66.4004,-297.476 62.8568,-291.706 60.1099,-285.873"/>
+<polygon fill="gray" stroke="gray" points="63.1969,-284.17 56.2095,-276.205 56.7054,-286.789 63.1969,-284.17"/>
+<text text-anchor="middle" x="108.647" y="-295.6" font-family="Helvetica,sans-Serif" font-size="8.00">bmo:PX_object_type</text>
+</g>
+<!-- production -->
+<g id="node4" class="node"><title>production</title>
+<ellipse fill="none" stroke="gray" cx="148.735" cy="-258" rx="36.3999" ry="18"/>
+<text text-anchor="middle" x="148.735" y="-255" font-family="Helvetica,sans-Serif" font-size="10.00">production</text>
+</g>
+<!-- obj&#45;&gt;production -->
+<g id="edge3" class="edge"><title>obj&#45;&gt;production</title>
+<path fill="none" stroke="gray" d="M148.735,-319.689C148.735,-309.894 148.735,-297.422 148.735,-286.335"/>
+<polygon fill="gray" stroke="gray" points="152.235,-286.262 148.735,-276.262 145.235,-286.262 152.235,-286.262"/>
+<text text-anchor="middle" x="203.657" y="-295.6" font-family="Helvetica,sans-Serif" font-size="8.00">ecrm:P108i_was_produced_by</text>
+</g>
+<!-- other -->
+<g id="node8" class="node"><title>other</title>
+<text text-anchor="middle" x="281.735" y="-255" font-family="Helvetica,sans-Serif" font-size="10.00">Other top&#45;level object attributes</text>
+</g>
+<!-- obj&#45;&gt;other -->
+<g id="edge7" class="edge"><title>obj&#45;&gt;other</title>
+<path fill="none" stroke="gray" d="M223.709,-322.337C236.677,-317.399 249.318,-310.804 259.735,-302 264.947,-297.595 269.068,-291.646 272.265,-285.579"/>
+<polygon fill="gray" stroke="gray" points="275.598,-286.706 276.554,-276.154 269.227,-283.807 275.598,-286.706"/>
+<text text-anchor="middle" x="271.069" y="-295.6" font-family="Helvetica,sans-Serif" font-size="8.00">...</text>
+</g>
+<!-- print -->
+<g id="node3" class="node"><title>print</title>
+<ellipse fill="none" stroke="gray" cx="51.7348" cy="-178" rx="27" ry="18"/>
+<text text-anchor="middle" x="51.7348" y="-175" font-family="Helvetica,sans-Serif" font-size="10.00">print</text>
+</g>
+<!-- object_type&#45;&gt;print -->
+<g id="edge2" class="edge"><title>object_type&#45;&gt;print</title>
+<path fill="none" stroke="gray" d="M51.7348,-239.689C51.7348,-229.894 51.7348,-217.422 51.7348,-206.335"/>
+<polygon fill="gray" stroke="gray" points="55.2349,-206.262 51.7348,-196.262 48.2349,-206.262 55.2349,-206.262"/>
+<text text-anchor="middle" x="77.7504" y="-215.6" font-family="Helvetica,sans-Serif" font-size="8.00">skos:prefLabel</text>
+</g>
+<!-- date -->
+<g id="node5" class="node"><title>date</title>
+<ellipse fill="none" stroke="gray" cx="134.735" cy="-178" rx="27" ry="18"/>
+<text text-anchor="middle" x="134.735" y="-175" font-family="Helvetica,sans-Serif" font-size="10.00">date</text>
+</g>
+<!-- production&#45;&gt;date -->
+<g id="edge4" class="edge"><title>production&#45;&gt;date</title>
+<path fill="none" stroke="gray" d="M143.042,-240.075C141.328,-234.389 139.605,-227.974 138.481,-222 137.543,-217.015 136.839,-211.66 136.311,-206.48"/>
+<polygon fill="gray" stroke="gray" points="139.778,-205.937 135.456,-196.264 132.803,-206.521 139.778,-205.937"/>
+<text text-anchor="middle" x="175.862" y="-215.6" font-family="Helvetica,sans-Serif" font-size="8.00">ecrm:P9_consists_of</text>
+</g>
+<!-- other_prod -->
+<g id="node9" class="node"><title>other_prod</title>
+<text text-anchor="middle" x="234.735" y="-175" font-family="Helvetica,sans-Serif" font-size="10.00">Other production info</text>
+</g>
+<!-- production&#45;&gt;other_prod -->
+<g id="edge8" class="edge"><title>production&#45;&gt;other_prod</title>
+<path fill="none" stroke="gray" d="M176.351,-246.343C188.633,-240.562 202.579,-232.439 212.735,-222 217.34,-217.267 221.193,-211.376 224.322,-205.489"/>
+<polygon fill="gray" stroke="gray" points="227.508,-206.94 228.646,-196.406 221.187,-203.931 227.508,-206.94"/>
+<text text-anchor="middle" x="222.069" y="-215.6" font-family="Helvetica,sans-Serif" font-size="8.00">...</text>
+</g>
+<!-- timespan -->
+<g id="node6" class="node"><title>timespan</title>
+<ellipse fill="none" stroke="gray" cx="134.735" cy="-98" rx="32.8294" ry="18"/>
+<text text-anchor="middle" x="134.735" y="-95" font-family="Helvetica,sans-Serif" font-size="10.00">timespan</text>
+</g>
+<!-- date&#45;&gt;timespan -->
+<g id="edge5" class="edge"><title>date&#45;&gt;timespan</title>
+<path fill="none" stroke="gray" d="M134.735,-159.689C134.735,-149.894 134.735,-137.422 134.735,-126.335"/>
+<polygon fill="gray" stroke="gray" points="138.235,-126.262 134.735,-116.262 131.235,-126.262 138.235,-126.262"/>
+<text text-anchor="middle" x="178.088" y="-135.6" font-family="Helvetica,sans-Serif" font-size="8.00">ecrm:P4_has_time&#45;span</text>
+</g>
+<!-- start_date -->
+<g id="node7" class="node"><title>start_date</title>
+<ellipse fill="none" stroke="gray" cx="66.7348" cy="-18" rx="34.828" ry="18"/>
+<text text-anchor="middle" x="66.7348" y="-15" font-family="Helvetica,sans-Serif" font-size="10.00">start_date</text>
+</g>
+<!-- timespan&#45;&gt;start_date -->
+<g id="edge6" class="edge"><title>timespan&#45;&gt;start_date</title>
+<path fill="none" stroke="gray" d="M105.598,-89.5265C91.4682,-84.285 75.76,-75.6942 67.3129,-62 64.4467,-57.3534 63.1708,-51.8529 62.8105,-46.3654"/>
+<polygon fill="gray" stroke="gray" points="66.3171,-46.1414 63.0686,-36.0569 59.3193,-45.9661 66.3171,-46.1414"/>
+<text text-anchor="middle" x="124.446" y="-55.6" font-family="Helvetica,sans-Serif" font-size="8.00">ecrm:P82a_begin_of_the_begin</text>
+</g>
+<!-- other_date -->
+<g id="node10" class="node"><title>other_date</title>
+<text text-anchor="middle" x="202.735" y="-15" font-family="Helvetica,sans-Serif" font-size="10.00">End of begin, Start of end...</text>
+</g>
+<!-- timespan&#45;&gt;other_date -->
+<g id="edge9" class="edge"><title>timespan&#45;&gt;other_date</title>
+<path fill="none" stroke="gray" d="M155.643,-84.0943C164.163,-78.1192 173.652,-70.4665 180.735,-62 184.802,-57.138 188.386,-51.398 191.417,-45.7224"/>
+<polygon fill="gray" stroke="gray" points="194.728,-46.9184 195.983,-36.3981 188.442,-43.8394 194.728,-46.9184"/>
+<text text-anchor="middle" x="190.069" y="-55.6" font-family="Helvetica,sans-Serif" font-size="8.00">...</text>
+</g>
+</g>
+</svg>

lod/tutorial/js/bootstrap-4-navbar.js

@@ -0,0 +1,34 @@
+
+/*!
+ * Bootstrap 4 multi dropdown navbar ( https://bootstrapthemes.co/demo/resource/bootstrap-4-multi-dropdown-navbar/ )
+ * Copyright 2017.
+ * Licensed under the GPL license
+ */
+
+
+$( document ).ready( function () {
+    $( '.mobile-drop a.dropdown-toggle' ).on( 'click', function ( e ) {
+        var $el = $( this );
+        var $parent = $( this ).offsetParent( ".mobile-drop" );
+        if ($('.show.mobile-drop').length > 0){
+          $('.show.mobile-drop').each(function(item){
+            $(this).toggleClass('show');
+          });
+        }
+
+        var $subMenu = $( this ).next( ".mobile-drop" );
+        $subMenu.toggleClass( 'show' );
+
+        $( this ).parent( "li" ).toggleClass( 'show' );
+
+        $( this ).parents( 'li.nav-item.dropdown.mobile-drop.show' ).on( 'click', function ( e ) {
+            $( '.mobile-drop .show' ).removeClass( "show" );
+        } );
+
+         if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
+            $el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
+        }
+
+        return false;
+    } );
+} );

lod/tutorial/js/ext_links.js

@@ -0,0 +1,8 @@
+$(document).ready(function() {
+   $('a').each(function() {
+      var a = new RegExp('/' + window.location.host + '/');
+      if (!a.test(this.href)) {
+      $(this).attr("target","_blank");
+      }
+   });
+});

lod/tutorial/js/header_links.js

@@ -0,0 +1,13 @@
+// http://ben.balter.com/2014/03/13/pages-anchor-links/
+
+$(function() {
+  return $("h2, h3, h4, h5, h6").each(function(i, el) {
+    var $el, icon, id;
+    $el = $(el);
+    id = $el.attr('id');
+    icon = '<i class="fa fa-link" style="font-size: 0.8em"></i>';
+    if (id) {
+      return $el.append($("<a />").addClass("header-link").attr("href", "#" + id).html(icon));
+    }
+  });
+});