Javascript, Convert data to correct JSON/CSV format required by app
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Using this app:
http://visualdataweb.de/webvowl/

You need to create a json/csv file that is compatible with the app, using the data below. In other words, you need to modify the data below so that is in a format that the js app can read it.

i will be glad if you make a function that take as input a bad json and give right json as output. otherwise, fixing the json is ok

The idea is to visualize how node sequences connect with each other.
The value "connect_to_sequence" defines how sequence nodes should connect with each other node.

So for example, from node "Sequence 25", four arrows should go out into nodes with id 1,2,5,10.
From node "Sequence 1" an arrow should go into node with id 25 ("Sequence 25").

The data1, data2, data3, data4 should be show on the right sidebar when selected on "Selection Details":

[
"id": 25,
"name": "Sequence 25",
"connects_to_sequences": [1,2,5,10],
"data1": "Some data to show when selected 1",
"data2": "Some data to show when selected 2",
"data3": "Some data to show when selected 3",
"data4": "Some data to show when selected 4"
],
[
"id": 1,
"name": "Sequence 1",
"connects_to_sequences": [25],
"data1": "Some data to show when selected 5",
"data2": "Some data to show when selected 6",
"data3": "Some data to show when selected 7",
"data4": "Some data to show when selected 8"
],
[
"id": 2,
"name": "Sequence 2",
"connects_to_sequences": [1,10, 5],
"data1": "Some data to show when selected A",
"data2": "Some data to show when selected B",
"data3": "Some data to show when selected C",
"data4": "Some data to show when selected D"
],
[
"id": 10,
"name": "Sequence 10",
"connects_to_sequences": [25, 2],
"data1": "Some data to show when selected E",
"data2": "Some data to show when selected F",
"data3": "Some data to show when selected G",
"data4": "Some data to show when selected A"
],

Modify the above data in the format required by the app to display what is described above.

to export a sample good json format, there is a link in the bottom of the webapp to export the selected node. you only have to select a node and export it as a json format. then you have it.

awarded to CyteBode

Crowdsource coding tasks.

1 Solution

Winning solution

I really don't get why you're targeting the WebVOWL app. It's meant to visualize OWL ontologies specifically, but your data clearly isn't an ontology.

Is it that you only need the ability to visualize the graph and move nodes around? If so, it's much easier to just use a dedicated graph visualization library and make your own "app".

Also, your JSON is formatted wrong, the notation for objects is to use curly brackets, not square brackets.

Here is my solution, it uses vis and underscore: https://jsfiddle.net/cs33nL3m/

Edit: I just saw that you needed arrows, and to keep them both ways if the connections were defined as such. Updated code: https://jsfiddle.net/cs33nL3m/2/

wooow!! :) :) :) the solution is fantastic and COMPLETE!!! Also, i liked the arrows you added them later! good work! :)
Chlegou 9 months ago