Skip to content
/ rdf2html Public

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

Notifications You must be signed in to change notification settings

tdt/rdf2html

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

<div data-rdftohtml-plugin='map'></div>

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

<script id="turtle" type="text/turtle">
    @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;
</script>

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:

<script type="text/javascript">
    var triples = document.getElementById("turtle").innerHTML;
    var config = {}; // Won't call any plugins
    rdf2html(triples, config);
</script>

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:

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:

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:

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

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:

Authors

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

We Open Data: Michiel Vancoillie

© 2014 - Ghent University - MIT License

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •