D3 Examples - Instance Similarity IV

Instance Similarity IV

This experiment extends the previous one using a more compact representation of the instances. Instead of using a matrix, instances are placed along the Gosper curve (See [this]Linked Data Maps approach for details).

This extension adds to the Linked Data Maps approach, an additional criteria of proximity between instances. In fact, so far, the only criteria for which instances were close to each other was the membership to the same ontological class. This experiment introduces a new one based on the description of the instances in term of RDF predicates.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content="Instance Similarity I (Gosper)" />
  <title>Instance Similarity I (Gosper)</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="//wafi.iit.cnr.it/webvis/tmp/clusterfck.js"></script>
  <script src="//wafi.iit.cnr.it/webvis/libs/jigmaps/zip.js"></script>
  <script src="//wafi.iit.cnr.it/webvis/libs/jigmaps/tree_utils.js"></script>
  <script src="//wafi.iit.cnr.it/webvis/libs/jigmaps/sfc_layout.js"></script>
  <script src="//wafi.iit.cnr.it/webvis/libs/jigmaps/jigsaw.js"></script>
</head>
<body>
  <select id="criterium">
    <option value="euclidean" selected>Euclidean</option>
    <option value="manhattan">Manhattan</option>
    <option value="max_distance">Max Distance</option>
  </select>
  
  <select id="file">
    <option value="guitarist.json" selected>Guitarist</option>
    <option value="poet.json">Poet</option>
    <option value="cheese.json">Cheese</option>
    <option value="animangacharacter.json">Animanga Character</option>
    <option value="monument.json">Monument</option>
    <option value="pope.json">Pope</option>
  </select>
  
  <div id="slider">
    <label for="threshold_slider">Threshold:</label>
    <input id="threshold_slider" type="range" min="0" max="5" step="0.1" value="5">
    <output id="threshold_val">5</output>
  </div>
  
  <svg height="500" width="960"></svg>
  
  <script src="index.js"></script>
</body>
</html>
    