Duck Islands (Pink Floyd)

A suggestive experiment leveraging the duck similarity to create "islands" of similar RDF resources.

The technique make use of a fixed random seed, an offline force directed layout simulation to displace the nodes, a Voronoi tessellation and SVG ClipPath to create the cells.

The example depicts the neighborhood of the Pink Floyd resource within DBpedia. Songs and albums are somewhat mixed in the left side of the map, while people (far right), lables (bottom right) are isolated.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Duck Islands (Pink Floyd)</title>
    <link type="text/css" href="index.css" rel="stylesheet"/>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
    <script src="https://davidbau.com/encode/seedrandom-min.js"></script>
    <script src="//wafi.iit.cnr.it/webvis/tmp/clusterfck.js"></script>
  </head>
  <body>
    <svg height="500" width="960">
      <defs>
        <pattern id="sea" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse">
          <path d="M0 0.5 L 10 0.5" stroke="white"/>
          <path d="M15 15.5 L 25 15.5" stroke="white"/>
          <!--<circle cx="2" cy="2" r="1" fill="white"/>
          <circle cx="13" cy="22" r="1" fill="white"/>-->
        </pattern>
      </defs>
    </svg><div id="panel"><header></header><section></section></div>
    <script src="index.js"></script>
  </body>
</html>
    

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js to a secure url

Modified http://davidbau.com/encode/seedrandom-min.js to a secure url

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js

https://davidbau.com/encode/seedrandom-min.js

https://wafi.iit.cnr.it/webvis/tmp/clusterfck.js