🧬 A web component to visualize RDF with Cytoscape
A web component to easily display RDF quads data as a Cytoscape JS network.
This component has been built specifically to visualize Nanopublications, but can be used with any RDF quads data (composed of subject, predicate, object, graph).
⚠️ Currently the component only supports RDF in thetrigformat
Getting started
To install in a project:
npm install --save cytoscape-rdf
# or
yarn add cytoscape-rdf
# or import in a html file
<script type="module" src="https://cdn.jsdelivr.net/npm/@vemonet/cytoscape-rdf/dist/cytoscape-rdf.min.js"></script>Use in your HTML, or any other framework, to visualize RDF:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cytoscape RDF</title>
<meta charset="UTF-8" />
<script type="module" src="/src/cytoscape-rdf.ts"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@vemonet/cytoscape-rdf/dist/cytoscape-rdf.min.js"></script>
</head>
<body>
<div style="height: 100vh; width: 70%;">
<cytoscape-rdf
url="https://purl.org/np/RAHtkscyyyJDLvWRuINckQrn5rbHzQKvwakNVC3fmRzGU.trig"
id="cytoscapeNanopub"
/>
</div>
</body>
</html>Attributes available on <cytoscape-rdf>:
-
url: to pass a URL to retrieve the RDF to display -
rdf: to pass the RDF directly as a string in thetrigformat -
elements: to pass directly the cytoscape elements -
cytoscapeStyle: to pass the style object for cytoscape -
layout: to pass the layout object for cytoscape
Development
Requirements: Node.js version >=12.2.0
git clone https://github.com/vemonet/cytoscape-rdf.git
cd cytoscape-rdfInstall:
yarnRun in development:
yarn devBuild:
yarn buildAknowledgments
Built with: