Skip to content

kruegert/visualization-framework

 
 

Repository files navigation

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:

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

License

See LICENSE.

About

Web-based Visualization Framework and Exploratories

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 99.1%
  • Other 0.9%