Argunet Browser

Argunet Browser is an embeddable Javascript widget that visualizes Argunet argument maps as interactive force directed graphs, allowing users to explore complex debates.

You can use Argunet Browser to embed your argument maps into any webpage. It’s free and easy. Just download the files and follow the instructions below. You can use any argument map you made with Argunet Editor. Just export it to a .graphml file. Alternatively you can use a html microformat and even change your debate data on the fly.

Features

• easily embeddable widget
• automatic force directed graph layout
• loads Argunet graphml files and html microformat
• just html5 and css, no flash, no dependencies
• javascript api: can be controlled from javascript, emits events
• multiple instances on the same page possible
• no code or css conflicts with parent page
• variable graph depth
• fullscreen mode
• screenshot button

Argunet Browser uses the html canvas element for rendering. This is an element of the html standard that is not yet supported by the Internet Explorer. Please use a modern browser that has a better support for html5.

Download & Instructions

Download the project

This is a zip file of the whole project, including all the source files. We only need the compiled code in the /lib folder.

Argunet Browser can be used with an exported debate from Argunet Editor or with a simple html micro format. The latter is the fastest and easiest way for setting up your own argument map, so let’s start with that.

How to embed a debate using the html microformat

1. Unpack the downloaded zip file and upload the contents from the “/lib” folder to your server.
2. Insert the following code snippet into your page at the place where Argunet Browser should be inserted:
   
   
3. Change YOUR-URL-TO/ArgunetBrowser.load.min.js to the url where you put the file ArgunetBrowser.load.min.js from the lib folder.
4. Change YOUR-URL-TO/ArgunetBrowser.embed.min.js to the url where you put the file ArgunetBrowser.embed.min.js from the lib folder.
5. Change YOUR-URL-TO/ArgunetBrowser.min.css to the url where you put the file ArgunetBrowser.min.css from the lib folder.

That’s it! Now reload your page and it should look like this:

Let’s take a closer look at the html code we inserted. Argunet Browser looks for its data within the div with the “argument-map” class. In this div you can now build your own argument map. It’s really simple. An argument looks like this:

Try it! You only have to insert a div with the “argument” class, an id and a title in a h4 element. Just change the class into “thesis” to insert a thesis into the map. Now let’s look at the relations. A support relation looks like this:

You can change the class to “attack” if you want to insert an attack relation. These elements only need two further informations: Use the data-to attribute to define which argument or thesis is attacked or supported. Use the data-from attribute to define which argument or thesis is supporting or attacking. In both cases you just need to insert the ids.

And that’s all you need to know to build and embed your own argument map in html!

This method works best for small maps. If you are planning to reconstruct a complex debate, we recommend to use Argunet Editor, export your map into a .graphml file and load that file with Argunet Browser. The next section describes how to do just that.

How to embed a debate from Argunet Editor into your page

To embed a debate from Argunet Editor into your page, follow these instructions:

1. Unpack the file and upload the contents from the “/lib” folder to your server.
2. Export your argument map from Argunet Editor to a .graphml file. This will only work if you installed the yWorks Exporter plugin. If you have not already done this, head over to these installation instructions first.
3. Go to File/Export…
4. Select “Export argument map (svg, pdf, graphml, jpeg)” and click “Next”.
5. Now click on “Browse”. In the file browser select “Graph XML File Format (graphml)” as file format and choose a file name.
6. Click on “Finish”.
7. Upload the exported file to your server.
8. Insert the following code snippet into your page at the place where Argunet Browser should be inserted:
   

   This will load Argunet Browser with your argument map after you changed the paths to the location you uploaded the files to.

9. Change YOUR-URL-TO/ArgunetBrowser.load.min.js to the url where you put the file ArgunetBrowser.load.min.js from the lib folder.
10. Change YOUR-URL-TO/ArgunetBrowser.embed.min.js to the url where you put the file ArgunetBrowser.embed.min.js from the lib folder.
11. Change YOUR-DEBATE.graphml to the url where you put your .graphml file.
12. Change YOUR-URL-TO/ArgunetBrowser.min.css to the url where you put the file ArgunetBrowser.min.css from the lib folder.
13. Now you have to decide which argument or thesis should be selected first. Open the .graphml file with a text editor and search for the title or description of the argument or thesis you want to select. If you have found the text, look for the nearest <arg:argument id="some-number" > or <arg:thesis id="some-number"> element and copy the id. Replace "ID-OF-FIRST-NODE-SELECTED" with this id.

Now reload your page and it should show your debate in the Argunet Browser.

Because of cross-domain restrictions the .graphml file and the Argunet Browser files have to be loaded from the same domain. For further information see this Wikipedia article.

For similar security reasons it’s not possible in Chrome to test Argunet Browser by opening a test html page from the file system. Please test it on a local server (with localhost as domain), upload your files to a server on a different domain or use a different browser.

Github & Credits

For further technical information, examples and the source code visit our Github repository.

Argunet Browser is open-source and licensed under the MIT license.

Argunet Browser was developed by Christian Voigt and funded by EuTRACE, to present a complex map of the debate about climate engineering.