https://github.com/tdt/rdf2html

a javascript library to visualize an array of RDF triples into an HTML page
https://github.com/tdt/rdf2html

Last synced: about 1 month ago
JSON representation

a javascript library to visualize an array of RDF triples into an HTML page

• Host: GitHub
• URL: https://github.com/tdt/rdf2html
• Owner: tdt
• Created: 2014-03-10T12:44:07.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2016-02-08T14:41:41.000Z (almost 9 years ago)
• Last Synced: 2024-08-01T12:35:42.932Z (4 months ago)
• Language: JavaScript
• Size: 46.9 KB
• Stars: 15
• Watchers: 3
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-starred - tdt/rdf2html - a javascript library to visualize an array of RDF triples into an HTML page (others)

README

        
rdf2html

========

a javascript library to visualize an array of RDF triples into an HTML page

Current stage: `planning - alpha version`

## Usage

### HTML skeleton ###

We use a HTML data attribute `data-rdftohtml-plugin` to determine where to inject HTML generated from the plugins, for example for the map plugin:

```html



```


Somewhere in the HTML code, you should include the triples in turtle format:

```html

    @base <http://semweb.mmlab.be/ns/oh#> .

    @prefix owl: <http://www.w3.org/2002/07/owl#> .

    <http://semweb.mmlab.be/ns/oh> a owl:Ontology;

```

You can customize this HTML to fit your page's lay-out.

To trigger the plugin, you will need to add the following script to your HTML code:

```html

    var triples = document.getElementById("turtle").innerHTML;

    var config = {}; // Won't call any plugins

    rdf2html(triples, config);

```

### Configuration ###

By default, the empty `config` object won't do anything.

Every plugin you want to enable must be declared inside this object as follows:

```javascript

var config = { plugins: ['triples', 'map', 'ontology', 'paging'] };

```

Each plugin can accept its own configuration, this requires the `plugins` array to be represented as a dictionary:

```javascript

var config = {

    plugins: {

        triples: true,

        map: {

            // Base path on which the assets are provided

            assetsBase: '/assets'

        },

        ontology: true,

        paging: true

    }

};

```

Using `true` or `{}` as plugin value, or not providing specific fields will cause the plugin to use its default configuration for those fields. 

Custom plugins can be added in this dictionary representation by simply adding a new element as follows:

```javascript

var config = {

    plugins: {

        ...

        myCustomPlugin: {

            // This callback is called once, 'db' contains all declared triples.

            callback: function(db, container, prefixes, config) {

                console.log(db.find('http://semweb.mmlab.be/ns/oh', null, null));

            }

        }

        ...

    }

};

```

The `callback` field is the actual entry point of the plugin.

For debugging purposes, the config can also contain a `verbose` boolean field.

### A visualizer for your vocabulary ###

Some guidelines:

You're creating a particular visualization: e.g., you want to display an ontology, you want to display something on a map, you want to show some meta-data, etc. If there is already a visualization for what you want to do, e.g., a map or an ontology visualizer, integrate it in the specific code. If you want to do something completely new, then go ahead and add your own javascript class.

## Requirements

 * [Node.js](http://nodejs.org/)

 * [N3](https://www.npmjs.org/package/n3)

 * [jQuery](https://www.npmjs.org/package/jquery)

 * [Leaflet](https://www.npmjs.org/package/leaflet)

 Or us

## Contribute

Clone this repository, run `npm install`, and use the resulting `dist/` folder.

The `dist/` folder can be regenerated by running `node_modules/gulp/bin/gulp.js dist`.

## Support

Currently, we support these ontologies:

 * geo

 * owl/rdfs

We want you to contribute, or we are planning to contribute these in the future:

 * apps4eu

 * foaf

 * dcterms

 * dbpedia-owl

 * dcat

 * data cube

 * oslo: http://purl.org/oslo#

 * opening hours: http://semweb.mmlab.be/oh#

 * schema: http://schema.org/

## Authors ##

Ghent University - MMLab - iMinds: Miel Vander Sande, Pieter Colpaert

We Open Data: Michiel Vancoillie

© 2014 - Ghent University - MIT License