Merge pull request #479 from Kitware/similarity-graph

Add similarity graph component

app/examples/index.json

@@ -111,5 +111,9 @@
   {
     "title": "TrackerDash",
     "link": "trackerdash"
+  },
+  {
+    "title": "Similarity Graph",
+    "link": "similarity"
   }
 ]

app/examples/similarity/index.js

@@ -0,0 +1,62 @@
+import { bigram } from '../util/datasets';
+import showComponent from '../util/showComponent';
+import SimilarityGraph from '../../../components/SimilarityGraph';
+
+const sonorantClass = letter => 'aeiou'.indexOf(letter) !== -1 ? 'vowel' : 'consonant';
+
+const generateTable = (freq) => {
+  const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
+  let table = [];
+
+  let min = Infinity;
+  let max = -Infinity;
+
+  alphabet.forEach(x => {
+    let entry = {
+      letter: x,
+      vowel: sonorantClass(x),
+      radius: -Infinity
+    };
+
+    alphabet.forEach(y => {
+      const value = Math.max(bigram[`${x}${y}`], bigram[`${y}${x}`]);
+
+      if (value < min) {
+        min = value;
+      }
+
+      if (value > max) {
+        max = value;
+      }
+
+      if (value > entry.radius) {
+        entry.radius = value;
+      }
+      entry[y] = value;
+    });
+
+    table.push(entry);
+  });
+
+  // Rescale the "size" values to a reasonable range of circle radii.
+  const minSize = 5;
+  const maxSize = 20;
+  const rescale = val => (val - min) / (max - min) * (maxSize - minSize) + minSize;
+
+  table.forEach(entry => entry.radius = rescale(entry.radius));
+
+  return table;
+};
+
+window.onload = () => {
+  showComponent(SimilarityGraph, {
+    data: generateTable(bigram),
+    id: 'letter',
+    color: 'vowel',
+    threshold: 0.01,
+    size: 'radius',
+    linkDistance: 120,
+    width: '100%',
+    height: '100%'
+  });
+};

app/examples/util/datasets/bigram.json

