JSON-LD visualization

Turn JSON-LD into pretty graphs.

Usage

See the examples/ folder for usage details.

Import jsonld-vis.js and jsonld-vis.css. The CSS may look better if 'Open Sans' is available as a font (but it will work without it).

To initialize, simply load data into the exported jsonldVis function:

import d3 from 'd3';
import jsonldVis from 'jsonld-vis';

jsonldVis(d3, data, '#graph');

// OR override some layout options
jsonldVis(d3, data, '#graph', { w: 900, h: 700, maxLabelWidth: 350 });

jsonldVis(d3, data, querySelector[, config])

Where the optional config variable is as follows:

{
  h: 600, // height
  w: 800, // width
  maxLabelWidth: 250, // maximum label width
  transitionDuration: 750, // transition duration, in ms
  transitionEase: d3.easeCubicInOut, // transition easing function
  minRadius: 5 // minimum node radius
  scalingFactor: 2 // factor to scale node sizes
}

Specifying the width is just for initialization purposes. The width of the svg element will dynamically be adjusted as necessary. For horizontal auto-scrolling, the specified querySelector must have horizontal scroll enabled:

query-selector {
  overflow-x: auto;
}

For large data, it may be necessary to adjust the scaling so that node sizes still look reasonable. The scalingFactor allows adjustment of this - larger values of scalingFactor will reduce the maximum node size.

Labels that are longer than maximum label width are truncated; hover over the node to see the full label:

License

Apache 2.0