jsonld-vis

KO | EN

gitlite — search

#javascript #hacktoberfest #react #ai #typescript #golang #deep-learning #cli #vue #security #pytorch #ios #mcp #openai

(★ 159)

Turn JSON-LD into pretty graphs

File Explorer

Download Latest Version (.zip)

- .gitkeep
- example.json
- index.css
- index.html
- index.js
- screen1.png
- screen2.png
- screen3.png
- screen4.png
- screen5.png
- index.css
- index.js
.gitignore
LICENSE
package.json
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# JSON-LD visualization

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

Turn JSON-LD into pretty graphs.

![Folded view of JSON tree](https://raw.githubusercontent.com/science-periodicals/jsonld-vis/master/example/screen1.png)

![Partly unfolded view of JSON tree](https://raw.githubusercontent.com/science-periodicals/jsonld-vis/master/example/screen3.png)

![Fully unfolded view of JSON tree](https://raw.githubusercontent.com/science-periodicals/jsonld-vis/master/example/screen5.png)

### 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:

```js
import d3 from 'd3';
import jsonldVis from 'jsonld-vis';
jsonldVis(d3);

d3.json('example.json', (err, data) => {
  if (err) return console.warn(err);
  d3.jsonldVis(data, '#graph', { w: 800, h: 600, maxLabelWidth: 250 });
});
```

#### `d3.jsonldVis(data, querySelector[, config])`

Where the optional `config` variable is as follows:

```js
{
  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:

```css
query-selector {
  overflow-x: autho;
}
```

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:

![Truncated label](https://raw.githubusercontent.com/science-periodicals/jsonld-vis/master/example/screen2.png)
![Hover text](https://raw.githubusercontent.com/science-periodicals/jsonld-vis/master/example/screen4.png)

### License

[Apache 2.0](https://github.com/science-periodicals/jsonld-vis/blob/master/LICENSE)

jsonld-vis

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

jsonld-vis

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README