@@ -0,0 +1 @@
+{"gw": 1e-05, "gv": 0.0, "gu": 0.00086, "gt": 0.00015, "gs": 0.0005099999999999999, "gr": 0.00197, "gq": 0.0, "gp": 0.0, "gz": 0.0, "vr": 1e-05, "gx": 0.0, "gg": 0.00025, "gf": 1e-05, "ge": 0.00385, "gd": 3e-05, "gc": 0.0, "gb": 0.0, "ga": 0.00148, "go": 0.00132, "gn": 0.00066, "gm": 0.0001, "gl": 0.00061, "gk": 0.0, "gj": 0.0, "gi": 0.0015199999999999999, "gh": 0.00228, "tz": 4e-05, "tx": 0.0, "ty": 0.00227, "tv": 1e-05, "tw": 0.00082, "tt": 0.0017100000000000001, "tu": 0.00255, "tr": 0.00426, "ts": 0.00337, "tp": 4e-05, "tq": 0.0, "tn": 0.0001, "to": 0.010409999999999999, "tl": 0.00098, "tm": 0.00026, "tj": 0.0, "tk": 0.0, "th": 0.03556, "ti": 0.01343, "tf": 6e-05, "tg": 2e-05, "td": 1e-05, "te": 0.01205, "tb": 3e-05, "tc": 0.00026, "ta": 0.0053, "gy": 0.00026, "zl": 1e-05, "zm": 0.0, "zn": 0.0, "zo": 7.000000000000001e-05, "zh": 1e-05, "zi": 0.00012, "zj": 0.0, "zk": 0.0, "zd": 0.0, "ze": 0.0005, "zf": 0.0, "zg": 0.0, "za": 0.00025, "zb": 0.0, "zc": 0.0, "zx": 0.0, "zy": 2e-05, "zz": 3e-05, "zt": 0.0, "zu": 2e-05, "zv": 0.0, "zw": 0.0, "zp": 0.0, "zq": 0.0, "zr": 0.0, "zs": 0.0, "mv": 0.0, "mz": 0.0, "ix": 0.00021999999999999998, "iz": 0.00064, "iq": 0.00010999999999999999, "ip": 0.00089, "is": 0.011279999999999998, "ir": 0.00315, "iu": 0.00017, "it": 0.01123, "iw": 1e-05, "iv": 0.0028799999999999997, "me": 0.00793, "md": 1e-05, "mg": 1e-05, "mf": 4e-05, "ma": 0.00565, "mc": 4e-05, "mb": 0.0009, "mm": 0.00096, "ml": 5e-05, "mo": 0.00337, "mn": 8.999999999999999e-05, "mi": 0.00318, "mh": 1e-05, "mk": 0.0, "mj": 0.0, "mu": 0.00115, "mt": 1e-05, "mw": 1e-05, "vs": 1e-05, "mq": 0.0, "mp": 0.0023899999999999998, "ms": 0.0009299999999999999, "mr": 3e-05, "vt": 0.0, "my": 0.00062, "mx": 0.0, "vu": 2e-05, "vv": 0.0, "vw": 0.0, "vx": 0.0, "vz": 0.0, "fp": 0.0, "fq": 0.0, "fr": 0.00213, "fs": 6e-05, "ft": 0.00082, "fu": 0.00096, "fv": 0.0, "fw": 0.0, "fx": 0.0, "fy": 8.999999999999999e-05, "fz": 0.0, "fa": 0.00164, "fb": 0.0, "fc": 1e-05, "fd": 0.0, "fe": 0.0023699999999999997, "ff": 0.00146, "fg": 1e-05, "fh": 0.0, "fi": 0.0028499999999999997, "fj": 0.0, "fk": 0.0, "fl": 0.00065, "fm": 1e-05, "fn": 0.0, "fo": 0.00488, "sz": 0.0, "sy": 0.00057, "sx": 0.0, "ss": 0.004050000000000001, "sr": 6e-05, "sq": 7.000000000000001e-05, "sp": 0.00191, "sw": 0.00024, "sv": 1e-05, "su": 0.00311, "st": 0.01053, "sk": 0.00039, "sj": 0.0, "si": 0.0055000000000000005, "sh": 0.00315, "so": 0.00398, "sn": 8.999999999999999e-05, "sm": 0.00065, "sl": 0.0005600000000000001, "sc": 0.00155, "sb": 8e-05, "sa": 0.00218, "sg": 2e-05, "sf": 0.00017, "se": 0.00932, "sd": 5e-05, "wq": 0.0, "lf": 0.00053, "lg": 6e-05, "ld": 0.00253, "le": 0.008289999999999999, "lb": 7.000000000000001e-05, "lc": 0.00012, "la": 0.00528, "ln": 6e-05, "lo": 0.00387, "ll": 0.00577, "lm": 0.00023, "lj": 0.0, "lk": 0.0002, "lh": 2e-05, "li": 0.00624, "lv": 0.00035000000000000005, "lw": 0.00013, "lt": 0.00124, "lu": 0.00135, "lr": 0.0001, "ls": 0.0014199999999999998, "lp": 0.00018999999999999998, "lq": 0.0, "lz": 0.0, "lx": 0.0, "ly": 0.00425, "yi": 0.00029, "yh": 1e-05, "yk": 0.0, "yj": 0.0, "ym": 0.00024, "yl": 0.00015, "yo": 0.0015, "yn": 0.00013, "ya": 0.00016, "yc": 0.00014000000000000001, "yb": 4e-05, "ye": 0.0009299999999999999, "yd": 7.000000000000001e-05, "yg": 3e-05, "yf": 1e-05, "yy": 0.0, "yx": 0.0, "yz": 2e-05, "yq": 0.0, "yp": 0.00025, "ys": 0.00097, "yr": 8e-05, "yu": 1e-05, "yt": 0.00017, "yw": 3e-05, "yv": 0.0, "em": 0.00374, "el": 0.0053, "eo": 0.00073, "en": 0.014539999999999999, "ei": 0.00183, "eh": 0.00026, "ek": 0.00016, "ej": 5e-05, "ee": 0.00378, "ed": 0.01168, "eg": 0.0012, "ef": 0.0016300000000000002, "ea": 0.00688, "ec": 0.00477, "eb": 0.00027, "ey": 0.0014399999999999999, "ex": 0.00214, "ez": 5e-05, "eu": 0.00031, "et": 0.00413, "ew": 0.00117, "ev": 0.00255, "eq": 0.00057, "ep": 0.00172, "es": 0.013389999999999999, "er": 0.02048, "rt": 0.00362, "ru": 0.00128, "rv": 0.0006900000000000001, "rw": 0.00013, "rp": 0.00042, "rq": 1e-05, "rr": 0.00121, "rs": 0.0039700000000000004, "rx": 1e-05, "ry": 0.00248, "rz": 1e-05, "rd": 0.00189, "re": 0.01854, "rf": 0.00032, "rg": 0.001, "ra": 0.006860000000000001, "rb": 0.00027, "rc": 0.00121, "rl": 0.00086, "rm": 0.0017499999999999998, "rn": 0.0016, "ro": 0.0072699999999999996, "rh": 0.00015, "ri": 0.00728, "rj": 1e-05, "rk": 0.00097, "xj": 0.0, "xk": 0.0, "xh": 4e-05, "xi": 0.00039, "xn": 0.0, "xo": 3e-05, "xl": 1e-05, "xm": 0.0, "xb": 0.0, "xc": 0.00026, "xa": 0.0003, "xf": 2e-05, "xg": 0.0, "xd": 0.0, "xe": 0.00021999999999999998, "xz": 0.0, "xx": 3e-05, "xy": 3e-05, "xr": 0.0, "xs": 0.0, "xp": 0.00067, "xq": 0.0, "xv": 2e-05, "xw": 0.0, "xt": 0.00047, "xu": 5e-05, "wy": 2e-05, "wx": 0.0, "kc": 0.0, "kb": 1e-05, "ka": 0.00017, "kg": 3e-05, "kf": 2e-05, "ke": 0.00214, "kd": 1e-05, "kk": 0.0, "kj": 0.0, "ki": 0.00098, "kh": 3e-05, "ko": 6e-05, "kn": 0.0005099999999999999, "km": 2e-05, "kl": 0.00010999999999999999, "ks": 0.00048, "kr": 3e-05, "kq": 0.0, "kp": 1e-05, "kw": 2e-05, "kv": 0.0, "ku": 3e-05, "kt": 1e-05, "kz": 0.0, "ky": 6e-05, "kx": 0.0, "dn": 8e-05, "do": 0.00188, "dl": 0.00032, "dm": 0.00017999999999999998, "dj": 5e-05, "dk": 0.0, "dh": 5e-05, "di": 0.00493, "df": 3e-05, "dg": 0.00031, "dd": 0.00043, "de": 0.0076500000000000005, "db": 3e-05, "dc": 3e-05, "da": 0.00151, "dz": 0.0, "dx": 0.0, "dy": 0.0005, "dv": 0.00018999999999999998, "dw": 8e-05, "dt": 3e-05, "du": 0.00148, "dr": 0.0008500000000000001, "ds": 0.00126, "dp": 2e-05, "dq": 1e-05, "qq": 0.0, "qp": 0.0, "qs": 0.0, "qr": 0.0, "qu": 0.00148, "qt": 0.0, "qw": 0.0, "qv": 0.0, "qy": 0.0, "qx": 0.0, "qz": 0.0, "qa": 0.0, "qc": 0.0, "qb": 0.0, "qe": 0.0, "qd": 0.0, "qg": 0.0, "qf": 0.0, "qi": 0.0, "qh": 0.0, "qk": 0.0, "qj": 0.0, "qm": 0.0, "ql": 0.0, "qo": 0.0, "qn": 0.0, "jx": 0.0, "jy": 0.0, "jz": 0.0, "jt": 0.0, "ju": 0.0005899999999999999, "jv": 0.0, "wg": 0.0, "wf": 2e-05, "we": 0.00361, "wd": 4e-05, "wc": 1e-05, "wb": 1e-05, "wa": 0.00385, "wo": 0.00222, "wn": 0.00079, "wm": 1e-05, "wl": 0.00015, "wk": 1e-05, "wj": 0.0, "wi": 0.00374, "wh": 0.00379, "jl": 0.0, "jm": 0.0, "jn": 0.0, "jo": 0.00054, "jh": 0.0, "ji": 3e-05, "jj": 0.0, "jk": 0.0, "jd": 0.0, "je": 0.00052, "jf": 0.0, "jg": 0.0, "ja": 0.00026, "jb": 0.0, "jc": 0.0, "ww": 0.0, "wv": 0.0, "wu": 1e-05, "wt": 7.000000000000001e-05, "ws": 0.00035000000000000005, "wr": 0.00031, "ck": 0.0011799999999999998, "cj": 0.0, "ci": 0.0028100000000000004, "ch": 0.00598, "co": 0.007940000000000001, "cn": 1e-05, "cm": 3e-05, "cl": 0.00149, "cc": 0.00083, "cb": 1e-05, "ca": 0.00538, "wp": 1e-05, "cg": 1e-05, "cf": 1e-05, "ce": 0.00651, "cd": 2e-05, "cz": 1e-05, "cy": 0.00042, "cx": 0.0, "cs": 0.00023, "cr": 0.00149, "cq": 5e-05, "cp": 1e-05, "cw": 0.0, "cv": 0.0, "cu": 0.0016300000000000002, "ct": 0.00461, "pr": 0.004739999999999999, "ps": 0.00055, "pp": 0.0013700000000000001, "pq": 0.0, "pv": 0.0, "pw": 1e-05, "pt": 0.00106, "pu": 0.00105, "pz": 0.0, "px": 0.0, "py": 0.00012, "wz": 0.0, "pb": 1e-05, "pc": 1e-05, "pa": 0.0032400000000000003, "pf": 1e-05, "pg": 0.0, "pd": 1e-05, "pe": 0.0047799999999999995, "pj": 0.0, "pk": 1e-05, "ph": 0.00094, "pi": 0.00123, "pn": 1e-05, "po": 0.00361, "pl": 0.00263, "pm": 0.00016, "iy": 0.0, "va": 0.0014000000000000002, "vb": 0.0, "vc": 0.0, "vd": 0.0, "ve": 0.00825, "vf": 0.0, "vg": 0.0, "vh": 0.0, "vi": 0.0027, "vj": 0.0, "vk": 0.0, "vl": 0.0, "vm": 0.0, "vn": 0.0, "vo": 0.0007099999999999999, "ii": 0.00023, "ih": 2e-05, "ik": 0.00043, "ij": 1e-05, "im": 0.00318, "il": 0.00432, "io": 0.00835, "in": 0.024329999999999997, "ia": 0.0028599999999999997, "vy": 5e-05, "ic": 0.00699, "ib": 0.00099, "ie": 0.00385, "id": 0.00296, "ig": 0.00255, "if": 0.00203, "jw": 0.0, "jp": 0.0, "jq": 0.0, "jr": 0.0, "js": 0.0, "bd": 2e-05, "be": 0.0057599999999999995, "bf": 0.0, "bg": 0.0, "ba": 0.00146, "bb": 0.00010999999999999999, "bc": 2e-05, "bl": 0.00233, "bm": 3e-05, "bn": 2e-05, "bo": 0.0019500000000000001, "bh": 1e-05, "bi": 0.00107, "bj": 0.00023, "bk": 0.0, "bt": 0.00017, "bu": 0.00185, "bv": 4e-05, "bw": 0.0, "bp": 1e-05, "bq": 0.0, "br": 0.0011200000000000001, "bs": 0.00046, "bx": 0.0, "by": 0.0017599999999999998, "bz": 0.0, "oo": 0.0021, "on": 0.01758, "om": 0.0054600000000000004, "ol": 0.00365, "ok": 0.00064, "oj": 7.000000000000001e-05, "oi": 0.0008799999999999999, "oh": 0.00021, "og": 0.00094, "of": 0.01175, "oe": 0.00039, "od": 0.0019500000000000001, "oc": 0.00166, "ob": 0.00097, "oa": 0.00057, "oz": 3e-05, "oy": 0.00035999999999999997, "ox": 0.00018999999999999998, "ow": 0.0033, "ov": 0.00178, "ou": 0.0087, "ot": 0.00442, "os": 0.0029, "or": 0.012769999999999998, "oq": 1e-05, "op": 0.0022400000000000002, "hz": 0.0, "hx": 0.0, "hy": 0.0005, "hr": 0.00084, "hs": 0.00015, "hp": 1e-05, "hq": 0.0, "hv": 0.0, "hw": 5e-05, "ht": 0.0013, "hu": 0.00074, "hj": 0.0, "hk": 0.0, "hh": 1e-05, "hi": 0.0076300000000000005, "hn": 0.00026, "ho": 0.00485, "hl": 0.00013, "hm": 0.00013, "hb": 4e-05, "hc": 1e-05, "ha": 0.009260000000000001, "hf": 2e-05, "hg": 0.0, "hd": 3e-05, "he": 0.030750000000000003, "uy": 5e-05, "ux": 4e-05, "uz": 2e-05, "uu": 1e-05, "ut": 0.004050000000000001, "uw": 0.0, "uv": 3e-05, "uq": 0.0, "up": 0.00136, "us": 0.00454, "ur": 0.005430000000000001, "um": 0.0013800000000000002, "ul": 0.0034599999999999995, "uo": 0.00010999999999999999, "un": 0.00394, "ui": 0.00101, "uh": 1e-05, "uk": 5e-05, "uj": 1e-05, "ue": 0.00147, "ud": 0.00091, "ug": 0.00128, "uf": 0.00018999999999999998, "ua": 0.00136, "uc": 0.00188, "ub": 0.00089, "aa": 3e-05, "ac": 0.0044800000000000005, "ab": 0.0023, "ae": 0.00012, "ad": 0.00368, "ag": 0.0020499999999999997, "af": 0.00074, "ai": 0.00316, "ah": 0.00014000000000000001, "ak": 0.00105, "aj": 0.00012, "am": 0.0028499999999999997, "al": 0.01087, "ao": 5e-05, "an": 0.01985, "aq": 2e-05, "ap": 0.00203, "as": 0.00871, "ar": 0.01075, "au": 0.0011899999999999999, "at": 0.014870000000000001, "aw": 0.0006, "av": 0.0020499999999999997, "ay": 0.00217, "ax": 0.00018999999999999998, "az": 0.00012, "nh": 0.00010999999999999999, "ni": 0.0033900000000000002, "nj": 0.00010999999999999999, "nk": 0.00052, "nl": 0.00064, "nm": 0.00028000000000000003, "nn": 0.00073, "no": 0.0046500000000000005, "na": 0.0034699999999999996, "nb": 4e-05, "nc": 0.00416, "nd": 0.01352, "ne": 0.006919999999999999, "nf": 0.00067, "ng": 0.00953, "nx": 3e-05, "ny": 0.00098, "nz": 4e-05, "np": 6e-05, "nq": 6e-05, "nr": 8.999999999999999e-05, "ns": 0.00509, "nt": 0.010409999999999999, "nu": 0.00079, "nv": 0.00052, "nw": 6e-05, "vp": 0.0, "vq": 0.0}

