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:
;;; d3;
d3.jsonldVis(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: 'cubic-in-out' // 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:
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: