visFramework

This readme contains information on how to build and run the framework. You can find the full documentation in /docs/documentation.md.

1. visFramework
   1. Building
   2. Running on a Single Device
   3. Running for Multiple Devices
   4. Sharing a Session via Share Button and Connector
   5. Usage
   6. Authors
   7. License

Building

This is optional, the development version (not minified) works without building.

1. Install Node.js
2. Run npm install
3. For building a development version of the library run npm run build:development
4. For building a minified version of the library run npm run build:production

If you added or removed any files, you need to make sure that the build.js file contains all JavaScript files!

Running on a Single Device

Open index.html for the development version or index_production.html for the production version with a web browser.

Running for Multiple Devices

If you want to display views on separate devices, you have to start the included websocket server via npm start. The server runs on port 80 by default, you can configure this in pakcage.json

The main part of the framework with the toolbar is then available on the local machine at http://127.0.0.1/?channel=1.

Now choose a data provider, simulation and the visFramework as visualization to display any data.

In another browser tab or on another device you can now access any of the currently displayed views via http://<ipaddress>/?channel=1#<viewname> (example: http://127.0.0.1/?channel=1#filterInfo).

Sharing a Session via Share Button and Connector (deactivated in example)

For this feature the framework must be served via a Node.js server.

1. Make sure that all Node.js modules are installed (npm install in the project root)
2. Start the server with npm start
3. In the session you want to share, press the share button on the right side of the toolbar
4. On a second client choose the Synchronized VF-Clients connector

Usage

Information on the usage is shown on a help page. Click the (?) button on the top-right or select (?) Help & Information from the menu if the page is shown in a narrow viewport.

Help for a view is shown when hovering, clicking or tapping the view's title.

Authors

Authors of this project (comprising ideas, architecture, and code) are:

• Robert Krueger krueger@g.harvard.edu (krueger@vis.uni-stuttgart.de)
• Sebastian Alberternst sebastian.alberternst@dfki.de
• Frank Heyen frank.heyen@outlook.de
• Jakub Krawczuk jakubkrawczuk@gmail.com
• Salvatore Rinzivillo rinzivillo@isti.cnr.it
• Simon Kaier simon.stins@gmail.com
• Rezzakul Haider safat_111@yahoo.com

This project and code was mainly developed by:

• USTUTT - University of Stuttgart, Institute for Visualization and Interactive Systems
• DFKI - German Research Center for Artificial Intelligence

Parts of the project and code were developed as part of the EU H2020 project CIMPLEX - Bringing CItizens, Models and Data together in Participatory, Interactive SociaL EXploratories.

Futher partners that deliver data and simulations via webservice access are:

• ETHZ (ETH Zurich)
• UCL (University College of London)
• Közép-európai Egyetem (Central European University, CEU)
• ISI (Fondazione Istituto per l'Interscambio Scientifico)
• CNR (National Research Council)
• FBK (Bruno Kessler Foundation)

Client External Dependencies

The table below lists all used external libraries and their respective uses in the client.

Name	Used for	License *
Bootstrap	general page layout	MIT License
Colorbrewer	color palettes that are used in color mapping	Apache License 2.0
Crossfilter	data filtering	Apache License 2.0
d3 v3	utility functions, scaling, interaction, colors and timeline.	BSD 3-clause "New" or "Revised" License
d3 v4	updated packages for some functionality	BSD 3-clause "New" or "Revised" License
d3forcebundle	force directed edge bundling with d3	GNU General Public License v2.0
Font Awesome	icons	SIL OFL 1.1 (font), MIT License (code)
gLayers	canvas Layer for Leaflet	MIT License
jLouvain	community detection	MIT License
jQuery	HTTP requests and DOM manipulation	MIT License
Leaflet	geographic map	BSD 2-clause "Simplified" License
Mustache	HTML logic-less templates	MIT License
Sortable	view drag and drop to reorder views	MIT License
inflection.js	word inflection	MIT License
cimplex-decoder	a decoder library for cimplex services	Apache License 2.0
cimplex-globe	a library for visualizing data on the globe	Apache License 2.0
socket.io	Socket.IO enables real-time bidirectional event-based communication.	MIT License

* as of 2018-01-22

Server External Dependencies

The table below lists all used external libraries and their respective uses in the server.

Name	Used for	License *
socket.io	Socket.IO enables real-time bidirectional event-based communication.	MIT License
express	Fast, unopinionated, minimalist web framework for node.	MIT License
uuid	Fast, unopinionated, minimalist web framework for node.	MIT License
ws	imple to use, blazing fast and thoroughly tested WebSocket client and server for Node.js	MIT License

* as of 2018-01-24

Tile providers used in example

• Tileset light_gray, light_gray(no labels), dark and dark(no labels) © OpenStreetMap &copy CartoDB
• Tileset sattelite © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community

Additional contributions

• countries.json - borders of all countries based on the data by Natural Earth Data

License

See LICENSE.