app/examples/util/datasets/index.js

@@ -8,6 +8,7 @@ import msft_raw from './msft.csv';
 import simpsons_raw from './simpsons.csv';
 import simpsons_alternate_raw from './simpsons-alternate.csv';
 import stocks_raw from './stocks.csv';
+import bigram from './bigram.json';
 
 function readCSV (raw) {
   return dl.read(raw, {
@@ -28,5 +29,6 @@ export {
   msft,
   simpsons,
   simpsons_alternate,
-  stocks
+  stocks,
+  bigram
 };

app/examples/util/showComponent/index.js

@@ -1,13 +1,13 @@
 import html from './index.jade';
 import './index.styl';
 
-export default function showComponent (Component, elementType, options) {
+export default function showComponent (Component, options) {
   document.body.innerHTML = html();
 
   let el = document.getElementById('vis-container')
-  .appendChild(document.createElement(elementType));
+    .appendChild(document.createElement('div'));
   el.setAttribute('id', 'vis-element');
-  el.className = 'vis-full';
+  el.setAttribute('class', 'vis-full');
 
   let vis = new Component(el, options);
   vis.render();

components/SimilarityGraph/index.js

@@ -0,0 +1,198 @@
+import VisComponent from '../../VisComponent';
+
+import d3 from 'd3';
+import cola from 'webcola';
+
+export default class SimilarityGraph extends VisComponent {
+  constructor (el, {data, threshold = 0, linkDistance = 100, id = 'id', color, size = 10, width = 960, height = 540}) {
+    super(el);
+    this.data = data;
+
+    // Empty the top-level div.
+    d3.select(this.el)
+      .selectAll('*').remove();
+
+    // Construct an SVG element inside the top-level div.
+    this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    this.svg.setAttribute('width', width);
+    this.svg.setAttribute('height', height);
+    this.el.appendChild(this.svg);
+
+    // Construct a function that returns the needed size - either a constant
+    // supplied in the `size` parameter, or a lookup function that pulls it from
+    // the data table.
+    const sizeMap = d3.scale.linear().domain(d3.extent(data, d => d[size])).range([5, 15]);
+    const sizeFunc = d => typeof size === 'string' ? sizeMap(d[size]) : size;
+
+    // Construct lookup function for the color field.
+    const colorScale = d3.scale.linear().domain(d3.extent(data, d => d[color])).range(['white', 'steelblue']);
+    const colormap = typeof data[0][color] === 'string' ? d3.scale.category10() : colorScale;
+    const colorFunc = color !== undefined ? d => colormap(d[color]) : () => 'rgb(31, 119, 180)';
+
+    // Get the width and height of the SVG element. This is necessary here in
+    // case non-pixel measures like '100%' were passed to the component.
+    const bbox = this.svg.getBoundingClientRect();
+    const w = bbox.width;
+    const h = bbox.height;
+
+    // Initialize the cola object.
+    this.cola = cola.d3adaptor()
+      .linkDistance(linkDistance)
+      .size([w, h]);
+
+    // Compute the graph.
+    //
+    // Create a list of nodes.
+    const nodes = this.nodes = this.data.map(d => ({
+      id: d[id],
+      color: colorFunc(d),
+      width: 2 * sizeFunc(d),
+      height: 2 * sizeFunc(d),
+      size: sizeFunc(d)
+    }));
+
+    // Construct an index map into the nodes list.
+    let idxmap = {};
+    nodes.forEach((node, i) => idxmap[node.id] = i);
+
+    // Create a list of links by using a nested forEach to cull out the links
+    // that don't have enough strength.
+    this.links = [];
+    this.data.forEach(a => this.data.forEach(b => {
+      if (a[id] !== b[id] && a[b[id]] >= threshold) {
+        this.links.push({
+          source: idxmap[a[id]],
+          target: idxmap[b[id]]
+        });
+      }
+    }));
+
+    // Create a D3 selection for the links, and initialize it with some line
+    // elements.
+    this.linkSelection = d3.select(this.svg)
+      .selectAll('line.link')
+      .data(this.links);
+
+    this.linkSelection.enter()
+      .append('line')
+      .classed('link', true)
+      .attr('stroke-width', 1)
+      .attr('stroke', 'gray');
+
+    // Create a D3 selection for the nodes, and initialize it with some circle
+    // elements.
+    this.nodeSelection = d3.select(this.svg)
+      .selectAll('circle.node')
+      .data(this.nodes);
+
+    this.nodeSelection.enter()
+      .append('circle')
+      .classed('node', true)
+      .attr('r', d => d.size)
+      .style('stroke', 'black')
+      .style('fill', d => d.color)
+      .style('cursor', 'crosshair')
+      .call(this.cola.drag);
+
+    // Create a D3 selection for node labels.
+    this.labelSelection = d3.select(this.svg)
+      .selectAll('text.label')
+      .data(this.nodes);
+
+    const that = this;
+    this.labelSelection.enter()
+      .append('text')
+      .classed('label', true)
+      .text(d => d.id)
+      .each(function (d, i) {
+        const bbox = this.getBBox();
+        that.nodes[i].height += bbox.height;
+      })
+      .style('cursor', 'crosshair')
+      .call(this.cola.drag);
+
+    this.cola.on('tick', (...args) => {
+      this.nodeSelection
+        .attr('cx', d => d.x)
+        .attr('cy', d => d.y);
+
+      this.labelSelection
+        .attr('x', function (d) {
+          const bbox = this.getBBox();
+          return d.x - 0.5 * bbox.width;
+        })
+        .attr('y', function (d) {
+          const bbox = this.getBBox();
+          return d.y + bbox.height + 0.5 * d.size;
+        });
+
+      this.linkSelection
+        .attr('x1', d => d.source.x)
+        .attr('y1', d => d.source.y)
+        .attr('x2', d => d.target.x)
+        .attr('y2', d => d.target.y);
+    });
+
+    this.cola.avoidOverlaps(true)
+      .nodes(this.nodes)
+      .links(this.links)
+      .start(10, 15, 20);
+  }
+
+  render () {}
+
+  static get options () {
+    return [
+      {
+        name: 'data',
+        description: 'The data table.',
+        type: 'table',
+        format: 'objectlist'
+      },
+      {
+        name: 'id',
+        description: 'The field containing the identifier of each row.',
+        type: 'string',
+        domain: {
+          mode: 'field',
+          from: 'data',
+          fieldTypes: ['string', 'integer', 'number']
+        }
+      },
+      {
+        name: 'color',
+        description: 'The field used for coloring the nodes.',
+        type: 'string',
+        domain: {
+          mode: 'field',
+          from: 'data',
+          fieldTypes: ['string', 'date', 'number', 'integer', 'boolean']
+        }
+      },
+      {
+        name: 'size',
+        description: 'The field used for sizing the nodes.',
+        type: 'string',
+        domain: {
+          mode: 'field',
+          from: 'data',
+          fieldTypes: ['number', 'integer']
+        }
+      },
+      {
+        name: 'linkDistance',
+        description: 'The desired length of links.',
+        type: 'number',
+        format: 'number',
+        default: 100
+      },
+      {
+        name: 'threshold',
+        description: 'Only display links where the similarity is above this threshold.',
+        type: 'number',
+        format: 'number',
+        default: 0
+      }
+    ];
+  }
+}

components/index.js

@@ -11,6 +11,7 @@ import LineUp from './LineUp';
 import OnSet from './OnSet';
 import ScatterPlot from './ScatterPlot';
 import ScatterPlotMatrix from './ScatterPlotMatrix';
+import SimilarityGraph from './SimilarityGraph';
 import SurvivalPlot from './SurvivalPlot';
 import TrackerDash from './TrackerDash';
 import UpSet from './UpSet';
@@ -29,6 +30,7 @@ export default {
   OnSet,
   ScatterPlot,
   ScatterPlotMatrix,
+  SimilarityGraph,
   SurvivalPlot,
   TrackerDash,
   UpSet