Linkeddata

Bilbo as linked data: what he is, where he lives, when he was born, where he first appears and who his friend is. Each dot is placed by hand with at, where the LOD of the Rings slide has it, and carries its name beside it.

Diagrams 629 × 349 <circle><connect><stack><style>

Result

Source examples/linkeddata.svgn

<diagram padding="24" theme="dark" background="#282d34">
  <!-- Bilbo as linked data: what he is, where he lives, when he was born, where he
       first appears and who his friend is. Each dot is placed by hand with `at`,
       where the LOD of the Rings slide has it, and carries its name beside it. -->
  <style>
    svg { --sv-bg: #282d34; --sv-text: #eeeeee; --sv-edge: #cccc99; --sv-muted: #cccc99;
          --sv-halo: #282d34; --sv-node-fill: #78909c; --sv-node-stroke: #eeeeee;
          --sv-font: 'Fira Sans Condensed', 'Fira Sans', sans-serif; }
  </style>
  <stack>
    <circle id="istar" label="Istar" label-side="left"
            font-size="13.5" width="21" height="21" at="119.1 14.88"/>
    <circle id="people" label="People" label-side="above"
            font-size="13.5" width="21" height="21" at="246.54 35.4"/>
    <circle id="gandalf" label="Gandalf" label-side="above"
            font-size="13.5" width="21" height="21" at="43.5 57"/>
    <circle id="hobbit" label="hobbit" label-side="above"
            font-size="13.5" width="21" height="21" at="156.36 62.94"/>
    <circle id="location" label="Location" label-side="above"
            font-size="13.5" width="21" height="21" at="339.42 62.4"/>
    <circle id="shire" label="The Shire" label-side="above"
            font-size="13.5" width="21" height="21" at="479.82 49.44"/>
    <circle id="bagend" label="Bag End" label-side="above"
            font-size="13.5" width="21" height="21" at="273 121.8"/>
    <circle id="hobbiton" label="Hobbiton" label-side="right"
            font-size="13.5" width="21" height="21" at="433.92 113.16"/>
    <circle id="bilbo" label="Bilbo" label-side="left"
            font-size="13.5" width="21" height="21" at="99.12 138"/>
    <circle id="born" label="22 September, T.A. 2890" label-side="below"
            font-size="13.5" width="21" height="21" at="375.6 160.14"/>
    <circle id="date" label="Date" label-side="right"
            font-size="13.5" width="21" height="21" at="457.14 149.88"/>
    <circle id="h006" label="H 01.006" label-side="right"
            font-size="13.5" width="21" height="21" at="27.84 221.16"/>
    <circle id="h001" label="H 01.001" label-side="below"
            font-size="13.5" width="21" height="21" at="204.96 221.7"/>
    <circle id="paragraph" label="Paragraph" label-side="right"
            font-size="13.5" width="21" height="21" at="291.36 269.22"/>
  </stack>
  <connect from="bilbo" to="hobbit" label="is a" routing="curved"/>
  <connect from="bilbo" to="bagend" label="lives in" routing="curved"/>
  <connect from="bilbo" to="born" label="was born on" routing="curved"/>
  <connect from="bilbo" to="h001" label="first appears in" routing="curved"/>
  <connect from="bilbo" to="gandalf" label="has friend" routing="curved"/>
  <connect from="gandalf" to="istar" label="is a" routing="curved"/>
  <connect from="istar" to="people" label="is a type of" routing="curved"/>
  <connect from="hobbit" to="people" label="is a type of" routing="curved"/>
  <connect from="gandalf" to="h006" label="first appears in" routing="curved"/>
  <connect from="h006" to="paragraph" label="is a" routing="curved"/>
  <connect from="h001" to="paragraph" label="is a" routing="curved"/>
  <connect from="bagend" to="location" label="is a" routing="curved"/>
  <connect from="bagend" to="hobbiton" label="is within" routing="curved"/>
  <connect from="hobbiton" to="location" label="is a" routing="curved"/>
  <connect from="hobbiton" to="shire" label="is within" routing="curved"/>
  <connect from="shire" to="location" label="is a" routing="curved"/>
  <connect from="born" to="date" label="is a" routing="curved"/>
</diagram>

Open the SVG →