Different Converted Files Based on WebVOWL Use

[Lasutriv]

Issue

Afternoon, so I've been implementing WebVOWL into the browser like the example on here. I noticed with the example it uses foaf_spec.json as its converted owl file with a different json syntax, consisting of 'nodes' and 'links', compared to the converted version using the owl2vowl.jar file.

I've successfully implemented the example file and WebVOWL app into a test website but am not sure how to properly create the new format like foaf_spec.json so that the in-browser WebVOWL displays the ontology correctly. Note that the in-browser WebVOWL is different than the full page design.

Question

Is there any way to convert to this 'nodes'/'links' format that the example uses or would reverse engineering the basic foaf.json version into the foaf_spec.json version be the only way?

Below are txt files in json format since the system doesn't allow uploading json files. foaf.txt foaf_spec.txt

[vitalis-wiens]

Hi, for the current version you need its json syntax using classes and properties.

You could simply use the current owl2vowl converter and use its output as input for your webvowl.

If you want to use the node/link structure you will either have to convert it to the proper json format or overwrite the parser.parse() function. It is responsible to read the json and create the corresponding objects for the rendering.

I hope this helps :)

[Lasutriv]

Well the version of webvowl that is in the web page uses different js files, specifically spec_VOWL.js and web_VOWL_graph.js, while the standable full page web version uses webvowl.app.js and webvowl.js.

Is there a way to use the current updated version to parse the json input and apply it to the graph in the page? The graph in the html code that displays the visual ontology is: Inside the graph div (which was copied over from the in-browser example I told you about here) is where the svg graph is populated from the web_VOWL_graph.js.

So once the updated version parses the json, is there a way to specify whether it goes into an svg graph in the graph div from the image above? I heard that there were differences in the css design as well and don't know what all would port over entirely if I were to try and patch over the parser from the new version into the older version so that the graph can be displayed anywhere in a web page.

I thank you very much for your time.

[Lasutriv]

@vitalis-wiens Any updates?

[vitalis-wiens]

Hi, in the app.js you have the GRAPH_SELECTOR = "#graph", this one specifies where the svg is added. in graph.js you have the function redraw function

 redrawGraph(){
    remove();

    graphContainer = d3.selectAll(options.graphContainerSelector())
      .append("svg")
      .classed("vowlGraph", true)
      .attr("width", options.width())
      .attr("height", options.height())
      .call(zoom)
      .append("g");
    // add touch and double click functions
    ...
  }

note that the container is retrieved from the options.graphContainerSelector() and the svg is then appended to the div

I hope this helps :)